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 TabLayout

The Material TabLayout component creates a horizontally scrolling layout to display tabs.

Overview

A Material component that horizontally display tabs.

Events

Image Description
Events

TabItemReselected

  • Event triggers when a tab item is reselected.

    • Image Description
    Events

    TabItemSelected

  • Event triggers when a tab item is selected.

    • # Name Type(s) Default Value
    1 position number
    Image Description
    Events

    TabItemUnselected

  • Event triggers when a tab item is unselected.

    • Methods

    Image Description
    Methods

    SetMargin

  • Sets the margin for the tab layout.

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

    SetPadding

  • Sets the padding for the tab layout.

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

    AddNewTab

  • Adds a new tab to the tab layout.

    • # Name Type(s) Default Value
    1 tabName text
    2 icon image
    Image Description
    Methods

    AddNewTabAt

  • Adds a new tab to the tab layout at a specific position.

    • # Name Type(s) Default Value
    1 tabName text
    2 icon image
    3 position number
    Image Description
    Methods

    RemoveAllTabs

  • Removes all tabs from the tab layout.

    • Image Description
    Methods

    RemoveTabAt

  • Removes a tab at a specific position from the tab layout.

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

    SelectedTabPosition

    Methods

    TabCount

  • Return the value of the Selected Tab Position.


    Return the value of the Tab Count.

    • Image Description
    Methods

    HasboundedRipple

  • Return the value of behaviour enabled.

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

    isinLineLabel

  • Get whether the tab shows inline label.

    • # Name Type(s) Default Value
    1 get isinLineLabel boolean true
    Image Description
    Properties

    TabIndicatorFullWidth

  • Set Tab Indicator Full Width is the property that will allow you to customize or change the tab width, so a better UI

    • # Name Type(s) Default Value
    1 get isTabIndicatorFullWidth boolean true
    Image Description
    Methods

    setScrollPosition

  • Sets the scroll position for the tab layout.

    • # Name Type(s) Default Value
    1 position number
    2 positionOffset number
    3 updateSelectedText boolean
    4 updateIndicatorPosition boolean

    Properties

    Image Description
    Image Description
    Properties

    Ripple

  • Return the value of random color that are generated without any specific logics.


    Return the value of random color that are generated without any specific logics.

    • # Name Type(s) Default Value
    1 get Ripple boolean *
    2 set Ripple boolean True
    Image Description
    Image Description
    Properties

    TabGravity

  • The active color is likely the color that will be applied to indicate the active or selected state of a particular element in the animated navigation.


    The active color is likely the color that will be applied to indicate the active or selected state of a particular element in the animated navigation.

    • # Name Type(s) Default Value
    1 get TabGravity text *
    2 set TabGravity text #2574f4
    Image Description
    Image Description
    Properties

    Elevation

  • Return the value of animation duration.


    The block might be something like animation duration or "Change Animation Duration." You would connect this block and provide the desired duration as a parameter.

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

    TabMode

  • Return the value of animation duration.


    The block might be something like animation duration or "Change Animation Duration." You would connect this block and provide the desired duration as a parameter.

    • # Name Type(s) Default Value
    1 get TabMode text *
    2 set TabMode text 1000
    Image Description
    Image Description
    Properties

    TabsActiveTextColor

  • Gets the tabs active text color.


    Sets the tabs active text color.

    • # Name Type(s) Default Value
    1 get TabsActiveTextColor color *
    2 set TabsActiveTextColor color #2574f4
    Image Description
    Image Description
    Properties

    TabsBackgroundColor

  • Gets the tabs background color.


    Sets the tabs background color.

    • # Name Type(s) Default Value
    1 get TabsBackgroundColor color *
    2 set TabsBackgroundColor color #ffffff
    Image Description
    Image Description
    Properties

    TabsIconColor

  • Gets the tabs Icon Color.


  • Sets the tabs Icon Color.

    • # Name Type(s) Default Value
    1 get TabsIconColor color *
    2 set TabsIconColor color #7A7A7A
    Image Description
    Image Description
    Properties

    TabsIndicatorColor

  • Gets the tabs Indicator Color.


    Sets the tabs Indicator Color.

    • # Name Type(s) Default Value
    1 get TabsIndicatorColor color *
    2 set TabsIndicatorColor color #2574f4
    Image Description
    Properties

    getCurrentTab

  • Gets the value of current Tab .

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

    setIndicatorAnimationMode

  • Sets Indicator Animation Mode..

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

    setInlineLabel

  • Sets whether tab shows InlineLabel.

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

    SelectTab

  • Selects Tab.

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

    SelectedTabIndicatorGravity

  • Sets value for Selected Tab Indicator Gravity.

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

    IndicatorAnimationMode

  • Sets Indicator Animation Mode .

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

    TabIndicatorFullWidth

  • sets Tab Indicator Full Width .

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

    UnboundedRipple

  • Sets Unbounded Ripple.

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

    WidthPercent

  • Sets Width Percent .

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

    TabsTextColor

  • Gets the tabs text color.


    Sets the tabs text color.

    • # Name Type(s) Default Value
    1 get TabsTextColor color *
    2 set TabsTextColor color #7A7A7A
    Image Description
    Image Description
    Properties

    Width

  • Gets the Width.


    Sets the Width.

    • # Name Type(s) Default Value
    1 getWidth Number
    2 setWidth Number