androidx.compose.material.navigation

Classes

BottomSheetNavigator

Navigator that drives a ModalBottomSheetState for use of ModalBottomSheetLayouts with the navigation library.
BottomSheetNavigator.Destination

NavDestination specific to BottomSheetNavigator.
BottomSheetNavigatorDestinationBuilder

DSL for constructing a new BottomSheetNavigator.Destination
BottomSheetNavigatorSheetState

The state of a ModalBottomSheetLayout that the BottomSheetNavigator drives

Top-level functions summary

Unit
@Composable
ModalBottomSheetLayout(
    bottomSheetNavigator: BottomSheetNavigator,
    modifier: Modifier,
    sheetShape: Shape,
    sheetElevation: Dp,
    sheetBackgroundColor: Color,
    sheetContentColor: Color,
    scrimColor: Color,
    content: @Composable () -> Unit
)

Create a ModalBottomSheetLayout displaying content from a BottomSheetNavigator.
BottomSheetNavigator

Create and remember a BottomSheetNavigator.

Extension functions summary

Unit
NavGraphBuilder.bottomSheet(
    route: String,
    arguments: List<NamedNavArgument>,
    deepLinks: List<NavDeepLink>,
    content: @Composable ColumnScope.(backstackEntry: NavBackStackEntry) -> Unit
)

Add the content as bottom sheet content to the NavGraphBuilder
inline Unit
<T : Any> NavGraphBuilder.bottomSheet(
    typeMap: Map<KType, NavType<*>>,
    arguments: List<NamedNavArgument>,
    deepLinks: List<NavDeepLink>,
    noinline content: @Composable ColumnScope.(backstackEntry: NavBackStackEntry) -> Unit
)

Add the content as bottom sheet content to the NavGraphBuilder

Top-level functions

ModalBottomSheetLayout

@Composable
fun ModalBottomSheetLayout(
    bottomSheetNavigator: BottomSheetNavigator,
    modifier: Modifier = Modifier,
    sheetShape: Shape = MaterialTheme.shapes.large,
    sheetElevation: Dp = ModalBottomSheetDefaults.Elevation,
    sheetBackgroundColor: Color = MaterialTheme.colors.surface,
    sheetContentColor: Color = contentColorFor(sheetBackgroundColor),
    scrimColor: Color = ModalBottomSheetDefaults.scrimColor,
    content: @Composable () -> Unit
): Unit

Create a ModalBottomSheetLayout displaying content from a BottomSheetNavigator.

import androidx.compose.material.Text
import androidx.compose.material.navigation.ModalBottomSheetLayout
import androidx.compose.material.navigation.bottomSheet
import androidx.compose.material.navigation.rememberBottomSheetNavigator
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController

val bottomSheetNavigator = rememberBottomSheetNavigator()
val navController = rememberNavController(bottomSheetNavigator)

ModalBottomSheetLayout(bottomSheetNavigator) {
    NavHost(navController, Destinations.Home) {
        composable(Destinations.Home) {
            HomeScreen(
                showSheet = {
                    navController.navigate(Destinations.Sheet + "?arg=From Home Screen")
                },
                showFeed = { navController.navigate(Destinations.Feed) }
            )
        }
        composable(Destinations.Feed) { Text("Feed!") }
        bottomSheet(Destinations.Sheet + "?arg={arg}") { backstackEntry ->
            val arg = backstackEntry.arguments?.getString("arg") ?: "Missing argument :("
            BottomSheet(
                showFeed = { navController.navigate(Destinations.Feed) },
                showAnotherSheet = {
                    navController.navigate(Destinations.Sheet + "?arg=${UUID.randomUUID()}")
                },
                arg = arg
            )
        }
    }
}
Parameters
bottomSheetNavigator: BottomSheetNavigator

The navigator that manages the bottom sheet content.
modifier: Modifier = Modifier

Optional Modifier for the entire component.
sheetShape: Shape = MaterialTheme.shapes.large

The shape of the bottom sheet.
sheetElevation: Dp = ModalBottomSheetDefaults.Elevation

The elevation of the bottom sheet.
sheetBackgroundColor: Color = MaterialTheme.colors.surface

The background color of the bottom sheet.
sheetContentColor: Color = contentColorFor(sheetBackgroundColor)

The preferred content color provided by the bottom sheet to its children. Defaults to the matching content color for sheetBackgroundColor, or if that is not a color from the theme, this will keep the same content color set above the bottom sheet.
scrimColor: Color = ModalBottomSheetDefaults.scrimColor

The color of the scrim that is applied to the rest of the screen when the bottom sheet is visible. If the color passed is Color.Unspecified, then a scrim will no longer be applied and the bottom sheet will not block interaction with the rest of the screen when visible.
content: @Composable () -> Unit

