Implementing bottom navigation in jetpack compose

Overview

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) }
        }
    }
}
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

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.

🛸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.

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).

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

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.

CustomNavigationDrawer - Custom Navigation Drawer with compose
CustomNavigationDrawer - Custom Navigation Drawer with compose

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

Navigation for compose multiplatform

Navigation for compose multiplatform

A simple, highly customizable compose navigation component for Android & Desktop platform.
A simple, highly customizable compose navigation component for Android & Desktop platform.

介绍 一个简单并提供高度扩展功能的 Compose 导航组件,同时支持 Android 和 Desktop 平台。 常用功能 使用 下载 // Android implementation("io.github.succlz123:compose-screen-android:0.0.1") //

Owner
Steve Chacha
Junior Android & MachineLearning Ambassador @lux_academy [email protected]
Steve Chacha
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

Arvind Meshram 5 Nov 24, 2022
Navigation Drawer Bottom Navigation View

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

Kaique Ocanha 6 Jun 15, 2022
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

Alperen Çevlik 3 Jul 27, 2022
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/

Akshay sharma 570 Nov 21, 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 ♥ .

Hamidreza Etebarian 1.1k Nov 19, 2022
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

Alexander Karkossa 9 Sep 27, 2022
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

Jeziel Lago 22 Nov 18, 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

Artur Artikov 291 Nov 24, 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

Breens Mbaka 6 Feb 3, 2022
[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

Gabor Varadi 1.3k Nov 27, 2022