Bottom Tab Navigation in Compose Multiplatform KMP KMM

In today’s tutorial, we will learn how to implement a bottom tab navigation bar with a Tab Indicator in Kotlin Compose Multiplatform for both the Android and iOS platforms. The important thing is that we are not using any navigation library in our tutorial. We are simply using the BottomNavigation component, and it’s doing all the magic.

Bottom Tab Navigation in Compose Multiplatform KMP KMM

A Bottom tab navigation bar is a UI component in mobile applications that shows a Bottom navigation bar with Icons and Tab names. It allows the user to navigate between screens by simply tapping on the Icon. With Kotlin Compose Multiplatform, we can create a Custom Bottom tab with a single codebase for both Android and iOS platforms.

Icons:

I am using these icons. If you like, you can use these icons.

1. Configure Bottom Tab Icons:

1. Please download the icons from above, or you can use your own icons, and then paste the icons into your
APP -> composeApp -> src -> commonMain -> composeResource -> drawable folder.

2. After putting the icons in the composeResource folder, the icons will become a common resource for both the Android and iOS platforms.

3. To make the resource available for your project, you have to clean and rebuild the project.

2. Creating Required Bottom Tab Screens:

1. Create a folder named screens in your app folder. We will be creating 5 screens inside this folder.

2. Creating HomeScreen.kt file:

3. Creating ListScreen.kt file:

4. Creating MenuScreen.kt file:

5. Creating ProfileScreen.kt file:

6. Creating SettingsScreen.kt file:

3. Start Coding for App:

1. Open your project’s main App.kt file and start coding for bottom tabs integration.

2. Creating a State named selectedTab. It is used to hold the currently selected bottom tab index.

3. Creating 3 modifications to set the Icon size and active and inactive bottom tab colors.

4. Creating 5 variables and storing the bottom tab names. The tab names are home, list, menu, profile and Settings.

5. Setting up the bottom tabs’ names as tabs to be used as labels in the bottom tabs.

6. Creating the BottomNavigation component in the Scaffold component.

Code explanation:

1. BottomNavigation:

1. modifier = Modifier.height(70.dp): Sets the height of the bottom navigation bar to 70dp.
2. backgroundColor = Color.White: Sets the background color of the bottom navigation to white.

2. tabs.forEachIndexed:

1. tabs.forEachIndexed: Iterates through each tab item using the index and tab name.
2. isActive = selectedTab == index: checks if the current tab is selected.
3. currentIcon = when(index): Uses when to select the correct drawable icon from resources based on the index.

3. BottomNavigationItem:

1. icon: Defines the visual icon shown on the tab.
2. modifier = Modifier.wrapContentSize(): Makes the icon container only take as much space as its content.
3. horizontalAlignment = Alignment.CenterHorizontally: Centers content (Divider, Spacer, Icon) horizontally inside the column.
4. verticalArrangement = Arrangement.Center: Vertically centers all items (Divider, Spacer, Icon) in the column..
5. Divider: If the tab is active, it’s colored (e.g., yellow); otherwise, it’s transparent. Visually indicates the selected tab by showing a top border line(Active tab indicator).
6. Icon(): Renders the drawable icon.
7. label: Displays tab name as text below the icon.
8. selected = isActive: Indicates if this tab is currently selected.
9. onClick = { selectedTab = index }: Updates the selected tab when this item is clicked.

4. AnimatedContent:

1. targetState = selectedTab: Animates the UI change when the tab selection changes.
2. transitionSpec = { fadeIn() with fadeOut() }: Specifies that the transition should fade out the old screen and fade in the new one.
3. when(targetState): Switches to the corresponding screen (HomeScreen, ListScreen, etc.) based on the selected index.

Complete source code of App.kt file:

Screenshot on an Android device:

Screenshot on an iOS device:

Happy coding. Hope you liked my tutorial. If you have any questions in mind, please feel free to ask in the comment section.