Implementing bottom navigation in jetpack compose

Last update: Dec 26, 2021

Compose-Bottom-Navigation

Implementing bottom navigation in jetpack compose

Add the Navigation dependency

Open the app's build file, found at app/build.gradle. In the dependencies section, add the navigation-compose dependency.

dependencies {
  implementation "androidx.navigation:navigation-compose:2.4.0-alpha04"
  // other dependencies
}

You can create aNavController by using the rememberNavController() method in your composable:

val navController = rememberNavController()

Add screens

sealed class Screen (var route: String, @StringRes val resourceId: Int, var icon: ImageVector) {
    object Home : Screen("home", R.string.home, Icons.Default.Home)
    object Search : Screen("search",R.string.search, Icons.Default.Search )
    object Settings : Screen("library", R.string.settings, Icons.Default.Settings)
    object Profile : Screen("profile", R.string.profile, Icons.Default.Person)
}

Then place those items in a list that can be used by the BottomNavigationItem

val items = listOf(Screen.Home, Screen.Search, Screen.Settings, Screen.Profile)
)

Set bottom navigation at your composable function

 val navController = rememberNavController()

    Scaffold(
        bottomBar = {
            BottomNavigation {

                val navBackStackEntry by navController.currentBackStackEntryAsState()
                val currentDestination = navBackStackEntry?.destination
                items.forEach { screen ->
                    BottomNavigationItem(
                        icon = { Icon(screen.icon, contentDescription = null) },
                        label = { Text(stringResource(screen.resourceId)) },
                        selected = currentDestination?.hierarchy?.any { it.route == screen.route } == true,
                        onClick = {
                            navController.navigate(screen.route) {
                                // Pop up to the start destination of the graph to
                                // avoid building up a large stack of destinations
                                // on the back stack as users select items
                                popUpTo(navController.graph.findStartDestination().id) {
                                    saveState = true
                                }
                                // Avoid multiple copies of the same destination when
                                // reselecting the same item
                                launchSingleTop = true
                                // Restore state when reselecting a previously selected item
                                restoreState = true
                            }
                        }
                    )
                }

            }

        }
    ) { innerPadding ->
        NavHost(navController, startDestination = Screen.Home.route, Modifier.padding(innerPadding)) {
            composable(Screen.Home.route) { Home(navController) }
            composable(Screen.Search.route) { Search(navController) }
            composable(Screen.Settings.route) {Settings(navController) }
            composable(Screen.Profile.route) { Profile(navController) }
        }
    }
}

GitHub

https://github.com/stevechacha/Compose-Bottom-Navigation
You might also like...

Navigation Component: THE BEST WAY to create navigation flows for your app

Navigation Component: THE BEST WAY to create navigation flows for your app

LIVE #017 - Navigation Component: A MELHOR FORMA de criar fluxos de navegação para o seu app! Código fonte do projeto criado na live #017, ensinando c

Jun 15, 2022

Animated Tab Bar is an awesome navigation extension that you can use to add cool, animated and fully customizable tab navigation in your apps

Animated Tab Bar is an awesome navigation extension that you can use to add cool, animated and fully customizable tab navigation in your apps

Animated Tab Bar is an awesome navigation extension that you can use to add cool, animated and fully customizable tab navigation in your apps. The extension provides handy methods and properties to change the behaviour as well as the appearance of the navigation bar.

Jul 27, 2022

🛸Voyager is a pragmatic navigation library built for, and seamlessly integrated with, Jetpack Compose.

🛸Voyager is a pragmatic navigation library built for, and seamlessly integrated with, Jetpack Compose.

Voyager is a pragmatic navigation library built for, and seamlessly integrated with, Jetpack Compose.

Aug 9, 2022

A small navigation library for Android to ease the use of fragment transactions & handling backstack (also available for Jetpack Compose).

A small navigation library for Android to ease the use of fragment transactions & handling backstack (also available for Jetpack Compose).

A small navigation library for Android to ease the use of fragment transactions & handling backstack (also available for Jetpack Compose).