The content of rest of the screen.
See also
ModalBottomSheetLayout

rememberBottomSheetNavigator

@Composable
fun rememberBottomSheetNavigator(
    animationSpec: AnimationSpec<Float> = SpringSpec()
): BottomSheetNavigator

Create and remember a BottomSheetNavigator.

Parameters
animationSpec: AnimationSpec<Float> = SpringSpec()

The default animation that will be used to animate to a new state.

Extension functions

bottomSheet

fun NavGraphBuilder.bottomSheet(
    route: String,
    arguments: List<NamedNavArgument> = emptyList(),
    deepLinks: List<NavDeepLink> = emptyList(),
    content: @Composable ColumnScope.(backstackEntry: NavBackStackEntry) -> Unit
): Unit

Add the content as bottom sheet content to the NavGraphBuilder

import androidx.compose.material.Text
import androidx.compose.material.navigation.ModalBottomSheetLayout
import androidx.compose.material.navigation.bottomSheet
import androidx.compose.material.navigation.rememberBottomSheetNavigator
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController

val bottomSheetNavigator = rememberBottomSheetNavigator()
val navController = rememberNavController(bottomSheetNavigator)

ModalBottomSheetLayout(bottomSheetNavigator) {
    NavHost(navController, Destinations.Home) {
        composable(Destinations.Home) {
            HomeScreen(
                showSheet = {
                    navController.navigate(Destinations.Sheet + "?arg=From Home Screen")
                },
                showFeed = { navController.navigate(Destinations.Feed) }
            )
        }
        composable(Destinations.Feed) { Text("Feed!") }
        bottomSheet(Destinations.Sheet + "?arg={arg}") { backstackEntry ->
            val arg = backstackEntry.arguments?.getString("arg") ?: "Missing argument :("
            BottomSheet(
                showFeed = { navController.navigate(Destinations.Feed) },
                showAnotherSheet = {
                    navController.navigate(Destinations.Sheet + "?arg=${UUID.randomUUID()}")
                },
                arg = arg
            )
        }
    }
}
Parameters
route: String

route for the destination
arguments: List<NamedNavArgument> = emptyList()

list of arguments to associate with destination
deepLinks: List<NavDeepLink> = emptyList()

list of deep links to associate with the destinations
content: @Composable ColumnScope.(backstackEntry: NavBackStackEntry) -> Unit

the sheet content at the given destination

bottomSheet

inline fun <T : Any> NavGraphBuilder.bottomSheet(
    typeMap: Map<KType, NavType<*>> = emptyMap(),
    arguments: List<NamedNavArgument> = emptyList(),
    deepLinks: List<NavDeepLink> = emptyList(),
    noinline content: @Composable ColumnScope.(backstackEntry: NavBackStackEntry) -> Unit
): Unit

Add the content as bottom sheet content to the NavGraphBuilder

import androidx.compose.material.Text
import androidx.compose.material.navigation.ModalBottomSheetLayout
import androidx.compose.material.navigation.bottomSheet
import androidx.compose.material.navigation.rememberBottomSheetNavigator
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController

val bottomSheetNavigator = rememberBottomSheetNavigator()
val navController = rememberNavController(bottomSheetNavigator)

ModalBottomSheetLayout(bottomSheetNavigator) {
    NavHost(navController, Destinations.Home) {
        composable(Destinations.Home) {
            HomeScreen(
                showSheet = {
                    navController.navigate(Destinations.Sheet + "?arg=From Home Screen")
                },
                showFeed = { navController.navigate(Destinations.Feed) }
            )
        }
        composable(Destinations.Feed) { Text("Feed!") }
        bottomSheet(Destinations.Sheet + "?arg={arg}") { backstackEntry ->
            val arg = backstackEntry.arguments?.getString("arg") ?: "Missing argument :("
            BottomSheet(
                showFeed = { navController.navigate(Destinations.Feed) },
                showAnotherSheet = {
                    navController.navigate(Destinations.Sheet + "?arg=${UUID.randomUUID()}")
                },
                arg = arg
            )
        }
    }
}
Parameters
<T : Any>

route from a KClass for the destination
typeMap: Map<KType, NavType<*>> = emptyMap()

map of destination arguments' kotlin type KType to its respective custom NavType. May be empty if T does not use custom NavTypes.
arguments: List<NamedNavArgument> = emptyList()

list of arguments to associate with destination
deepLinks: List<NavDeepLink> = emptyList()

list of deep links to associate with the destinations
noinline content: @Composable ColumnScope.(backstackEntry: NavBackStackEntry) -> Unit

the sheet content at the given destination