BottomAppBar

Functions summary

Unit
@Composable
BottomAppBar(
    modifier: Modifier,
    containerColor: Color,
    contentColor: Color,
    tonalElevation: Dp,
    contentPadding: PaddingValues,
    windowInsets: WindowInsets,
    content: @Composable RowScope.() -> Unit
)

Material Design bottom app bar
Cmn
Unit
@Composable
BottomAppBar(
    actions: @Composable RowScope.() -> Unit,
    modifier: Modifier,
    floatingActionButton: (@Composable () -> Unit)?,
    containerColor: Color,
    contentColor: Color,
    tonalElevation: Dp,
    contentPadding: PaddingValues,
    windowInsets: WindowInsets
)

Material Design bottom app bar
Cmn
Unit
@ExperimentalMaterial3Api
@Composable
BottomAppBar(
    modifier: Modifier,
    containerColor: Color,
    contentColor: Color,
    tonalElevation: Dp,
    contentPadding: PaddingValues,
    windowInsets: WindowInsets,
    scrollBehavior: BottomAppBarScrollBehavior?,
    content: @Composable RowScope.() -> Unit
)

Material Design bottom app bar
Cmn
Unit
@ExperimentalMaterial3Api
@Composable
BottomAppBar(
    actions: @Composable RowScope.() -> Unit,
    modifier: Modifier,
    floatingActionButton: (@Composable () -> Unit)?,
    containerColor: Color,
    contentColor: Color,
    tonalElevation: Dp,
    contentPadding: PaddingValues,
    windowInsets: WindowInsets,
    scrollBehavior: BottomAppBarScrollBehavior?
)

Material Design bottom app bar
Cmn

Functions

BottomAppBar

Cmn 
@Composable
fun BottomAppBar(
    modifier: Modifier = Modifier,
    containerColor: Color = BottomAppBarDefaults.containerColor,
    contentColor: Color = contentColorFor(containerColor),
    tonalElevation: Dp = BottomAppBarDefaults.ContainerElevation,
    contentPadding: PaddingValues = BottomAppBarDefaults.ContentPadding,
    windowInsets: WindowInsets = BottomAppBarDefaults.windowInsets,
    content: @Composable RowScope.() -> Unit
): Unit

Material Design bottom app bar

A bottom app bar displays navigation and key actions at the bottom of small screens.

Bottom app bar image

If you are interested in displaying a FloatingActionButton, consider using another overload.

Also see NavigationBar.

Parameters
modifier: Modifier = Modifier

the Modifier to be applied to this BottomAppBar
containerColor: Color = BottomAppBarDefaults.containerColor

the color used for the background of this BottomAppBar. Use Color.Transparent to have no color.
contentColor: Color = contentColorFor(containerColor)

the preferred color for content inside this BottomAppBar. Defaults to either the matching content color for containerColor, or to the current LocalContentColor if containerColor is not a color from the theme.
tonalElevation: Dp = BottomAppBarDefaults.ContainerElevation

when containerColor is ColorScheme.surface, a translucent primary color overlay is applied on top of the container. A higher tonal elevation value will result in a darker color in light theme and lighter color in dark theme. See also: Surface.
contentPadding: PaddingValues = BottomAppBarDefaults.ContentPadding

the padding applied to the content of this BottomAppBar
windowInsets: WindowInsets = BottomAppBarDefaults.windowInsets

a window insets that app bar will respect.
content: @Composable RowScope.() -> Unit

the content of this BottomAppBar. The default layout here is a Row, so content inside will be placed horizontally.

BottomAppBar

Cmn 
@Composable
fun BottomAppBar(
    actions: @Composable RowScope.() -> Unit,
    modifier: Modifier = Modifier,
    floatingActionButton: (@Composable () -> Unit)? = null,
    containerColor: Color = BottomAppBarDefaults.containerColor,
    contentColor: Color = contentColorFor(containerColor),
    tonalElevation: Dp = BottomAppBarDefaults.ContainerElevation,
    contentPadding: PaddingValues = BottomAppBarDefaults.ContentPadding,
    windowInsets: WindowInsets = BottomAppBarDefaults.windowInsets
): Unit

Material Design bottom app bar

A bottom app bar displays navigation and key actions at the bottom of small screens.

Bottom app bar image

import androidx.compose.foundation.layout.Box
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Menu
import androidx.compose.material3.BottomAppBar
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.PlainTooltip
import androidx.compose.material3.Text
import androidx.compose.material3.TooltipAnchorPosition
import androidx.compose.material3.TooltipBox
import androidx.compose.material3.TooltipDefaults
import androidx.compose.material3.rememberTooltipState
import androidx.compose.runtime.remember

