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 Navigation

The Material Navigation component in AB creates horizontal or vertical navigation bars with animation. It provides events for item selection (ItemSelected, NumberItemSelected) and offers methods to add/remove items, badges, select items, and set margins/padding. Properties allow customization of colors, icon size, elevation, height, width, and label visibility, as well as the appearance of the selected/unselected items and the ripple effect. Furthermore, it allows enabling/disabling horizontal transitions.

Overview

A visible component that's created horizontally and vertically navigation bar with animation.

Events

Image Description
Events

ItemReselected

  • Event triggers when an item is reselected.

    • # Name Type(s) Default Value
    1 id number
    2 title string
    Image Description
    Events

    ItemSelected

  • Event triggers when an item is selected.

    • # Name Type(s) Default Value
    1 id number
    2 title string

    Methods

    Image Description
    Methods

    AddItem

  • Adds a new item to the navigation.

    • # Name Type(s) Default Value
    1 id number
    2 title string
    3 image string
    4 badgeNumber string
    Image Description
    Methods

    BadgeBackgroundColor

  • Sets the background color for the badge.

    • # Name Type(s) Default Value
    1 id number
    2 color number
    3 textColor number
    Image Description
    Methods

    RemoveAllItems

  • Removes all items from the navigation.

    • Image Description
    Methods

    RemoveBadge

  • Removes the badge from an item.

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

    RemoveItem

  • Removes an item from the navigation.

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

    SelectItem

  • Selects an item in the navigation.

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

    SetMargin

  • Sets the margin of the navigation.

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

    SetPadding

  • Sets the padding of the navigation.

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

    UpdateBadgeGravity

  • Updates the gravity of the badge.

    • # Name Type(s) Default Value
    1 id number
    2 badgeGravity string
    Image Description
    Methods

    UpdateItem

  • Updates an existing item in the navigation.

    • # Name Type(s) Default Value
    1 id number
    2 title string
    3 image string
    4 badgeNumber string
    Image Description
    Methods

    setItemActiveIndicatorEnabled

  • Sets whether the active indicator is enabled for an item.

    • # Name Type(s) Default Value
    1 enabled boolean

    Properties

    Image Description
    Properties

    BackgroundColor

  • Gets the background color of the navigation.

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

    BackgroundColor

  • Sets the background color of the navigation.

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

    IconSize

  • Gets the icon size.

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

    IconSize

  • Sets the icon size.

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

    Elevation

  • Gets the elevation of the navigation.

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

    Elevation

  • Sets the elevation of the navigation.

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

    Height

  • Sets the view's height.

    • # Name Type(s) Default Value
    1 Height Integer
    Image Description
    Properties

    Width

  • Sets the view's width.

    • # Name Type(s) Default Value
    1 Width Integer
    Image Description
    Properties

    ItemActiveIndicatorColor

  • Gets the active indicator color of the item.

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

    ItemActiveIndicatorColor

  • Sets the active indicator color of the item.

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

    ItemActiveIndicatorEnabled

  • Gets whether the active indicator is enabled for an item.

    • # Name Type(s) Default Value
    1 ItemActiveIndicatorEnabled boolean
    Image Description
    Properties

    setItemActiveIndicatorEnabled

  • Sets whether the active indicator is enabled for an item.

    • # Name Type(s) Default Value
    1 enabled boolean
    Image Description
    Properties

    ItemActiveIndicatorMargin

  • Gets the active indicator margin of the item.

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

    ItemActiveIndicatorMargin

  • Sets the active indicator margin of the item.

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

    ItemPaddingBottom

  • Gets the bottom padding of the item.

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

    ItemPaddingBottom

  • Sets the bottom padding of the item.

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

    ItemPaddingTop

  • Gets the top padding of the item.

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

    ItemPaddingTop

  • Sets the top padding of the item.

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

    LabelVisibility

  • Gets the label visibility mode.

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

    LabelVisibility

  • Sets the label visibility mode.

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

    RippleColor

  • Gets the ripple color.

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

    RippleColor

  • Sets the ripple color.

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

    SelectedColor

  • Gets the selected color of item.

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

    SelectedColor

  • Sets the selected color of item.

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

    UnselectedColor

  • Gets the unselected color of item.

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

    UnselectedColor

  • Sets the unselected color of item.

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

    ItemHorizontalTranslationEnabled

  • Gets whether horizontal translation is enabled for items.

    • # Name Type(s) Default Value
    1 ItemHorizontalTranslationEnabled boolean
    Image Description
    Properties

    ItemHorizontalTranslationEnabled

  • Sets whether horizontal translation is enabled for items.

    • # Name Type(s) Default Value
    1 ItemHorizontalTranslationEnabled boolean
    Image Description
    Properties

    Visible

  • Gets the view's visibility.

    • # Name Type(s) Default Value
    1 Visible boolean
    Image Description
    Properties

    Visible

  • Sets the view's visibility.

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