Components

Tab Bar

Displays a tab bar to switch different views

Tabs organize content across different screens, data sets, and other interactions.

Usage

You can implement Tabs by using this tag LgnTabLayout in xml file.

<com.telkom.legion.component.tabbar.LgnTabLayout
    android:id="@+id/tabBase"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

You can alse customize the Tabs in the fragment or activity from Kotlin file .

Tabs adapter

...
class CommonPagerAdapters(
    fragment: Fragment,
    val data: List<Fragment>
) : FragmentStateAdapter(fragment) {
    override fun getItemCount(): Int {
        return data.size
    }

Activity or Fragment file

...
with(binding) {
    ...
    // Configure ViewPager2 with Adapter
    vpBase.adapter = CommonPagerAdapters(listFragment)
    // Attach Tab to ViewPager2
    TabLayoutMediator(this, viewPager2) { tab, position ->
        tab.text = label[position]
    }.attach()

## Attributes

Attribute Name	Xml Attrs	Related method(s)	Description
Tab indicator color	app:tabIndicatorColor	setSelectedTabIndicatorColor()	Change Tab indicator color
Tab indicator	app:tabIndicator	setSelectedTabIndicatorColor()	Change Tab indicator
Tab indicator gravity	app:tabIndicatorGravity	setSelectedTabIndicatorGravity()	Change Tab indicator gravity
Tab indicator animation mode	app:tabIndicatorAnimationMode	.tabIndicatorAnimationMode	Change Tab indicator animation mode
Tab mode	app:tabMode	.tabMode	Change Type of Tab Style
Tab inline label	app:tabInlineLabel	.isInlineLabel	Change Tab Label Position to Inline
Tab text colors	app:tabTextColor	.tabTextColors	Change Tab Text Color State Not Selected
Tab text colors selected	app:tabSelectedTextColor	.tabTextColors	Change Tab Text Color State Not Selected
Tab padding	app:tabPadding	N/A	Change Tab all padding
Tab padding start	app:tabPaddingStart	N/A	Change Tab start padding
Tab padding top	app:tabPaddingTop	N/A	Change Tab top padding
Tab padding end	app:tabPaddingEnd	N/A	Change Tab end padding
Tab padding bottom	app:tabPaddingBottom	N/A	Change Tab bottom padding
Tab text appreance	app:tabTextAppearance	N/A	Change Tab text apreance
Tab background	app:tabBackground	N/A	Change Tab background
Tab indicator animation duration	app:tabIndicatorAnimationDuration	N/A	Change Tab indicator animation duration]

Do you have feedback?

Please let us know to make it better

Send Feedback