BottomAppBar(
    actions = {
        TooltipBox(
            positionProvider =
                TooltipDefaults.rememberTooltipPositionProvider(TooltipAnchorPosition.Above),
            tooltip = { PlainTooltip { Text("Menu") } },
            state = rememberTooltipState(),
        ) {
            IconButton(onClick = { /* doSomething() */ }) {
                Icon(Icons.Filled.Menu, contentDescription = "Menu button")
            }
        }
    }
)

It can optionally display a FloatingActionButton embedded at the end of the BottomAppBar.

import androidx.compose.foundation.layout.Box
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.Check
import androidx.compose.material.icons.filled.Edit
import androidx.compose.material3.BottomAppBar
import androidx.compose.material3.BottomAppBarDefaults
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.FloatingActionButtonDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.PlainTooltip
import androidx.compose.material3.Text
import androidx.compose.material3.TooltipAnchorPosition
import androidx.compose.material3.TooltipBox
import androidx.compose.material3.TooltipDefaults
import androidx.compose.material3.rememberTooltipState
import androidx.compose.runtime.remember

BottomAppBar(
    actions = {
        TooltipBox(
            positionProvider =
                TooltipDefaults.rememberTooltipPositionProvider(TooltipAnchorPosition.Above),
            tooltip = { PlainTooltip { Text("Check") } },
            state = rememberTooltipState(),
        ) {
            IconButton(onClick = { /* doSomething() */ }) {
                Icon(Icons.Filled.Check, contentDescription = "Check")
            }
        }
        TooltipBox(
            positionProvider =
                TooltipDefaults.rememberTooltipPositionProvider(TooltipAnchorPosition.Above),
            tooltip = { PlainTooltip { Text("Edit") } },
            state = rememberTooltipState(),
        ) {
            IconButton(onClick = { /* doSomething() */ }) {
                Icon(Icons.Filled.Edit, contentDescription = "Edit")
            }
        }
    },
    floatingActionButton = {
        TooltipBox(
            positionProvider =
                TooltipDefaults.rememberTooltipPositionProvider(TooltipAnchorPosition.Above),
            tooltip = { PlainTooltip { Text("Add") } },
            state = rememberTooltipState(),
        ) {
            FloatingActionButton(
                onClick = { /* do something */ },
                containerColor = BottomAppBarDefaults.bottomAppBarFabColor,
                elevation = FloatingActionButtonDefaults.bottomAppBarFabElevation(),
            ) {
                Icon(Icons.Filled.Add, "Add")
            }
        }
    },
)

Also see NavigationBar.

Parameters
actions: @Composable RowScope.() -> Unit

the icon content of this BottomAppBar. The default layout here is a Row, so content inside will be placed horizontally.
modifier: Modifier = Modifier

the Modifier to be applied to this BottomAppBar
floatingActionButton: (@Composable () -> Unit)? = null

optional floating action button at the end of this BottomAppBar
containerColor: Color = BottomAppBarDefaults.containerColor

the color used for the background of this BottomAppBar. Use Color.Transparent to have no color.
contentColor: Color = contentColorFor(containerColor)

the preferred color for content inside this BottomAppBar. Defaults to either the matching content color for containerColor, or to the current LocalContentColor if containerColor is not a color from the theme.
tonalElevation: Dp = BottomAppBarDefaults.ContainerElevation

when containerColor is ColorScheme.surface, a translucent primary color overlay is applied on top of the container. A higher tonal elevation value will result in a darker color in light theme and lighter color in dark theme. See also: Surface.
contentPadding: PaddingValues = BottomAppBarDefaults.ContentPadding

the padding applied to the content of this BottomAppBar
windowInsets: WindowInsets = BottomAppBarDefaults.windowInsets

a window insets that app bar will respect.

BottomAppBar

Cmn 
@ExperimentalMaterial3Api
@Composable
fun BottomAppBar(
    modifier: Modifier = Modifier,
    containerColor: Color = BottomAppBarDefaults.containerColor,
    contentColor: Color = contentColorFor(containerColor),
    tonalElevation: Dp = BottomAppBarDefaults.ContainerElevation,
    contentPadding: PaddingValues = BottomAppBarDefaults.ContentPadding,
    windowInsets: WindowInsets = BottomAppBarDefaults.windowInsets,
    scrollBehavior: BottomAppBarScrollBehavior? = null,
    content: @Composable RowScope.() -> Unit
): Unit

Material Design bottom app bar

A bottom app bar displays navigation and key actions at the bottom of small screens.

Bottom app bar image

If you are interested in displaying a FloatingActionButton, consider using another overload.

Also see NavigationBar.

Parameters
modifier: Modifier = Modifier

the Modifier to be applied to this BottomAppBar
containerColor: Color = BottomAppBarDefaults.containerColor

the color used for the background of this BottomAppBar. Use Color.Transparent to have no color.
contentColor: Color = contentColorFor(containerColor)

