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

Material Card

A Material card component that displays content in a card-like UI container with rounded corners and a shadow effect, often used to group related content or actions.

Overview

A Material Card Component. This component represents a Material Design card, providing a container with elevation, rounded corners, and customizable appearance. It supports adding child views, setting background colors and images, and handling click events.

Events

Image Description
Events

Click

  • Triggers when card clicked.

    • Image Description
    Events

    Long Click

  • Triggers when card long clicked.

    • Image Description
    Events

    Touch Down

  • Triggers when card touched down.

    • Image Description
    Events

    Touch Up

  • Triggers when card touch up.

    • Methods

    Image Description
    Methods

    Add View

  • Adds a view to the card.

    • # Name Type(s) Default Value
    1 Component AndroidView *
    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

    Set Padding

  • Method for setting padding.

    • # 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 %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.

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

    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.

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

    Background Color

    Returns 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
    Properties

    Compact Padding

    Enable this property to make your card view look more realistic, it sets card margin according to elevation.

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

    Clickable

    Specifies whether the image should be clickable or not.

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

    Full Clickable

    Specifies whether the card should be full clickable or not.

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

    Long Clickable

    Specifies whether the image should be long clickable or not

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

    Elevation

    Sets the elevation.

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

    Corner Overlap

    On pre-Lollipop platforms, CardView does not clip the bounds of the Card for the rounded corners.

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

    Corner Radius

    Sets radius to cardview.

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

    Height

    Specifies the `height` of the MaterialCard, in pixels.

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

    Width

    Specifies the `width` of the MaterialCard, in pixels.

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

    Height/Width Percent

    Sets the `height` of the %type% to a percentage of the `height` of its parent. This only has an effect if the %type% is directly contained in a `HorizontalArrangement` or `VerticalArrangement` and the `Height` has been set to `Automatic`.

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

    Image

    Specifies the path of the background image for the %type%. If there is both an Image and a BackgroundColor, only the Image will be visible.

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

    Ripple Color

    Sets ripple color.

    # Name Type(s) Default Value
    1 set RippleColor color #00000000
    2 set RippleEnabled boolean false
    Image Description
    Image Description
    Properties

    Shadow Color

    Set Shadow Color Of Material Card, Works Only Above Android 9.

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

    Stroke Color

    Set Stroke Color Of CardView.

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

    Stroke Width

    Set Stroke Width Of CardView.

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

    Visible

    Specifies whether the %type% should be visible on the screen. Value is `true`{:.logic.block} if the %type% is showing and `false`{:.logic.block} if hidden.

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