# BottomAppBar

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/material/BottomAppBar.composable#BottomAppBar(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Shape,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.PaddingValues,kotlin.Function1)( modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, backgroundColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, contentColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, cutoutShape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape?, elevation: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues, 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 bottom app bar](https://material.io/components/app-bars-bottom) | Cmn |
| `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/material/BottomAppBar.composable#BottomAppBar(androidx.compose.foundation.layout.WindowInsets,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Shape,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.PaddingValues,kotlin.Function1)( windowInsets: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, backgroundColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, contentColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, cutoutShape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape?, elevation: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues, 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 bottom app bar](https://material.io/components/app-bars-bottom) | Cmn |

## Functions

### BottomAppBar

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

```
@Composable
fun BottomAppBar(
    modifier: Modifier = Modifier,
    backgroundColor: Color = MaterialTheme.colors.primarySurface,
    contentColor: Color = contentColorFor(backgroundColor),
    cutoutShape: Shape? = null,
    elevation: Dp = AppBarDefaults.BottomAppBarElevation,
    contentPadding: PaddingValues = AppBarDefaults.ContentPadding,
    content: @Composable RowScope.() -> Unit
): Unit
```

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

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

![App bars: bottom
image](https://developer.android.com/images/reference/androidx/compose/material/app-bars-bottom.png)

It can also optionally display a `https://developer.android.com/reference/kotlin/androidx/compose/material/FloatingActionButton.composable#FloatingActionButton(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.material.FloatingActionButtonElevation,kotlin.Function0)`, which is either overlaid on top of the BottomAppBar, or inset, carving a cutout in the BottomAppBar.

