Layout

Layout refers to the visual arrangement and organization of elements on a screen or page within the app. It determines how users will see and interact with the app's content and functionality.

About the component


Image Description
  •  Last Update 25 Oct, 2023
  •  Component Version : 2.0.0
  •  API 21, Android 5.0 Lollipop
  •  15 Blocks Available

Horizontal Scroll Arrangement

This component arranges its child components horizontally within a scrollable view. It extends the Horizontal Arrangement component by adding scroll functionality and scrollbar customization options.

Overview

A visible component that, align the view from left to right as a scroll arrangement.

Events

Image Description
Events

Click

  • This event is triggered when the user taps and releases the Horizontal Arrangement.

    • Image Description
    Events

    Long Click

  • This event is triggered when the user presses and holds down on the Horizontal Arrangement for an extended period.

    • Image Description
    Events

    Touch Down

  • This event is triggered when the user first touches the Horizontal Arrangement.

    • Image Description
    Events

    Touch Up

  • This event is triggered when the user releases their touch from the Horizontal Arrangement.

    • Image Description
    Events

    On Over Scrolling Change

  • Triggered when over-scrolling occurs. Provides a float value indicating the over-scroll amount.

    • # Name Type(s) Default Value
    1 value Integer -
    Image Description
    Events

    On scrolling Change

  • Triggered when the scroll position changes. Provides the new and old scroll X and Y coordinates.

    • # Name Type(s) Default Value
    1 scrollX Integer -
    2 scrollY Integer -
    3 oldScrollX Integer -
    4 oldScrollY Integer -

    Methods

    Image Description
    Methods

    Border

  • Sets the border of the arrangement.

    • # Name Type(s) Default Value
    1 BGColor color -
    2 Stroke Integer -
    Image Description
    Methods

    Smooth scroll By

  • Smoothly scrolls the content by the specified delta X and Y pixels.

    • # Name Type(s) Default Value
    1 dx Integer -
    2 dy Integer -
    Image Description
    Methods

    Margin

  • The space outside a component, between the component’s boundary and other components. It determines the distance between different UI elements.

    • # Name Type(s) Default Value
    1 left Integer 0
    2 right Integer 0
    3 top Integer 0
    4 bottom Integer 0
    Image Description
    Methods

    Padding

  • The padding around the check box. Padding is the space inside the border.

    • # Name Type(s) Default Value
    1 left Integer 0
    2 right Integer 0
    3 top Integer 0
    4 bottom Integer 0
    Image Description
    Methods

    Set Thumb

  • Sets the scrollbar thumb appearance with a gradient and rounded corners.

    • # Name Type(s) Default Value
    1 startColor color -
    2 endColor color -
    3 radius Integer -
    Image Description
    Methods

    Set Track

  • Sets the scrollbar track appearance with a gradient and rounded corners.

    • # Name Type(s) Default Value
    1 startColor color -
    2 endColor color -
    3 radius Integer -
    Image Description
    Methods

    Smooth Scroll By

  • call this function to scroll at a position smoothly.

    • # Name Type(s) Default Value
    1 dX Integer -
    2 dY Integer -
    Image Description
    Methods

    Smooth scroll to

  • Smoothly scrolls the content to the specified X and Y coordinates.

    • # Name Type(s) Default Value
    1 x Integer -
    2 y Integer -

    Properties

    Image Description
    Image Description
    Methods

    Align Horizontal

  • A number that encodes how contents of the %type% are aligned horizontally. The choices are: 1 = left aligned, 2 = right aligned, 3 = horizontally centered. Alignment has no effect if the arrangement's width is automatic.


  • Sets the horizontal alignment of the arrangement's contents.

    • # Name Type(s) Default Value
    1 get AlignHorizontal Integer -1
    2 set AlignHorizontal Integer -
    Methods

    Align Vertical

  • A number that encodes how the contents of the %type% are aligned vertically. The choices are: 1 = aligned at the top, 2 = vertically centered, 3 = aligned at the bottom. Alignment has no effect if the arrangement's height is automatic.

  • Sets the vertical alignment of the arrangement's contents.

    • # Name Type(s) Default Value
    1 get AlignVertical Integer -1
    2 set AlignVertical Integer -
    Image Description
    Image Description
    Methods

    Background Color

  • Returns the background color of the %type%.

  • Specifies the background color of the %type%.

    • # Name Type(s) Default Value
    1 get BackgroundColor color #00000000
    2 set BackgroundColor color #00000000
    Image Description
    Image Description
    Methods

    Card Radius

  • If enabled, the card layout will have round corners.

  • If enabled, the card layout will have round corners.

    • # Name Type(s) Default Value
    1 get CardRadius Integer 0
    2 set CardRadius Integer 0
    Image Description
    Image Description
    Image Description
    Methods

    Clickable, Full Clickable

  • Specifies whether the layout should be clickable or not.


  • Specifies whether the layout should be clickable or not.


  • Specifies whether the layout should be full clickable or not.

    • # Name Type(s) Default Value
    1 get Clickable boolean false
    2 set Clickable boolean false
    3 set FullClickable boolean false
    Image Description
    Image Description
    Methods

    Elevation

  • Sets elevation to layout.

  • Sets elevation to layout.

    • # Name Type(s) Default Value
    1 get Elevation boolean false
    2 set Elevation boolean false
    Image Description
    Image Description
    Methods

    is Card

  • If enabled, the arrangement will be converted to a card view.

  • If enabled, the arrangement will be converted to a card view.

    • # Name Type(s) Default Value
    1 get isCard boolean false
    2 set isCard boolean -
    Image Description
    Image Description
    Methods

    isFillViewPort

  • True to stretch the content's height to the viewport's boundaries, false otherwise.

  • Enable whether arrow scrolling will animate its transition.

    • # Name Type(s) Default Value
    1 get isFillViewPort boolean -
    2 set isFillViewPort boolean -
    Image Description
    Image Description
    Methods

    Visible

  • Specifies whether the component should be visible on the screen. Value is true for visible and false for hidden.

  • Specifies whether the component should be visible on the screen. Value is true for visible and false for hidden.

    • # Name Type(s) Default Value
    1 get Visible boolean true
    2 set Visible boolean -