Bottom Navigation

Display navigation at the bottom of the screen. Used to navigate between different screens of an application.

View in Playground

Constructors

@Composable
fun BottomNavigation(
    modifier: Modifier = Modifier,
    backgroundColor: Color = MaterialTheme.colors.primarySurface,
    contentColor: Color = contentColorFor(backgroundColor),
    elevation: Dp = BottomNavigationElevation,
    content: @Composable RowScope.() -> Unit
) {
    Surface(
        color = backgroundColor,
        contentColor = contentColor,
        elevation = elevation,
        modifier = modifier
    ) {
        Row(
            Modifier.fillMaxWidth().preferredHeight(BottomNavigationHeight),
            horizontalArrangement = Arrangement.SpaceBetween,
            children = content
        )
    }
}
  • modifier – modifier to be applied

  • content – content to be displayed inside of the navigation bar
    • required
  • backgroundColor – color used for the background of the composable

  • contentColor – the color to be applied to the content inside the composable

  • elevation – elevation to be applied to the bar

Examples

When it comes to creating a bottom navigation bar, we need to provide the items that we wish to display. This is done using the BottomNavigtionitem composable:

@Composable
fun BottomNavigationItem(
    icon: @Composable () -> Unit,
    label: @Composable () -> Unit = emptyContent(),
    selected: Boolean,
    onSelect: () -> Unit,
    modifier: Modifier = Modifier,
    alwaysShowLabels: Boolean = true,
    selectedContentColor: Color = contentColor(),
    unselectedContentColor: Color = EmphasisAmbient.current.medium.applyEmphasis(selectedContentColor)
)
  • icon – the icon to be displayed for the item

  • label – the text to be displayed for the item
    • required
  • selected – current selection state for the item
    • required
  • onSelect – callback triggered when the item becomes selected
    • required
  • modifier – modifier to be applied to the navigation item

  • alwaysShowLabels – whether or not labels should always be shown for the item

  • selectedContentColor – color to be used for active content (e.g selected item)

  • unselectedContentColor – color to be used for inactive content (e.g unselected item)

Minimal Bottom Navigation

val selectedItem = state { 0 }
val items = listOf(
    NavigationItem("Call", Icons.Filled.Call),
    NavigationItem("People", Icons.Filled.Face),
    NavigationItem("Email", Icons.Filled.Email)
)
Column {
    bodyContent()
    Spacer(modifier = Modifier.preferredHeight(64.dp))
    BottomNavigation {
        items.forEachIndexed { index, item ->
            BottomNavigationItem(
                icon = { Icon(item.icon) },
                label = { Text(text = item.label) },
                selected = selectedItem.value == index,
                onSelect = { selectedItem.value = index }
            )
        }
    }
}

Alert dialog

Bottom Navigation without Labels

val selectedItem = state { 0 }
val items = listOf(
    NavigationItem("Call", Icons.Filled.Call),
    NavigationItem("People", Icons.Filled.Face),
    NavigationItem("Email", Icons.Filled.Email)
)
Column {
    bodyContent()
    Spacer(modifier = Modifier.preferredHeight(64.dp))
    BottomNavigation {
        items.forEachIndexed { index, item ->
            BottomNavigationItem(
                icon = { Icon(item.icon) },
                label = { Text(text = item.label) },
                selected = selectedItem.value == index,
                onSelect = { selectedItem.value = index },
                alwaysShowLabels = false
            )
        }
    }
}

Alert dialog

###Styled Bottom Navigation

val selectedItem = state { 0 }
val items = listOf(
    NavigationItem("Call", Icons.Filled.Call),
    NavigationItem("People", Icons.Filled.Face),
    NavigationItem("Email", Icons.Filled.Email)
)
Column {
    bodyContent()
    Spacer(modifier = Modifier.preferredHeight(64.dp))
    BottomNavigation {
        items.forEachIndexed { index, item ->
            BottomNavigationItem(
                icon = { Icon(item.icon) },
                label = { Text(text = item.label) },
                selected = selectedItem.value == index,
                onSelect = { selectedItem.value = index },
                selectedContentColor = Color.Green,
                unselectedContentColor = Color.Red
            )
        }
    }
}

Alert dialog