the preferred color for content inside this BottomAppBar. Defaults to either the matching content color for containerColor, or to the current LocalContentColor if containerColor is not a color from the theme.
tonalElevation: Dp = BottomAppBarDefaults.ContainerElevation

when containerColor is ColorScheme.surface, a translucent primary color overlay is applied on top of the container. A higher tonal elevation value will result in a darker color in light theme and lighter color in dark theme. See also: Surface.
contentPadding: PaddingValues = BottomAppBarDefaults.ContentPadding

the padding applied to the content of this BottomAppBar
windowInsets: WindowInsets = BottomAppBarDefaults.windowInsets

a window insets that app bar will respect.
scrollBehavior: BottomAppBarScrollBehavior? = null

a BottomAppBarScrollBehavior which holds various offset values that will be applied by this bottom app bar to set up its height. A scroll behavior is designed to work in conjunction with a scrolled content to change the bottom app bar appearance as the content scrolls. Note that the bottom app bar will not react to scrolling in case a touch exploration service (e.g., TalkBack) is active. See BottomAppBarScrollBehavior.nestedScrollConnection.
content: @Composable RowScope.() -> Unit

the content of this BottomAppBar. The default layout here is a Row, so content inside will be placed horizontally.

BottomAppBar

Cmn 
@ExperimentalMaterial3Api
@Composable
fun BottomAppBar(
    actions: @Composable RowScope.() -> Unit,
    modifier: Modifier = Modifier,
    floatingActionButton: (@Composable () -> Unit)? = null,
    containerColor: Color = BottomAppBarDefaults.containerColor,
    contentColor: Color = contentColorFor(containerColor),
    tonalElevation: Dp = BottomAppBarDefaults.ContainerElevation,
    contentPadding: PaddingValues = BottomAppBarDefaults.ContentPadding,
    windowInsets: WindowInsets = BottomAppBarDefaults.windowInsets,
    scrollBehavior: BottomAppBarScrollBehavior? = null
): Unit

Material Design bottom app bar

A bottom app bar displays navigation and key actions at the bottom of small screens.

Bottom app bar image

import androidx.compose.foundation.layout.Box
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Menu
import androidx.compose.material3.BottomAppBar
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.PlainTooltip
import androidx.compose.material3.Text
import androidx.compose.material3.TooltipAnchorPosition
import androidx.compose.material3.TooltipBox
import androidx.compose.material3.TooltipDefaults
import androidx.compose.material3.rememberTooltipState
import androidx.compose.runtime.remember

BottomAppBar(
    actions = {
        TooltipBox(
            positionProvider =
                TooltipDefaults.rememberTooltipPositionProvider(TooltipAnchorPosition.Above),
            tooltip = { PlainTooltip { Text("Menu") } },
            state = rememberTooltipState(),
        ) {
            IconButton(onClick = { /* doSomething() */ }) {
                Icon(Icons.Filled.Menu, contentDescription = "Menu button")
            }
        }
    }
)

It can optionally display a FloatingActionButton embedded at the end of the BottomAppBar.

import androidx.compose.foundation.layout.Box
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.Check
import androidx.compose.material.icons.filled.Edit
import androidx.compose.material3.BottomAppBar
import androidx.compose.material3.BottomAppBarDefaults
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.FloatingActionButtonDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.PlainTooltip
import androidx.compose.material3.Text
import androidx.compose.material3.TooltipAnchorPosition
import androidx.compose.material3.TooltipBox
import androidx.compose.material3.TooltipDefaults
import androidx.compose.material3.rememberTooltipState
import androidx.compose.runtime.remember

BottomAppBar(
    actions = {
        TooltipBox(
            positionProvider =
                TooltipDefaults.rememberTooltipPositionProvider(TooltipAnchorPosition.Above),
            tooltip = { PlainTooltip { Text("Check") } },
            state = rememberTooltipState(),
        ) {
            IconButton(onClick = { /* doSomething() */ }) {
                Icon(Icons.Filled.Check, contentDescription = "Check")
            }
        }
        TooltipBox(
            positionProvider =
                TooltipDefaults.rememberTooltipPositionProvider(TooltipAnchorPosition.Above),
            tooltip = { PlainTooltip { Text("Edit") } },
            state = rememberTooltipState(),
        ) {
            IconButton(onClick = { /* doSomething() */ }) {
                Icon(Icons.Filled.Edit, contentDescription = "Edit")
            }
        }
    },
    floatingActionButton = {
        TooltipBox(
            positionProvider =
                TooltipDefaults.rememberTooltipPositionProvider(TooltipAnchorPosition.Above),
            tooltip = { PlainTooltip { Text("Add") } },
            state = rememberTooltipState(),
        ) {
            FloatingActionButton(
                onClick = { /* do something */ },
                containerColor = BottomAppBarDefaults.bottomAppBarFabColor,
                elevation = FloatingActionButtonDefaults.bottomAppBarFabElevation(),
            ) {
                Icon(Icons.Filled.Add, "Add")
            }
        }
    },
)

