# FlexibleBottomAppBar

Common/AllAndroid/JVM

## Functions summary

|---|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/material3/FlexibleBottomAppBar.composable#FlexibleBottomAppBar(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.BottomAppBarScrollBehavior,kotlin.Function1)( modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, containerColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, contentColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues, horizontalArrangement: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement.Horizontal, expandedHeight: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, windowInsets: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets, scrollBehavior: https://developer.android.com/reference/kotlin/androidx/compose/material3/BottomAppBarScrollBehavior?, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` [Material Design flexible bottom app bar](https://m3.material.io/components/bottom-app-bar/overview) | Cmn |

## Functions

### FlexibleBottomAppBar

Cmn Artifact: [androidx.compose.material3:material3](https://developer.android.com/jetpack/androidx/releases/compose-material3) [View Source](https://cs.android.com/search?q=file:androidx/compose/material3/AppBar.kt+function:FlexibleBottomAppBar)

```
@Composable
fun FlexibleBottomAppBar(
    modifier: Modifier = Modifier,
    containerColor: Color = BottomAppBarDefaults.containerColor,
    contentColor: Color = contentColorFor(containerColor),
    contentPadding: PaddingValues = BottomAppBarDefaults.FlexibleContentPadding,
    horizontalArrangement: Arrangement.Horizontal = BottomAppBarDefaults.FlexibleHorizontalArrangement,
    expandedHeight: Dp = BottomAppBarDefaults.FlexibleBottomAppBarHeight,
    windowInsets: WindowInsets = BottomAppBarDefaults.windowInsets,
    scrollBehavior: BottomAppBarScrollBehavior? = null,
    content: @Composable RowScope.() -> Unit
): Unit
```

[Material Design flexible bottom app bar](https://m3.material.io/components/bottom-app-bar/overview)

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

This variation of the Bottom app bar has a `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#FlexibleBottomAppBar(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.BottomAppBarScrollBehavior,kotlin.Function1)` parameter for controlling the way the content is arranged. Also, it allows more flexibility in controlling the bar's expanded height with an `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#FlexibleBottomAppBar(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.BottomAppBarScrollBehavior,kotlin.Function1)` value.

If you are interested in displaying a `https://developer.android.com/reference/kotlin/androidx/compose/material3/FloatingActionButton.composable#FloatingActionButton(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.material3.FloatingActionButtonElevation,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)`, consider using another overload that takes a `https://developer.android.com/reference/kotlin/androidx/compose/material3/FloatingActionButton.composable#FloatingActionButton(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.material3.FloatingActionButtonElevation,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)` parameter.

Also see `https://developer.android.com/reference/kotlin/androidx/compose/material3/NavigationBar.composable#NavigationBar(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,kotlin.Function1)`.

A flexible bottom app bar can be configured with a `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#FlexibleBottomAppBar(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.BottomAppBarScrollBehavior,kotlin.Function1)`, and can optionally use a `https://developer.android.com/reference/kotlin/androidx/compose/material3/BottomAppBarScrollBehavior` to collapse or expand on scroll:

A bottom app bar with an actions row that automatically handles overflow when items do not fit:

```kotlin
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material.icons.automirrored.filled.ArrowForward
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.Check
import androidx.compose.material.icons.filled.Edit
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.MoreVert
import androidx.compose.material3.AppBarRow
import androidx.compose.material3.BottomAppBar
import androidx.compose.material3.BottomAppBarDefaults
import androidx.compose.material3.FlexibleBottomAppBar
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
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.LiveRegionMode
import androidx.compose.ui.semantics.liveRegion
import androidx.compose.ui.semantics.paneTitle
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.dp

val icons =
    listOf(
        Icons.AutoMirrored.Filled.ArrowBack,
        Icons.AutoMirrored.Filled.ArrowForward,
        Icons.Filled.Add,
        Icons.Filled.Check,
        Icons.Filled.Edit,
        Icons.Filled.Favorite,
    )
val items = listOf("Back", "Forward", "Add", "Check", "Edit", "Favorite")
FlexibleBottomAppBar(
    contentPadding = PaddingValues(horizontal = 96.dp),
    horizontalArrangement = BottomAppBarDefaults.FlexibleFixedHorizontalArrangement,
) {
    AppBarRow(
        overflowIndicator = { menuState ->
            TooltipBox(
                positionProvider =
                    TooltipDefaults.rememberTooltipPositionProvider(
                        TooltipAnchorPosition.Above
                    ),
                tooltip = {
                    PlainTooltip(
                        modifier =
                            Modifier.semantics {
                                // TODO(b/496338253): Remove this modifier once bug where
                                // tooltip text
                                // is not announced
                                //  by a11y screen readers is resolved.
                                liveRegion = LiveRegionMode.Assertive
                                paneTitle = "Overflow"
                            }
                    ) {
                        Text("Overflow")
                    }
                },
                state = rememberTooltipState(),
            ) {
                IconButton(
                    onClick = {
                        if (menuState.isShowing) {
                            menuState.dismiss()
                        } else {
                            menuState.show()
                        }
                    }
                ) {
                    Icon(imageVector = Icons.Filled.MoreVert, contentDescription = "Overflow")
                }
            }
        }
    ) {
        items.forEachIndexed { index, item ->
            clickableItem(
                onClick = { /* doSomething() */ },
                icon = { Icon(icons[index], contentDescription = item) },
                label = item,
            )
        }
    }
}
```

A bottom app bar collapsing on scroll, with items spaced around:

```kotlin
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material.icons.automirrored.filled.ArrowForward
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.FilledIconButton
import androidx.compose.material3.FlexibleBottomAppBar
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.semantics.LiveRegionMode
import androidx.compose.ui.semantics.liveRegion
import androidx.compose.ui.semantics.paneTitle
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.dp

val scrollBehavior = BottomAppBarDefaults.exitAlwaysScrollBehavior()
val icons =
    listOf(
        Icons.AutoMirrored.Filled.ArrowBack,
        Icons.AutoMirrored.Filled.ArrowForward,
        Icons.Filled.Add,
        Icons.Filled.Check,
        Icons.Filled.Edit,
    )
val buttons = listOf("Back", "Forward", "Add", "Check", "Edit")

Scaffold(
    modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
    bottomBar = {
        FlexibleBottomAppBar(
            horizontalArrangement = Arrangement.SpaceAround,
            contentPadding = PaddingValues(horizontal = 0.dp),
            scrollBehavior = scrollBehavior,
            content = {
                buttons.forEachIndexed { index, button ->
                    TooltipBox(
                        positionProvider =
                            TooltipDefaults.rememberTooltipPositionProvider(
                                TooltipAnchorPosition.Above
                            ),
                        tooltip = {
                            PlainTooltip(
                                modifier =
                                    Modifier.semantics {
                                        // TODO(b/496338253): Remove this modifier once bug
                                        // where
                                        // tooltip text is not announced
                                        //  by a11y screen readers is resolved.
                                        liveRegion = LiveRegionMode.Assertive
                                        paneTitle = button
                                    }
                            ) {
                                Text(button)
                            }
                        },
                        state = rememberTooltipState(),
                    ) {
                        if (index == 2) {
                            FilledIconButton(
                                modifier = Modifier.width(56.dp),
                                onClick = { /* doSomething() */ },
                            ) {
                                Icon(icons[index], contentDescription = button)
                            }
                        } else {
                            IconButton(onClick = { /* doSomething() */ }) {
                                Icon(icons[index], contentDescription = button)
                            }
                        }
                    }
                }
            },
        )
    },
    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),
                )
            }
        }
    },
)
```

A bottom app bar collapsing on scroll, with items spaced between:

```kotlin
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.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material.icons.automirrored.filled.ArrowForward
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.FilledIconButton
import androidx.compose.material3.FlexibleBottomAppBar
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.semantics.LiveRegionMode
import androidx.compose.ui.semantics.liveRegion
import androidx.compose.ui.semantics.paneTitle
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.dp

val scrollBehavior = BottomAppBarDefaults.exitAlwaysScrollBehavior()
val icons =
    listOf(
        Icons.AutoMirrored.Filled.ArrowBack,
        Icons.AutoMirrored.Filled.ArrowForward,
        Icons.Filled.Add,
        Icons.Filled.Check,
        Icons.Filled.Edit,
    )
val buttons = listOf("Back", "Forward", "Add", "Check", "Edit")
Scaffold(
    modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
    bottomBar = {
        FlexibleBottomAppBar(
            horizontalArrangement = Arrangement.SpaceBetween,
            scrollBehavior = scrollBehavior,
            content = {
                buttons.forEachIndexed { index, button ->
                    TooltipBox(
                        positionProvider =
                            TooltipDefaults.rememberTooltipPositionProvider(
                                TooltipAnchorPosition.Above
                            ),
                        tooltip = {
                            PlainTooltip(
                                modifier =
                                    Modifier.semantics {
                                        // TODO(b/496338253): Remove this modifier once bug
                                        // where
                                        // tooltip text is not announced
                                        //  by a11y screen readers is resolved.
                                        liveRegion = LiveRegionMode.Assertive
                                        paneTitle = button
                                    }
                            ) {
                                Text(button)
                            }
                        },
                        state = rememberTooltipState(),
                    ) {
                        if (index == 2) {
                            FilledIconButton(
                                modifier = Modifier.width(56.dp),
                                onClick = { /* doSomething() */ },
                            ) {
                                Icon(icons[index], contentDescription = button)
                            }
                        } else {
                            IconButton(onClick = { /* doSomething() */ }) {
                                Icon(icons[index], contentDescription = button)
                            }
                        }
                    }
                }
            },
        )
    },
    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),
                )
            }
        }
    },
)
```

A bottom app bar collapsing on scroll, with items spaced evenly:

```kotlin
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material.icons.automirrored.filled.ArrowForward
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.FilledIconButton
import androidx.compose.material3.FlexibleBottomAppBar
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.semantics.LiveRegionMode
import androidx.compose.ui.semantics.liveRegion
import androidx.compose.ui.semantics.paneTitle
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.dp

val scrollBehavior = BottomAppBarDefaults.exitAlwaysScrollBehavior()
val icons =
    listOf(
        Icons.AutoMirrored.Filled.ArrowBack,
        Icons.AutoMirrored.Filled.ArrowForward,
        Icons.Filled.Add,
        Icons.Filled.Check,
        Icons.Filled.Edit,
    )
val buttons = listOf("Back", "Forward", "Add", "Check", "Edit")
Scaffold(
    modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
    bottomBar = {
        FlexibleBottomAppBar(
            horizontalArrangement = Arrangement.SpaceEvenly,
            contentPadding = PaddingValues(horizontal = 0.dp),
            scrollBehavior = scrollBehavior,
            content = {
                buttons.forEachIndexed { index, button ->
                    TooltipBox(
                        positionProvider =
                            TooltipDefaults.rememberTooltipPositionProvider(
                                TooltipAnchorPosition.Above
                            ),
                        tooltip = {
                            PlainTooltip(
                                modifier =
                                    Modifier.semantics {
                                        // TODO(b/496338253): Remove this modifier once bug
                                        // where
                                        // tooltip text is not announced
                                        //  by a11y screen readers is resolved.
                                        liveRegion = LiveRegionMode.Assertive
                                        paneTitle = button
                                    }
                            ) {
                                Text(button)
                            }
                        },
                        state = rememberTooltipState(),
                    ) {
                        if (index == 2) {
                            FilledIconButton(
                                modifier = Modifier.width(56.dp),
                                onClick = { /* doSomething() */ },
                            ) {
                                Icon(icons[index], contentDescription = button)
                            }
                        } else {
                            IconButton(onClick = { /* doSomething() */ }) {
                                Icon(icons[index], contentDescription = button)
                            }
                        }
                    }
                }
            },
        )
    },
    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),
                )
            }
        }
    },
)
```

A bottom app bar collapsing on scroll, with items in a fixed arrangement:

```kotlin
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.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material.icons.automirrored.filled.ArrowForward
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.FilledIconButton
import androidx.compose.material3.FlexibleBottomAppBar
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.semantics.LiveRegionMode
import androidx.compose.ui.semantics.liveRegion
import androidx.compose.ui.semantics.paneTitle
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.dp

val scrollBehavior = BottomAppBarDefaults.exitAlwaysScrollBehavior()
val icons =
    listOf(
        Icons.AutoMirrored.Filled.ArrowBack,
        Icons.AutoMirrored.Filled.ArrowForward,
        Icons.Filled.Add,
        Icons.Filled.Check,
        Icons.Filled.Edit,
    )
val buttons = listOf("Back", "Forward", "Add", "Check", "Edit")
Scaffold(
    modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
    bottomBar = {
        FlexibleBottomAppBar(
            horizontalArrangement = BottomAppBarDefaults.FlexibleFixedHorizontalArrangement,
            scrollBehavior = scrollBehavior,
            content = {
                buttons.forEachIndexed { index, button ->
                    TooltipBox(
                        positionProvider =
                            TooltipDefaults.rememberTooltipPositionProvider(
                                TooltipAnchorPosition.Above
                            ),
                        tooltip = {
                            PlainTooltip(
                                modifier =
                                    Modifier.semantics {
                                        // TODO(b/496338253): Remove this modifier once bug
                                        // where
                                        // tooltip text is not announced
                                        //  by a11y screen readers is resolved.
                                        liveRegion = LiveRegionMode.Assertive
                                        paneTitle = button
                                    }
                            ) {
                                Text(button)
                            }
                        },
                        state = rememberTooltipState(),
                    ) {
                        if (index == 2) {
                            FilledIconButton(
                                modifier = Modifier.width(56.dp),
                                onClick = { /* doSomething() */ },
                            ) {
                                Icon(icons[index], contentDescription = button)
                            }
                        } else {
                            IconButton(onClick = { /* doSomething() */ }) {
                                Icon(icons[index], contentDescription = button)
                            }
                        }
                    }
                }
            },
        )
    },
    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),
                )
            }
        }
    },
)
```

A bottom app bar collapsing on scroll, with items in a fixed arrangement and a custom color:

```kotlin
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.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material.icons.automirrored.filled.ArrowForward
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.FilledIconButton
import androidx.compose.material3.FlexibleBottomAppBar
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.semantics.LiveRegionMode
import androidx.compose.ui.semantics.liveRegion
import androidx.compose.ui.semantics.paneTitle
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.dp

val scrollBehavior = BottomAppBarDefaults.exitAlwaysScrollBehavior()
val icons =
    listOf(
        Icons.AutoMirrored.Filled.ArrowBack,
        Icons.AutoMirrored.Filled.ArrowForward,
        Icons.Filled.Add,
        Icons.Filled.Check,
        Icons.Filled.Edit,
    )
val buttons = listOf("Back", "Forward", "Add", "Check", "Edit")
Scaffold(
    modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
    bottomBar = {
        FlexibleBottomAppBar(
            horizontalArrangement = BottomAppBarDefaults.FlexibleFixedHorizontalArrangement,
            scrollBehavior = scrollBehavior,
            containerColor =
                MaterialTheme.colorScheme.primaryContainer, // TODO(b/356885344): tokens
            content = {
                buttons.forEachIndexed { index, button ->
                    TooltipBox(
                        positionProvider =
                            TooltipDefaults.rememberTooltipPositionProvider(
                                TooltipAnchorPosition.Above
                            ),
                        tooltip = {
                            PlainTooltip(
                                modifier =
                                    Modifier.semantics {
                                        // TODO(b/496338253): Remove this modifier once bug
                                        // where
                                        // tooltip text is not announced
                                        //  by a11y screen readers is resolved.
                                        liveRegion = LiveRegionMode.Assertive
                                        paneTitle = button
                                    }
                            ) {
                                Text(button)
                            }
                        },
                        state = rememberTooltipState(),
                    ) {
                        if (index == 2) {
                            FilledIconButton(
                                modifier = Modifier.width(56.dp),
                                onClick = { /* doSomething() */ },
                            ) {
                                Icon(icons[index], contentDescription = button)
                            }
                        } else {
                            IconButton(onClick = { /* doSomething() */ }) {
                                Icon(icons[index], contentDescription = button)
                            }
                        }
                    }
                }
            },
        )
    },
    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),
                )
            }
        }
    },
)
```

| Parameters |
|---|---|
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | the `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` to be applied to this BottomAppBar |
| `containerColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = BottomAppBarDefaults.containerColor` | the color used for the background of this BottomAppBar. Use `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color#Transparent()` to have no color. |
| `contentColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = contentColorFor(containerColor)` | the preferred color for content inside this BottomAppBar. Defaults to either the matching content color for `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#FlexibleBottomAppBar(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.BottomAppBarScrollBehavior,kotlin.Function1)`, or to the current `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#LocalContentColor()` if `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#FlexibleBottomAppBar(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.BottomAppBarScrollBehavior,kotlin.Function1)` is not a color from the theme. |
| `contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues = BottomAppBarDefaults.FlexibleContentPadding` | the padding applied to the content of this BottomAppBar |
| `horizontalArrangement: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement.Horizontal = BottomAppBarDefaults.FlexibleHorizontalArrangement` | the horizontal arrangement of the content inside this BottomAppBar |
| `expandedHeight: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = BottomAppBarDefaults.FlexibleBottomAppBarHeight` | the maximum height this bottom bar can reach when fully expanded. If a `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#FlexibleBottomAppBar(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.BottomAppBarScrollBehavior,kotlin.Function1)` is provided, the bar might collapse or expand based on scrolling. In that case, this value sets the upper limit for the bar's height during expansion. This `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp` value must be specified, finite, and greater than zero; otherwise, `https://developer.android.com/reference/kotlin/androidx/compose/material3/BottomAppBarDefaults#FlexibleBottomAppBarHeight()` will be used as a default. In case the `https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#FlexibleBottomAppBar(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.BottomAppBarScrollBehavior,kotlin.Function1)` is `null`, this value will simply be the fixed height of the bottom bar. |
| `windowInsets: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets = BottomAppBarDefaults.windowInsets` | a window insets that app bar will respect. |
| `scrollBehavior: https://developer.android.com/reference/kotlin/androidx/compose/material3/BottomAppBarScrollBehavior? = null` | a `https://developer.android.com/reference/kotlin/androidx/compose/material3/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 `https://developer.android.com/reference/kotlin/androidx/compose/material3/BottomAppBarScrollBehavior#nestedScrollConnection()`. |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | the content of this BottomAppBar. The default layout here is a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Row.composable#Row(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,kotlin.Function1)`, so content inside will be placed horizontally. |