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 Badges

Material Badges are UI elements that indicate status, notifications, or counts associated with other UI elements, often buttons or icons. They are part of the Material Design system.

Overview

A visible component for creating Material Design badges.

Methods

Image Description
Methods

AttachBadge

  • Attaches a badge to a specified view (component).

    • # Name Type(s) Default Value
    1 in component
    Image Description
    Methods

    ClearNumber

  • Clears the number displayed on the badge.

    • Image Description
    Methods

    CreateBadge

  • Creates a badge.

    • Image Description
    Methods

    DetachBadge

  • Detaches the badge from its associated view.

    • # Name Type(s) Default Value
    1 in component

    Properties

    Image Description
    Properties

    Alpha

  • Sets the transparency of the badge. A value of 0.0 is fully transparent, and 1.0 is fully opaque.


    • # Name Type(s) Default Value
    1 Alpha float 1.0
    Image Description
    Properties

    BackgroundColor

  • Sets the background color of the badge.


    • # Name Type(s) Default Value
    1 BackgroundColor color #F44336
    Image Description
    Properties

    BadgeGravity

  • Gets the gravity of the badge (TOP_START, TOP_END, BOTTOM_START, BOTTOM_END).


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

    BadgeGravity

  • Sets the gravity of the badge (e.g., TOP_START, TOP_END, BOTTOM_START, BOTTOM_END).

    • # Name Type(s) Default Value
    1 gravity int 8388661
    Image Description
    Image Description
    Properties

    HorizontalOffset

  • Gets the horizontal offset of the badge.


  • Sets the horizontal offset of the badge.

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

    BadgeTextColor

  • Sets the text color of the badge.

    • # Name Type(s) Default Value
    1 BadgeTextColor color #FFFFFF
    Image Description
    Properties

    HorizontalOffsetWithText

  • Gets the horizontal offset of the badge when it has text.


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

    HorizontalOffsetWithText

  • Sets the horizontal offset of the badge when it contains text, in pixels.

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

    MaxCharacterCount

  • Sets the maximum number of characters to display in the badge.

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

    Number

  • Gets the number displayed on the badge.


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

    Number

  • Sets the number to display on the badge. If the number is greater than the MaxCharacterCount, it will be truncated.

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

    VerticalOffsetWithText

  • Gets the vertical offset of the badge when it has text.


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

    VerticalOffsetWithText

  • Sets the vertical offset of the badge when it contains text, in pixels.

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

    Visible

  • Sets whether the badge is visible.

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