A bottom app bar that uses a scrollBehavior to customize its nested scrolling behavior when working in conjunction with a scrolling content looks like:

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.Check
import androidx.compose.material.icons.filled.Edit
import androidx.compose.material3.BottomAppBar
import androidx.compose.material3.BottomAppBarDefaults
import androidx.compose.material3.FabPosition
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.FloatingActionButtonDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.PlainTooltip
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TooltipAnchorPosition
import androidx.compose.material3.TooltipBox
import androidx.compose.material3.TooltipDefaults
import androidx.compose.material3.rememberTooltipState
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.input.nestedscroll.nestedScroll
import androidx.compose.ui.unit.dp

val scrollBehavior = BottomAppBarDefaults.exitAlwaysScrollBehavior()
Scaffold(
    modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
    bottomBar = {
        BottomAppBar(
            actions = {
                TooltipBox(
                    positionProvider =
                        TooltipDefaults.rememberTooltipPositionProvider(
                            TooltipAnchorPosition.Above
                        ),
                    tooltip = { PlainTooltip { Text("Check") } },
                    state = rememberTooltipState(),
                ) {
                    IconButton(onClick = { /* doSomething() */ }) {
                        Icon(Icons.Filled.Check, contentDescription = "Check")
                    }
                }
                TooltipBox(
                    positionProvider =
                        TooltipDefaults.rememberTooltipPositionProvider(
                            TooltipAnchorPosition.Above
                        ),
                    tooltip = { PlainTooltip { Text("Edit") } },
                    state = rememberTooltipState(),
                ) {
                    IconButton(onClick = { /* doSomething() */ }) {
                        Icon(Icons.Filled.Edit, contentDescription = "Edit")
                    }
                }
            },
            scrollBehavior = scrollBehavior,
        )
    },
    floatingActionButton = {
        TooltipBox(
            positionProvider =
                TooltipDefaults.rememberTooltipPositionProvider(TooltipAnchorPosition.Above),
            tooltip = { PlainTooltip { Text("Add") } },
            state = rememberTooltipState(),
        ) {
            FloatingActionButton(
                modifier = Modifier.offset(y = 4.dp),
                onClick = { /* do something */ },
                containerColor = BottomAppBarDefaults.bottomAppBarFabColor,
                elevation = FloatingActionButtonDefaults.bottomAppBarFabElevation(),
            ) {
                Icon(Icons.Filled.Add, "Add")
            }
        }
    },
    floatingActionButtonPosition = FabPosition.EndOverlay,
    content = { innerPadding ->
        LazyColumn(
            contentPadding = innerPadding,
            verticalArrangement = Arrangement.spacedBy(8.dp),
        ) {
            val list = (0..75).map { it.toString() }
            items(count = list.size) {
                Text(
                    text = list[it],
                    style = MaterialTheme.typography.bodyLarge,
                    modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp),
                )
            }
        }
    },
)

Also see NavigationBar.

Parameters
actions: @Composable RowScope.() -> Unit

the icon content of this BottomAppBar. The default layout here is a Row, so content inside will be placed horizontally.
modifier: Modifier = Modifier

the Modifier to be applied to this BottomAppBar
floatingActionButton: (@Composable () -> Unit)? = null

optional floating action button at the end of this BottomAppBar
containerColor: Color = BottomAppBarDefaults.containerColor

the color used for the background of this BottomAppBar. Use Color.Transparent to have no color.
contentColor: Color = contentColorFor(containerColor)

the preferred color for content inside this BottomAppBar. Defaults to either the matching content color for containerColor, or to the current LocalContentColor if containerColor is not a color from the theme.
tonalElevation: Dp = BottomAppBarDefaults.ContainerElevation

when containerColor is ColorScheme.surface, a translucent primary color overlay is applied on top of the container. A higher tonal elevation value will result in a darker color in light theme and lighter color in dark theme. See also: Surface.
contentPadding: PaddingValues = BottomAppBarDefaults.ContentPadding

the padding applied to the content of this BottomAppBar
windowInsets: WindowInsets = BottomAppBarDefaults.windowInsets

a window insets that app bar will respect.
scrollBehavior: BottomAppBarScrollBehavior? = null

a BottomAppBarScrollBehavior which holds various offset values that will be applied by this bottom app bar to set up its height. A scroll behavior is designed to work in conjunction with a scrolled content to change the bottom app bar appearance as the content scrolls. Note that the bottom app bar will not react to scrolling in case a touch exploration service (e.g., TalkBack) is active. See BottomAppBarScrollBehavior.nestedScrollConnection.