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

Vertical Arrangement

This component arranges its child components vertically. It provides properties to control the alignment, background, and appearance of the arranged components.

Overview

A visible component that arranges its child components vertically, providing control over alignment, background, and overall appearance.

Events

Image Description
Events

Click

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

    • Image Description
    Events

    Long Click

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

    • Image Description
    Events

    Touch Down

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

    • Image Description
    Events

    Touch Up

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

    • Methods

    Image Description
    Methods

    Border

  • call this function to set border around the arrangement with color and stroke width.

    • # Name Type(s) Default Value
    1 BGColor color #7A7A7A
    1 Stroke Integer 0
    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

    Properties

    Image Description
    Image Description
    Properties

    Align Horizontal

  • A number that encodes how contents of the arrangement 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.


  • Designer Properties: Sets the horizontal alignment of the arrangement's contents. Editor Type: Horizontal Alignment, Default: ComponentConstants.HORIZONTAL_ALIGNMENT_DEFAULT.

    • # Name Type(s) Default Value
    1 get AlignHorizontal Integer 1
    2 set AlignHorizontal Integer 1
    Image Description
    Image Description
    Properties

    Align Vertical

  • A number that encodes how the contents of the arrangement 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.

    Designer Properties: Sets the vertical alignment of the arrangement's contents.Editor Type: Vertical Alignment, Default: ComponentConstants.VERTICAL_ALIGNMENT_DEFAULT.

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

    Background Color

  • Returns the background color of the arrangement.

  • Designer Properties: Specifies the background color of the arrangement. Editor Type: Color, Default: Component.DEFAULT_VALUE_COLOR_DEFAULT.

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

    Card Radius

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

  • Designer Properties: If enabled, the card layout will have round corners. Editor Type: Float, Default: 10.

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

    Clickable

  • Specifies whether the layout should be clickable or not


  • Designer Properties: Specifies whether the layout should be clickable or not. Editor Type: Boolean, Default: False.

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

    Full Clickable

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


  • Designer Properties: Specifies whether the layout should be full clickable or not. Editor Type: Boolean, Default: False.

    • # Name Type(s) Default Value
    1 set FullClickable boolean false
    Image Description
    Image Description
    Properties

    Long Clickable

  • Specifies whether the layout should be long clickable or not


  • Designer Properties: Specifies whether the layout should be long clickable or not. Editor Type: Boolean, Default: False.

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

    Elevation

  • Sets elevation to layout.


  • Designer Properties: Sets elevation to layout. Editor Type: Float, Default: 0.

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

    Height

  • Getter and Setter method for the height of the arrangement.


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

    Width

  • Getter and Setter method for the width of the arrangement.


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

    Height/Width Percent

  • Getter and Setter method for the Height/Width Percent of the arrangement.


    • # Name Type(s) Default Value
    1 set Height/WidthPercent Integer 0
    Image Description
    Image Description
    Properties

    Image

  • Returns the path of the background image of the arrangement.


  • Designer Properties: Specifies the path of the background image for the arrangement. Editor Type: Asset, Default: "".

    • # Name Type(s) Default Value
    1 get Image text *
    2 set Image text *
    Image Description
    Image Description
    Properties

    Use Round Card

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


  • Designer Properties: If enabled, the card layout will have round corners. Editor Type: Boolean, Default: False.

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

    Shadow Color

  • Get Shadow Color Of Layouts.


  • Designer Properties: Set Shadow Color Of Layouts. Editor Type: Color, Default: "&H00FFFFFF".

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

    isCard

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


  • Designer Properties: If enabled, the arrangement will be converted to a card view. Editor Type: Boolean, Default: False.

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

    Visible

  • Getter and Setter method for the visibility of the arrangement.


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