Material Top Tab Navigator in Compose Multiplatform (KMP/KMM)

In today’s tutorial, we will learn how to integrate Material Top Tab Navigator in Compose Multiplatform KMP KMM for both Android & ios platforms.

Material Top Tab Navigator in Compose Multiplatform (KMP/KMM):

The Material style top tab navigator is a Material theme top tab component. It displays multiple tabs at the top of the device screen. It allows the user to switch between Screens by tapping on the Top tabs. In KMM – KMP, we will use the TabRow composable component to show the Top tab bar and to render each tab, we will use the Tab composable component.

Top Tab Icons:

We are creating 3 Tabs: Home, List and Settings. You can see the icons below. I am using Google Material Icons. You can download these icons and use them in your project.

1. Configure Icons in Project:

1. Please download the Top tab icons from above and put them into:

APP -> composeApp -> src -> commonMain -> composeResource -> drawable folder.

2. Now we have to rebuild and then clean the project.

Note: The drawable folder works as a common resource folder for both Android & ios platforms.

2. Creating 3 Screens for Top tabs:

1. Creating a package named screens. In this folder, we will put all 3 Top tabs screens.

2. Creating Home.kt file. This is our home screen.

3. Creating List.kt file. This is our List screen.

4. Creating Settings.kt file. This is our Settings screen.

3. Start coding for the app:

1. Open your project’s main App.kt file and start coding for material style top tab navigator integration.

2. Defining a State named selectedTab. It is used to store the selected tab index.

3. Creating 5 variables:

1. iconSize: Define a reusable Modifier for Icon sizing.
2. activeTabTextColor: Top tab navigator active tab text color.
3. inactiveTabTextColor: Top tab inactive tab text color.
4. tabBackgroundColor: Top tab background color.
5. activeIndicatorColor: Selected tab active indicator color.

4. Creating a tab list. Here we would define the Top tab navigator titles.

5. Creating a Material Top Tab Navigator in Compose Multiplatform:

Code explanation:

1. selectedTabIndex = selectedTab: Highlights the currently selected tab based on the selectedTab state.
2. backgroundColor = tabBackgroundColor: Sets the TabRow background to teal.
3. modifier = Modifier.height(80.dp): Sets the TabRow height to 80 dp, accommodating icons and text.
4. indicator: Customizes the underline indicator for the selected tab.
5. TabRowDefaults.Indicator: Default indicator composable.
6. Modifier.tabIndicatorOffset(tabPositions[selectedTab]): Positions the indicator under the selected tab.
7. color = activeIndicatorColor: Sets the indicator color to pink.
8. tabs.forEachIndexed { index, tab -> … }: Iterates over the tabs list to create tabs for each item.
9. painterResource: Loads drawable resources for KMP (from Res.drawable).
10. selected = isActive: Highlights the tab if isActive (selectedTab == index).
11. onClick = { selectedTab = index }: Updates selectedTab to the clicked tab’s index, triggering a screen change.
12. text: Custom content for the tab (a Column with an icon and text).
13. horizontalAlignment = Alignment.CenterHorizontally: Center the icon and text.
14. targetState = selectedTab: Triggers animation when selectedTab changes.
15. transitionSpec = { fadeIn() with fadeOut() }: Fades in the new screen and fades out the previous one.

Complete source code of App.kt file:

Screenshot on an Android device:

Screenshot on an iOS device: