Jetpack Navigation Compose Material¶

A library which provides Compose Material support for Jetpack Navigation Compose. This features composable bottom sheet destinations.

Migration¶

The official androidx.compose.material.navigation version 1.7.0-alpha04+ offers all of the same functionality as Accompanist Navigation Material.

All class names are the same, the only needed changes are import related.

1. Replace dependency com.google.accompanist:accompanist-navigation-material:<version> with androidx.compose.material:material-navigation:<version>
2. Change import for ModalBottomSheetLayout from com.google.accompanist.navigation.material.ModalBottomSheetLayout to androidx.compose.material.navigation.ModalBottomSheetLayout
3. Change import for bottomSheet from com.google.accompanist.navigation.material.bottomSheet to androidx.compose.material.navigation.bottomSheet
4. Change import for rememberBottomSheetNavigator from com.google.accompanist.navigation.material.rememberBottomSheetNavigator to androidx.compose.material.navigation.rememberBottomSheetNavigator
5. Change import for BottomSheetNavigator from com.google.accompanist.navigation.material.BottomSheetNavigator to androidx.compose.material.navigation.BottomSheetNavigator
6. Change import for BottomSheetNavigatorSheetState from com.google.accompanist.navigation.material.BottomSheetNavigatorSheetState to androidx.compose.material.navigation.BottomSheetNavigatorSheetState

Deprecated Guidance for Accompanist Navigation Material¶

The following is the deprecated guide for using Navigation Material in Accompanist. Please see above migration section for how to use the androidx.compose.material.navigation Material Navigation.

Usage¶

Bottom Sheet Destinations¶

1. Create a BottomSheetNavigator and add it to the NavController:

   @Composable
   fun MyApp() {
       val bottomSheetNavigator = rememberBottomSheetNavigator()
       val navController = rememberNavController(bottomSheetNavigator)
   }
   

2. Wrap your NavHost in the ModalBottomSheetLayout composable that accepts a BottomSheetNavigator.

   @Composable
   fun MyApp() {
       val bottomSheetNavigator = rememberBottomSheetNavigator()
       val navController = rememberNavController(bottomSheetNavigator)
       ModalBottomSheetLayout(bottomSheetNavigator) {
           NavHost(navController, "home") {
              // We'll define our graph here in a bit!
           }
       }
   }
   

3. Register a bottom sheet destination

   @Composable
   fun MyApp() {
       val bottomSheetNavigator = rememberBottomSheetNavigator()
       val navController = rememberNavController(bottomSheetNavigator)
       ModalBottomSheetLayout(bottomSheetNavigator) {
           NavHost(navController, "home") {
              composable(route = "home") {
                  ...
              }
              bottomSheet(route = "sheet") {
                  Text("This is a cool bottom sheet!")
              }
           }
       }
   }
   

For more examples, refer to the samples.

Download¶

repositories {
    mavenCentral()
}

dependencies {
    implementation "com.google.accompanist:accompanist-navigation-material:<version>"
}

Snapshots of the development version are available in Sonatype's snapshots repository. These are updated on every commit.