Jul 23, 2022

A small and simple, yet fully fledged and customizable navigation library for Jetpack Compose

A small and simple, yet fully fledged and customizable navigation library for Jetpack Compose

A small and simple, yet fully fledged and customizable navigation library for Jetpack Compose

Aug 12, 2022

A small navigation library for Jetpack Compose with state saving, backstack and animations support.

A small navigation library for Jetpack Compose with state saving, backstack and animations support.

Jul 24, 2022

CustomNavigationDrawer - Custom Navigation Drawer with compose

CustomNavigationDrawer - Custom Navigation Drawer with compose

An easy sample to explore navigation component and navigation drawer from Jetpac

Jan 4, 2022

Navigation for compose multiplatform

Navigation for compose multiplatform

Apr 11, 2022

A simple Floating Action Button that shows an anchored Navigation View

A simple Floating Action Button that shows an anchored Navigation View

Floating Navigation View A simple Floating Action Button that shows an anchored Navigation View and was inspired by Menu Material Fixed created by Tom

Jul 30, 2022
New style for app design simple bottom navigation with side navigation drawer UI made in Jetpack Compose.😉😎
New style for app design simple bottom navigation with side navigation drawer UI made in Jetpack Compose.😉😎

BottomNavWithSideDrawer New style for app design simple bottom navigtaion with side navigation drawer UI made in Jetpack Compose. ?? ?? (Navigation Co

Jul 6, 2022
Navigation Drawer Bottom Navigation View
Navigation Drawer Bottom Navigation View

LIVE #019 - Toolbar, Navigation Drawer e BottomNavigationView com Navigation Com

Jun 15, 2022
A library that you can use for bottom navigation bar. Written with Jetpack Compose
A library that you can use for bottom navigation bar. Written with Jetpack Compose

FancyBottomNavigationBar A library that you can use for bottom navigation bar. W

Jul 27, 2022
BubbleTabBar is bottom navigation bar with customizable bubble like tabs
BubbleTabBar is bottom navigation bar with customizable bubble like tabs

BubbleTabBar BubbleTabBar is bottom navigation bar with customizable bubble like tabs Usage <com.fxn.BubbleTabBar android:id="@+id/

Aug 7, 2022
A simple & curved & material bottom navigation for Android written in Kotlin with ♥ .
A simple & curved & material bottom navigation for Android written in Kotlin with ♥ .

A simple & curved & material bottom navigation for Android written in Kotlin with ♥ .

Aug 8, 2022
Jetpack Compose BottomDrawerScaffold (Material Bottom Drawer)
Jetpack Compose BottomDrawerScaffold (Material Bottom Drawer)

BottomDrawerScaffold Current Compose Version: 1.0.2 Compose BottomDrawerScaffold which implements the Material Bottom Drawer https://material.io/compo

Aug 9, 2022
Android multi-module navigation built on top of Jetpack Navigation Compose
Android multi-module navigation built on top of Jetpack Navigation Compose

MultiNavCompose Android library for multi-module navigation built on top of Jetpack Navigation Compose. The goal of this library is to simplify the se

Apr 16, 2022
Alligator is a modern Android navigation library that will help to organize your navigation code in clean and testable way.

Alligator Alligator is a modern Android navigation library that will help to organize your navigation code in clean and testable way. Features Any app

Jul 7, 2022
DSC Moi University session on using Navigation components to simplify creating navigation flow in our apps to use best practices recommended by the Google Android Team

Navigation Components Navigate between destination using safe args How to use the navigation graph and editor How send data between destinations Demo

Feb 3, 2022
[ACTIVE] Simple Stack, a backstack library / navigation framework for simpler navigation and state management (for fragments, views, or whatevers).
[ACTIVE] Simple Stack, a backstack library / navigation framework for simpler navigation and state management (for fragments, views, or whatevers).

Simple Stack Why do I want this? To make navigation to another screen as simple as backstack.goTo(SomeScreen()), and going back as simple as backstack

Aug 12, 2022