androidx.compose.material.navigation | API reference

Classes

`BottomSheetNavigator`	Navigator that drives a `ModalBottomSheetState` for use of `ModalBottomSheetLayout`s 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, sheetGesturesEnabled: Boolean, sheetShape: Shape, sheetElevation: Dp, sheetBackgroundColor: Color, sheetContentColor: Color, scrimColor: Color, content: @Composable () -> Unit )` Create a `ModalBottomSheetLayout` displaying content from a `BottomSheetNavigator`.
`BottomSheetNavigator`	`@Composable rememberBottomSheetNavigator(animationSpec: AnimationSpec<Float>)` 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

Artifact: androidx.compose.material:material-navigation

View Source

Added in 1.10.0

@Composable
fun ModalBottomSheetLayout(
    bottomSheetNavigator: BottomSheetNavigator,
    modifier: Modifier = Modifier,
    sheetGesturesEnabled: Boolean = true,
    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.
`sheetGesturesEnabled: Boolean = true`	Whether the bottom sheet can be interacted with by gestures.
`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

Artifact: androidx.compose.material:material-navigation

View Source

Added in 1.7.0

@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

Artifact: androidx.compose.material:material-navigation

View Source

Added in 1.7.0

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

Artifact: androidx.compose.material:material-navigation

View Source

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