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 Toggle Button

The Material Toggle Button component in AB allows creating toggle buttons with Material Design. It provides events for button check state changes (onButtonChecked), long clicks, and touches. Methods allow adding/checking/unchecking/clearing buttons, and retrieving the ID of the checked button. Numerous properties let you customize the button's corner radius, font, elevation, enabled state, text style, gravity, icon size/padding, height/width, selection behavior (single/required), ripple effect, stroke color/width, text color/size, and visibility.

Overview

A visible component that's created horizontally and vertically. It is a toggle button built using Material Design principles.

Events

Image Description
Events

onButtonChecked

  • Event triggered when a button's checked state changes.

    • # Name Type(s) Default Value
    1 id String
    2 isChecked boolean
    Image Description
    Events

    LongClick

  • Event triggered when the button is long-clicked.

    • Image Description
    Events

    Touched

  • Event triggered when the button is touched.

    • Methods

    Image Description
    Methods

    AddButton

  • Adds a new toggle button to the group.

    • # Name Type(s) Default Value
    1 label String
    2 iconPath String
    3 id String
    Image Description
    Methods

    CheckButton

  • Checks the button with the given ID.

    • # Name Type(s) Default Value
    1 id String
    Image Description
    Methods

    unCheckButton

  • Unchecks the button with the given ID.

    • # Name Type(s) Default Value
    1 id String
    Image Description
    Methods

    ClearSelection

  • Clears the selection of all toggle buttons in the group.

    • Image Description
    Methods

    GetCheckedButtonId

  • Returns the ID of the currently checked button.

    • Properties

    Image Description
    Image Description
    Properties

    CornerRadius

  • Gets the corner radius of the button.

  • Sets the corner radius of the button.

    • # Name Type(s) Default Value
    1 CornerRadius int
    2 CornerRadius int 0
    Image Description
    Image Description
    Properties

    FontTypeface

  • Gets the font typeface of the button's text.

  • Sets the font typeface of the button's text.

    • # Name Type(s) Default Value
    1 FontTypeface int 0
    2 FontTypeface int 0
    Image Description
    Image Description
    Properties

    Elevation

  • Gets the elevation of the button.

  • Sets the elevation of the button.

    • # Name Type(s) Default Value
    1 Elevation float
    2 Elevation float
    Image Description
    Image Description
    Properties

    Enabled

  • Gets whether the button is enabled.

  • Sets whether the button is enabled.

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

    FontBold

  • Gets whether the button's text is bold.

  • Sets whether the button's text is bold.

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

    FontItalic

  • Gets whether the button's text is italic.

  • Sets whether the button's text is italic.

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

    Gravity

  • Gets the gravity of the button's content.

  • Sets the gravity of the button's content.

    • # Name Type(s) Default Value
    1 Gravity int
    2 Gravity int
    Image Description
    Image Description
    Properties

    IconSize

  • Gets the size of the button's icon.

  • Sets the size of the button's icon.

    • # Name Type(s) Default Value
    1 IconSize int
    2 IconSize int
    Image Description
    Image Description
    Properties

    IconPadding

  • Gets the padding between the button's icon and text.

  • Sets the padding between the button's icon and text.

    • # Name Type(s) Default Value
    1 IconPadding int
    2 IconPadding int
    Image Description
    Image Description
    Properties

    Height

  • Gets the height of the button.

  • Sets the height of the button.

    • # Name Type(s) Default Value
    1 Height int
    2 Height int -1
    Image Description
    Image Description
    Properties

    Width

  • Gets the width of the button.

  • Sets the width of the button.

    • # Name Type(s) Default Value
    1 Width int
    2 Width int -1
    Image Description
    Image Description
    Properties

    HeightPercent & WidthPercent

  • Sets the height of the button as a percentage of its parent's height.

  • Sets the width of the button as a percentage of its parent's width.

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

    isSelectionRequired & isSingleSelection

  • Gets whether the selection is required for toggle buttons group.

  • Gets whether only one toggle button can be selected at a time.

    • # Name Type(s) Default Value
    1 isSelectionRequired boolean /td>
    2 isSingleSelection boolean
    Image Description
    Image Description
    Properties

    RippleColor

  • Gets the ripple color of the button.

  • Sets the ripple color of the button.

    • # Name Type(s) Default Value
    1 RippleColor int
    2 RippleColor int
    Image Description
    Image Description
    Properties

    StrokeColor

  • Gets the stroke color of the button.

  • Sets the stroke color of the button.

    • # Name Type(s) Default Value
    1 StrokeColor int
    2 StrokeColor int
    Image Description
    Image Description
    Properties

    StrokeWidth

  • Gets the stroke width of the button.

  • Sets the stroke width of the button.

    • # Name Type(s) Default Value
    1 StrokeWidth int
    2 StrokeWidth int
    Image Description
    Image Description
    Properties

    TextColor

  • Gets the text color of the button.

  • Sets the text color of the button.

    • # Name Type(s) Default Value
    1 TextColor int
    2 TextColor int
    Image Description
    Image Description
    Properties

    TextSize

  • Gets the text size of the button.

  • Sets the text size of the button.

    • # Name Type(s) Default Value
    1 TextSize float
    2 TextSize float
    Image Description
    Image Description
    Properties

    Visible

  • Gets the visibility of the button.

  • Sets the visibility of the button.

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