Material Components

Material Components are modular, meaning developers can pick and choose specific UI elements (such as buttons, cards, text fields) based on their application's requirements. This modularity enhances flexibility and allows for easy integration into existing projects.

About the component


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

Material Switch

The Material Switch component creates a visually appealing toggle switch that is compliant with Material Design principles.

Overview

A visible component used to toggle between two states (on/off) with a modern Material Design look and feel.

Events

Image Description
Events

Changed

  • Event triggered when the switch state changes (on/off).

    • Image Description
    Events

    GotFocus

  • Event triggered when the switch receives focus.

    • Image Description
    Events

    LostFocus

  • Event triggered when the switch loses focus.

    • Methods

    Image Description
    Methods

    SetMargin

  • Sets the margin around the component.

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

    SetPadding

  • Sets the padding inside the component.

    • # Name Type(s) Default Value
    1 left int 0
    2 top int 0
    3 right int 0
    4 bottom int 0

    Properties

    Image Description
    Image Description
    Properties

    BackgroundColor

  • Specifies the component's background color.


  • Specifies the component's background color.

    • # Name Type(s) Default Value
    1 BackgroundColor Color White
    2 BackgroundColor Color White
    Image Description
    Image Description
    Properties

    On

  • Specifies whether the switch is in the "on" state.


  • Specifies whether the switch is in the "on" state.

    • # Name Type(s) Default Value
    1 On boolean False
    2 On boolean False
    Image Description
    Image Description
    Properties

    Enabled

  • Specifies whether the component is enabled.


  • Specifies whether the component is enabled.

    • # Name Type(s) Default Value
    1 Enabled boolean True
    2 Enabled boolean True
    Image Description
    Image Description
    Properties

    ThumbColorActive

  • Specifies the active thumb's color.


  • Specifies the active thumb's color.

    • # Name Type(s) Default Value
    1 ThumbColorActive Color Default
    2 ThumbColorActive Color Default
    Image Description
    Image Description
    Methods

    ThumbColorInactive

  • Specifies the inactive thumb's color.


  • Specifies the inactive thumb's color.

    • # Name Type(s) Default Value
    1 ThumbColorInactive Color #BDBDBD
    2 ThumbColorInactive Color #BDBDBD
    Image Description
    Image Description
    Properties

    FontSize

  • Specifies the font size of the text.


  • Specifies the font size of the text.

    • # Name Type(s) Default Value
    1 FontSize Dimension 14sp
    2 FontSize Dimension 14sp
    Image Description
    Image Description
    Properties

    TrackColorActive

  • Specifies the active track's color.


  • Specifies the active track's color.

    • # Name Type(s) Default Value
    1 TrackColorActive Color Default
    2 TrackColorActive Color Default
    Image Description
    Image Description
    Properties

    TrackColorInactive

  • Specifies the inactive track's color.

    • # Name Type(s) Default Value
    1 TrackColorInactive Color #BDBDBD
    Image Description
    Image Description
    Properties

    Height

  • Specifies the component’s Height.


  • Specifies the component’s Height.

    • # Name Type(s) Default Value
    1 Height Dimension Automatic
    2 Height Dimension Automatic
    Image Description
    Properties

    Width

  • Specifies the component’s Width.


  • Specifies the component’s Width.

    • # Name Type(s) Default Value
    1 Width Dimension Automatic
    2 Width Dimension Automatic
    Image Description
    Image Description
    Properties

    HeightPercent

  • Specifies the component’s Height as a percentage of the screen size.


  • Specifies the component’s Width as a percentage of the screen size.

    • # Name Type(s) Default Value
    1 HeightPercent Number 70
    2 WidthPercent Number 70
    Image Description
    Image Description
    Properties

    Visible

  • Specifies whether the component is visible.


  • Specifies whether the component is visible.

    • # Name Type(s) Default Value
    1 Visible boolean True
    2 Visible boolean True