See [BottomAppBar anatomy](https://material.io/components/app-bars-bottom/#anatomy) for the recommended content depending on the `https://developer.android.com/reference/kotlin/androidx/compose/material/FloatingActionButton.composable#FloatingActionButton(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.material.FloatingActionButtonElevation,kotlin.Function0)` position.

Note that when you pass a non-null `https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#BottomAppBar(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Shape,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.PaddingValues,kotlin.Function1)` this makes the AppBar shape concave. The shadows for such shapes will not be drawn on Android versions less than 10.

The `https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#LocalContentAlpha()` inside a BottomAppBar is `https://developer.android.com/reference/kotlin/androidx/compose/material/ContentAlpha#medium()` - this is the default for trailing and overflow icons. It is recommended that any leading icons at the start of the BottomAppBar, such as a menu icon, use `https://developer.android.com/reference/kotlin/androidx/compose/material/ContentAlpha#high()` instead. This is demonstrated in the sample below.

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

```kotlin
import androidx.compose.foundation.layout.Spacer
import androidx.compose.material.AppBarDefaults
import androidx.compose.material.BottomAppBar
import androidx.compose.material.ContentAlpha
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.LocalContentAlpha
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Menu
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.ui.Modifier

BottomAppBar(windowInsets = AppBarDefaults.bottomAppBarWindowInsets) {
    // Leading icons should typically have a high content alpha
    CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.high) {
        IconButton(onClick = { /* doSomething() */ }) {
            Icon(Icons.Filled.Menu, contentDescription = "Localized description")
        }
    }
    // The actions should be at the end of the BottomAppBar. They use the default medium
    // content alpha provided by BottomAppBar
    Spacer(Modifier.weight(1f, true))
    IconButton(onClick = { /* doSomething() */ }) {
        Icon(Icons.Filled.Favorite, contentDescription = "Localized description")
    }
    IconButton(onClick = { /* doSomething() */ }) {
        Icon(Icons.Filled.Favorite, contentDescription = "Localized description")
    }
}
```

| 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 |
| `backgroundColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = MaterialTheme.colors.primarySurface` | The background color for the 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(backgroundColor)` | The preferred content color provided by this BottomAppBar to its children. Defaults to either the matching content color for `https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#BottomAppBar(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Shape,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.PaddingValues,kotlin.Function1)`, or if `https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#BottomAppBar(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Shape,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.PaddingValues,kotlin.Function1)` is not a color from the theme, this will keep the same value set above this BottomAppBar. |
| `cutoutShape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape? = null` | the shape of the cutout that will be added to the BottomAppBar - this should typically be the same shape used inside the `https://developer.android.com/reference/kotlin/androidx/compose/material/FloatingActionButton.composable#FloatingActionButton(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.material.FloatingActionButtonElevation,kotlin.Function0)`, when `https://developer.android.com/reference/kotlin/androidx/compose/material/BottomAppBar.composable#BottomAppBar(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Shape,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.PaddingValues,kotlin.Function1)` and `https://developer.android.com/reference/kotlin/androidx/compose/material/FloatingActionButton.composable#FloatingActionButton(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.material.FloatingActionButtonElevation,kotlin.Function0)` are being used together in `https://developer.android.com/reference/kotlin/androidx/compose/material/Scaffold.composable#Scaffold(androidx.compose.foundation.layout.WindowInsets,androidx.compose.ui.Modifier,androidx.compose.material.ScaffoldState,kotlin.Function0,kotlin.Function0,kotlin.Function1,kotlin.Function0,androidx.compose.material.FabPosition,kotlin.Boolean,kotlin.Function1,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1)`. This shape will be drawn with an offset around all sides. If null, where will be no cutout. |
| `elevation: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = AppBarDefaults.BottomAppBarElevation` | the elevation of this BottomAppBar. |
| `contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues = AppBarDefaults.ContentPadding` | the padding applied to the content of this BottomAppBar |
| `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. |

### BottomAppBar

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

```
@Composable
fun BottomAppBar(
    windowInsets: WindowInsets,
    modifier: Modifier = Modifier,
    backgroundColor: Color = MaterialTheme.colors.primarySurface,
    contentColor: Color = contentColorFor(backgroundColor),
    cutoutShape: Shape? = null,
    elevation: Dp = AppBarDefaults.BottomAppBarElevation,
    contentPadding: PaddingValues = AppBarDefaults.ContentPadding,
    content: @Composable RowScope.() -> Unit
): Unit
```

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

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

![App bars: bottom
image](https://developer.android.com/images/reference/androidx/compose/material/app-bars-bottom.png)

This particular overload provides ability to specify `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets`. Recommended value can be found in `https://developer.android.com/reference/kotlin/androidx/compose/material/AppBarDefaults#bottomAppBarWindowInsets()`.

It can also optionally display a `https://developer.android.com/reference/kotlin/androidx/compose/material/FloatingActionButton.composable#FloatingActionButton(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.material.FloatingActionButtonElevation,kotlin.Function0)`, which is either overlaid on top of the BottomAppBar, or inset, carving a cutout in the BottomAppBar.

See [BottomAppBar anatomy](https://material.io/components/app-bars-bottom/#anatomy) for the recommended content depending on the `https://developer.android.com/reference/kotlin/androidx/compose/material/FloatingActionButton.composable#FloatingActionButton(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.material.FloatingActionButtonElevation,kotlin.Function0)` position.

Note that when you pass a non-null `https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#BottomAppBar(androidx.compose.foundation.layout.WindowInsets,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Shape,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.PaddingValues,kotlin.Function1)` this makes the AppBar shape concave. The shadows for such shapes will not be drawn on Android versions less than 10.

The `https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#LocalContentAlpha()` inside a BottomAppBar is `https://developer.android.com/reference/kotlin/androidx/compose/material/ContentAlpha#medium()` - this is the default for trailing and overflow icons. It is recommended that any leading icons at the start of the BottomAppBar, such as a menu icon, use `https://developer.android.com/reference/kotlin/androidx/compose/material/ContentAlpha#high()` instead. This is demonstrated in the sample below.

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

```kotlin
import androidx.compose.foundation.layout.Spacer
import androidx.compose.material.AppBarDefaults
import androidx.compose.material.BottomAppBar
import androidx.compose.material.ContentAlpha
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.LocalContentAlpha
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Menu
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.ui.Modifier

BottomAppBar(windowInsets = AppBarDefaults.bottomAppBarWindowInsets) {
    // Leading icons should typically have a high content alpha
    CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.high) {
        IconButton(onClick = { /* doSomething() */ }) {
            Icon(Icons.Filled.Menu, contentDescription = "Localized description")
        }
    }
    // The actions should be at the end of the BottomAppBar. They use the default medium
    // content alpha provided by BottomAppBar
    Spacer(Modifier.weight(1f, true))
    IconButton(onClick = { /* doSomething() */ }) {
        Icon(Icons.Filled.Favorite, contentDescription = "Localized description")
    }
    IconButton(onClick = { /* doSomething() */ }) {
        Icon(Icons.Filled.Favorite, contentDescription = "Localized description")
    }
}
```

| Parameters |
|---|---|
| `windowInsets: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/WindowInsets` | a window insets that app bar will respect. |
| `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 |
| `backgroundColor: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color = MaterialTheme.colors.primarySurface` | The background color for the 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(backgroundColor)` | The preferred content color provided by this BottomAppBar to its children. Defaults to either the matching content color for `https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#BottomAppBar(androidx.compose.foundation.layout.WindowInsets,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Shape,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.PaddingValues,kotlin.Function1)`, or if `https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#BottomAppBar(androidx.compose.foundation.layout.WindowInsets,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Shape,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.PaddingValues,kotlin.Function1)` is not a color from the theme, this will keep the same value set above this BottomAppBar. |
| `cutoutShape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape? = null` | the shape of the cutout that will be added to the BottomAppBar - this should typically be the same shape used inside the `https://developer.android.com/reference/kotlin/androidx/compose/material/FloatingActionButton.composable#FloatingActionButton(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.material.FloatingActionButtonElevation,kotlin.Function0)`, when `https://developer.android.com/reference/kotlin/androidx/compose/material/BottomAppBar.composable#BottomAppBar(androidx.compose.foundation.layout.WindowInsets,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Shape,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.PaddingValues,kotlin.Function1)` and `https://developer.android.com/reference/kotlin/androidx/compose/material/FloatingActionButton.composable#FloatingActionButton(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.material.FloatingActionButtonElevation,kotlin.Function0)` are being used together in `https://developer.android.com/reference/kotlin/androidx/compose/material/Scaffold.composable#Scaffold(androidx.compose.foundation.layout.WindowInsets,androidx.compose.ui.Modifier,androidx.compose.material.ScaffoldState,kotlin.Function0,kotlin.Function0,kotlin.Function1,kotlin.Function0,androidx.compose.material.FabPosition,kotlin.Boolean,kotlin.Function1,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1)`. This shape will be drawn with an offset around all sides. If null, where will be no cutout. |
| `elevation: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = AppBarDefaults.BottomAppBarElevation` | the elevation of this BottomAppBar. |
| `contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues = AppBarDefaults.ContentPadding` | the padding applied to the content of this BottomAppBar |
| `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. |