Custom Tabs using Jetpack Compose

Source: Amazon Music

By the end, we would be creating a Tab Layout like this using Jetpack Compose.

End Result

We are not using the default Tab Composable provided by Jetpack Compose since the Indicator will be always the topmost layer in it.
Having the indicator as the topmost layer will be a problem for us in this specific implementation as the Text will be hidden.

So, we will use Box and Row to create the custom Tab .

To start off, we will create the Tab Indicator used to denote the selected Tab .

Tab Indicator

This is simple Box with fillMaxHeight and fixed width as dimensions.
It takes arguments for width, offset, and color.

Tab Item

• Tab item will be used to display the tab label text.
• Text color will be animated using animateColorAsState .

Custom Tab

Next, we will focus on the actual tab.

• Box: We need the tabs on top of the tab indicator. The Box layout will be used for this.
• Row: We will use Row for the tabs as they are to be horizontally placed.
• animateDpAsState is used to animate the tab indicator offset when the selected tab is changed.

Note
For the wrapper Box we have to use,

Since TabIndicator has height as fillMaxHeight() . If we do not specific Box height to be IntrinsicSize.Min , the tab will fill the full height.

Usage

Finally, we can use the tab like this,

Please comment with your valuable feedback. It would help me to improvise.

Kindly 👏👏👏 if this was useful.

Please follow if you would like to see more content related to Android Jetpack Compose.