| <html devsite="true"> |
| <head> |
| <title>AppBarKt</title> |
| {% setvar book_path %}/reference/androidx/_book.yaml{% endsetvar %} |
| {% include "_shared/_reference-head-tags.html" %} |
| </head> |
| <body> |
| <h1>AppBarKt</h1> |
| <p> |
| <pre>public final class AppBarKt</pre> |
| </p> |
| <hr> |
| <h2>Summary</h2> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <thead> |
| <tr> |
| <th colspan="2"><h3>Public methods</h3></th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td width="40%"><code>static final @<a href="/reference/androidx/compose/runtime/Composable.html">Composable</a> void</code></td> |
| <td> |
| <div><code><a href="/reference/androidx/compose/material/AppBarKt.html#BottomAppBar(Modifier,Color,Color,Shape,Dp,androidx.compose.foundation.layout.PaddingValues,kotlin.Function1)">BottomAppBar</a>(<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> modifier,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> backgroundColor,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> contentColor,<br> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> cutoutShape,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> elevation,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/foundation/layout/PaddingValues.html">PaddingValues</a> contentPadding,<br> @<a href="/reference/androidx/compose/runtime/Composable.html">Composable</a> @<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-extension-function-type/index.html">ExtensionFunctionType</a> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1<@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/foundation/layout/RowScope.html">RowScope</a>, <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a>> content<br>)</code></div> |
| <p><a href="https://material.io/components/app-bars-bottom" class="external" target="_blank">Material Design bottom app bar</a>.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>static final @<a href="/reference/androidx/compose/runtime/Composable.html">Composable</a> void</code></td> |
| <td> |
| <div><code><a href="/reference/androidx/compose/material/AppBarKt.html#TopAppBar(kotlin.Function0,Modifier,kotlin.Function0,kotlin.Function1,Color,Color,Dp)">TopAppBar</a>(<br> @<a href="/reference/androidx/compose/runtime/Composable.html">Composable</a> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function0<<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a>> title,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> modifier,<br> @<a href="/reference/androidx/compose/runtime/Composable.html">Composable</a> Function0<<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a>> navigationIcon,<br> @<a href="/reference/androidx/compose/runtime/Composable.html">Composable</a> @<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-extension-function-type/index.html">ExtensionFunctionType</a> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1<@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/foundation/layout/RowScope.html">RowScope</a>, <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a>> actions,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> backgroundColor,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> contentColor,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> elevation<br>)</code></div> |
| <p><a href="https://material.io/components/app-bars-top" class="external" target="_blank">Material Design top app bar</a>.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>static final @<a href="/reference/androidx/compose/runtime/Composable.html">Composable</a> void</code></td> |
| <td> |
| <div><code><a href="/reference/androidx/compose/material/AppBarKt.html#TopAppBar(Modifier,Color,Color,Dp,androidx.compose.foundation.layout.PaddingValues,kotlin.Function1)">TopAppBar</a>(<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> modifier,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> backgroundColor,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> contentColor,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> elevation,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/foundation/layout/PaddingValues.html">PaddingValues</a> contentPadding,<br> @<a href="/reference/androidx/compose/runtime/Composable.html">Composable</a> @<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-extension-function-type/index.html">ExtensionFunctionType</a> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1<@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/foundation/layout/RowScope.html">RowScope</a>, <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a>> content<br>)</code></div> |
| <p><a href="https://material.io/components/app-bars-top" class="external" target="_blank">Material Design top app bar</a>.</p> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| <h2>Public methods</h2> |
| <div><a name="BottomAppBar(Modifier, Color, Color, Shape, Dp, androidx.compose.foundation.layout.PaddingValues, kotlin.Function1)"></a><a name="BottomAppBar-Modifier-Color-Color-Shape-Dp-androidx.compose.foundation.layout.PaddingValues-kotlin.Function1-"></a><a name="bottomappbar"></a> |
| <h3 class="api-name" id="BottomAppBar(Modifier,Color,Color,Shape,Dp,androidx.compose.foundation.layout.PaddingValues,kotlin.Function1)">BottomAppBar</h3> |
| <pre class="api-signature no-pretty-print">@<a href="/reference/androidx/compose/runtime/Composable.html">Composable</a><br>public static final void <a href="/reference/androidx/compose/material/AppBarKt.html#BottomAppBar(Modifier,Color,Color,Shape,Dp,androidx.compose.foundation.layout.PaddingValues,kotlin.Function1)">BottomAppBar</a>(<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> modifier,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> backgroundColor,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> contentColor,<br> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> cutoutShape,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> elevation,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/foundation/layout/PaddingValues.html">PaddingValues</a> contentPadding,<br> @<a href="/reference/androidx/compose/runtime/Composable.html">Composable</a> @<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-extension-function-type/index.html">ExtensionFunctionType</a> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1<@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/foundation/layout/RowScope.html">RowScope</a>, <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a>> content<br>)</pre> |
| <p><a href="https://material.io/components/app-bars-bottom" class="external" target="_blank">Material Design bottom app bar</a>.</p> |
| <p>A bottom app bar displays navigation and key actions at the bottom of screens.</p> |
| <p><img alt="App bars: bottom image" src="https://developer.android.com/images/reference/androidx/compose/material/app-bars-bottom.png"></p> |
| <p>It can also optionally display a <code><a href="/reference/androidx/compose/material/package-summary.html#FloatingActionButton(kotlin.Function0,Modifier,androidx.compose.foundation.interaction.MutableInteractionSource,Shape,Color,Color,androidx.compose.material.FloatingActionButtonElevation,kotlin.Function0)">FloatingActionButton</a></code>, which is either overlaid on top of the BottomAppBar, or inset, carving a cutout in the BottomAppBar.</p> |
| <p>See <a href="https://material.io/components/app-bars-bottom/#anatomy">BottomAppBar anatomy</a> for the recommended content depending on the <code><a href="/reference/androidx/compose/material/package-summary.html#FloatingActionButton(kotlin.Function0,Modifier,androidx.compose.foundation.interaction.MutableInteractionSource,Shape,Color,Color,androidx.compose.material.FloatingActionButtonElevation,kotlin.Function0)">FloatingActionButton</a></code> position.</p> |
| <p>Note that when you pass a non-null <code><a href="/reference/androidx/compose/material/package-summary.html#BottomAppBar(Modifier,Color,Color,Shape,Dp,androidx.compose.foundation.layout.PaddingValues,kotlin.Function1)">cutoutShape</a></code> this makes the AppBar shape concave. The shadows for such shapes will not be drawn on Android versions less than 10.</p> |
| <p>Also see <code><a href="/reference/androidx/compose/material/package-summary.html#BottomNavigation(Modifier,Color,Color,Dp,kotlin.Function1)">BottomNavigation</a></code>.</p> |
| <pre class="prettyprint"> |
| import androidx.compose.foundation.layout.Spacer |
| import androidx.compose.material.BottomAppBar |
| import androidx.compose.material.Icon |
| import androidx.compose.material.IconButton |
| |
| BottomAppBar { |
| IconButton(onClick = { /* doSomething() */ }) { |
| Icon(Icons.Filled.Menu, contentDescription = "Localized description") |
| } |
| // The actions should be at the end of the 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") |
| } |
| }</pre> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <thead> |
| <tr> |
| <th colspan="2">Parameters</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> modifier</code></td> |
| <td> |
| <p>The Modifier to be applied to this BottomAppBar</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> backgroundColor</code></td> |
| <td> |
| <p>The background color for the BottomAppBar. Use Color.Transparent to have no color.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> contentColor</code></td> |
| <td> |
| <p>The preferred content color provided by this BottomAppBar to its children. Defaults to either the matching content color for <code><a href="/reference/androidx/compose/material/package-summary.html#BottomAppBar(Modifier,Color,Color,Shape,Dp,androidx.compose.foundation.layout.PaddingValues,kotlin.Function1)">backgroundColor</a></code>, or if <code><a href="/reference/androidx/compose/material/package-summary.html#BottomAppBar(Modifier,Color,Color,Shape,Dp,androidx.compose.foundation.layout.PaddingValues,kotlin.Function1)">backgroundColor</a></code> is not a color from the theme, this will keep the same value set above this BottomAppBar.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code><a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> cutoutShape</code></td> |
| <td> |
| <p>the shape of the cutout that will be added to the BottomAppBar - this should typically be the same shape used inside the <code><a href="/reference/androidx/compose/material/package-summary.html#FloatingActionButton(kotlin.Function0,Modifier,androidx.compose.foundation.interaction.MutableInteractionSource,Shape,Color,Color,androidx.compose.material.FloatingActionButtonElevation,kotlin.Function0)">FloatingActionButton</a></code>, when <code><a href="/reference/androidx/compose/material/package-summary.html#BottomAppBar(Modifier,Color,Color,Shape,Dp,androidx.compose.foundation.layout.PaddingValues,kotlin.Function1)">BottomAppBar</a></code> and <code><a href="/reference/androidx/compose/material/package-summary.html#FloatingActionButton(kotlin.Function0,Modifier,androidx.compose.foundation.interaction.MutableInteractionSource,Shape,Color,Color,androidx.compose.material.FloatingActionButtonElevation,kotlin.Function0)">FloatingActionButton</a></code> are being used together in <code><a href="/reference/androidx/compose/material/package-summary.html#Scaffold(Modifier,androidx.compose.material.ScaffoldState,kotlin.Function0,kotlin.Function0,kotlin.Function1,kotlin.Function0,androidx.compose.material.FabPosition,kotlin.Boolean,kotlin.Function1,kotlin.Boolean,Shape,Dp,Color,Color,Color,Color,Color,kotlin.Function1)">Scaffold</a></code>. This shape will be drawn with an offset around all sides. If null, where will be no cutout.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> elevation</code></td> |
| <td> |
| <p>the elevation of this BottomAppBar.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/foundation/layout/PaddingValues.html">PaddingValues</a> contentPadding</code></td> |
| <td> |
| <p>the padding applied to the content of this BottomAppBar</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/compose/runtime/Composable.html">Composable</a> @<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-extension-function-type/index.html">ExtensionFunctionType</a> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1<@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/foundation/layout/RowScope.html">RowScope</a>, <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a>> content</code></td> |
| <td> |
| <p>the content of this BottomAppBar. The default layout here is a <code><a href="/reference/androidx/compose/foundation/layout/package-summary.html#Row(Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,AlignmentVertical,kotlin.Function1)">Row</a></code>, so content inside will be placed horizontally.</p> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| <div><a name="TopAppBar(kotlin.Function0, Modifier, kotlin.Function0, kotlin.Function1, Color, Color, Dp)"></a><a name="TopAppBar-kotlin.Function0-Modifier-kotlin.Function0-kotlin.Function1-Color-Color-Dp-"></a><a name="topappbar"></a> |
| <h3 class="api-name" id="TopAppBar(kotlin.Function0,Modifier,kotlin.Function0,kotlin.Function1,Color,Color,Dp)">TopAppBar</h3> |
| <pre class="api-signature no-pretty-print">@<a href="/reference/androidx/compose/runtime/Composable.html">Composable</a><br>public static final void <a href="/reference/androidx/compose/material/AppBarKt.html#TopAppBar(kotlin.Function0,Modifier,kotlin.Function0,kotlin.Function1,Color,Color,Dp)">TopAppBar</a>(<br> @<a href="/reference/androidx/compose/runtime/Composable.html">Composable</a> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function0<<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a>> title,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> modifier,<br> @<a href="/reference/androidx/compose/runtime/Composable.html">Composable</a> Function0<<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a>> navigationIcon,<br> @<a href="/reference/androidx/compose/runtime/Composable.html">Composable</a> @<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-extension-function-type/index.html">ExtensionFunctionType</a> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1<@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/foundation/layout/RowScope.html">RowScope</a>, <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a>> actions,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> backgroundColor,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> contentColor,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> elevation<br>)</pre> |
| <p><a href="https://material.io/components/app-bars-top" class="external" target="_blank">Material Design top app bar</a>.</p> |
| <p>The top app bar displays information and actions relating to the current screen.</p> |
| <p><img alt="App bars: top image" src="https://developer.android.com/images/reference/androidx/compose/material/app-bars-top.png"></p> |
| <p>This TopAppBar has slots for a title, navigation icon, and actions. Note that the <code><a href="/reference/androidx/compose/material/package-summary.html#TopAppBar(kotlin.Function0,Modifier,kotlin.Function0,kotlin.Function1,Color,Color,Dp)">title</a></code> slot is inset from the start according to spec - for custom use cases such as horizontally centering the title, use the other TopAppBar overload for a generic TopAppBar with no restriction on content.</p> |
| <pre class="prettyprint"> |
| import androidx.compose.material.Icon |
| import androidx.compose.material.IconButton |
| import androidx.compose.material.Text |
| import androidx.compose.material.TopAppBar |
| |
| TopAppBar( |
| title = { Text("Simple TopAppBar") }, |
| navigationIcon = { |
| IconButton(onClick = { /* doSomething() */ }) { |
| Icon(Icons.Filled.Menu, contentDescription = null) |
| } |
| }, |
| actions = { |
| // RowScope here, so these icons will be placed horizontally |
| IconButton(onClick = { /* doSomething() */ }) { |
| Icon(Icons.Filled.Favorite, contentDescription = "Localized description") |
| } |
| IconButton(onClick = { /* doSomething() */ }) { |
| Icon(Icons.Filled.Favorite, contentDescription = "Localized description") |
| } |
| } |
| )</pre> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <thead> |
| <tr> |
| <th colspan="2">Parameters</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/compose/runtime/Composable.html">Composable</a> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function0<<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a>> title</code></td> |
| <td> |
| <p>The title to be displayed in the center of the TopAppBar</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> modifier</code></td> |
| <td> |
| <p>The Modifier to be applied to this TopAppBar</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/compose/runtime/Composable.html">Composable</a> Function0<<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a>> navigationIcon</code></td> |
| <td> |
| <p>The navigation icon displayed at the start of the TopAppBar. This should typically be an <code><a href="/reference/androidx/compose/material/package-summary.html#IconButton(kotlin.Function0,Modifier,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)">IconButton</a></code> or <code><a href="/reference/androidx/compose/material/package-summary.html#IconToggleButton(kotlin.Boolean,kotlin.Function1,Modifier,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)">IconToggleButton</a></code>.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/compose/runtime/Composable.html">Composable</a> @<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-extension-function-type/index.html">ExtensionFunctionType</a> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1<@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/foundation/layout/RowScope.html">RowScope</a>, <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a>> actions</code></td> |
| <td> |
| <p>The actions displayed at the end of the TopAppBar. This should typically be <code><a href="/reference/androidx/compose/material/package-summary.html#IconButton(kotlin.Function0,Modifier,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function0)">IconButton</a></code>s. The default layout here is a <code><a href="/reference/androidx/compose/foundation/layout/package-summary.html#Row(Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,AlignmentVertical,kotlin.Function1)">Row</a></code>, so icons inside will be placed horizontally.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> backgroundColor</code></td> |
| <td> |
| <p>The background color for the TopAppBar. Use Color.Transparent to have no color.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> contentColor</code></td> |
| <td> |
| <p>The preferred content color provided by this TopAppBar to its children. Defaults to either the matching content color for <code><a href="/reference/androidx/compose/material/package-summary.html#TopAppBar(kotlin.Function0,Modifier,kotlin.Function0,kotlin.Function1,Color,Color,Dp)">backgroundColor</a></code>, or if <code><a href="/reference/androidx/compose/material/package-summary.html#TopAppBar(kotlin.Function0,Modifier,kotlin.Function0,kotlin.Function1,Color,Color,Dp)">backgroundColor</a></code> is not a color from the theme, this will keep the same value set above this TopAppBar.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> elevation</code></td> |
| <td> |
| <p>the elevation of this TopAppBar.</p> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| <div><a name="TopAppBar(Modifier, Color, Color, Dp, androidx.compose.foundation.layout.PaddingValues, kotlin.Function1)"></a><a name="TopAppBar-Modifier-Color-Color-Dp-androidx.compose.foundation.layout.PaddingValues-kotlin.Function1-"></a><a name="topappbar"></a> |
| <h3 class="api-name" id="TopAppBar(Modifier,Color,Color,Dp,androidx.compose.foundation.layout.PaddingValues,kotlin.Function1)">TopAppBar</h3> |
| <pre class="api-signature no-pretty-print">@<a href="/reference/androidx/compose/runtime/Composable.html">Composable</a><br>public static final void <a href="/reference/androidx/compose/material/AppBarKt.html#TopAppBar(Modifier,Color,Color,Dp,androidx.compose.foundation.layout.PaddingValues,kotlin.Function1)">TopAppBar</a>(<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> modifier,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> backgroundColor,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> contentColor,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> elevation,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/foundation/layout/PaddingValues.html">PaddingValues</a> contentPadding,<br> @<a href="/reference/androidx/compose/runtime/Composable.html">Composable</a> @<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-extension-function-type/index.html">ExtensionFunctionType</a> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1<@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/foundation/layout/RowScope.html">RowScope</a>, <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a>> content<br>)</pre> |
| <p><a href="https://material.io/components/app-bars-top" class="external" target="_blank">Material Design top app bar</a>.</p> |
| <p>The top app bar displays information and actions relating to the current screen.</p> |
| <p><img alt="App bars: top image" src="https://developer.android.com/images/reference/androidx/compose/material/app-bars-top.png"></p> |
| <p>This TopAppBar has no pre-defined slots for content, allowing you to customize the layout of content inside.</p> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <thead> |
| <tr> |
| <th colspan="2">Parameters</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> modifier</code></td> |
| <td> |
| <p>The Modifier to be applied to this TopAppBar</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> backgroundColor</code></td> |
| <td> |
| <p>The background color for the TopAppBar. Use Color.Transparent to have no color.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> contentColor</code></td> |
| <td> |
| <p>The preferred content color provided by this TopAppBar to its children. Defaults to either the matching content color for <code><a href="/reference/androidx/compose/material/package-summary.html#TopAppBar(Modifier,Color,Color,Dp,androidx.compose.foundation.layout.PaddingValues,kotlin.Function1)">backgroundColor</a></code>, or if <code><a href="/reference/androidx/compose/material/package-summary.html#TopAppBar(Modifier,Color,Color,Dp,androidx.compose.foundation.layout.PaddingValues,kotlin.Function1)">backgroundColor</a></code> is not a color from the theme, this will keep the same value set above this TopAppBar.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> elevation</code></td> |
| <td> |
| <p>the elevation of this TopAppBar.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/foundation/layout/PaddingValues.html">PaddingValues</a> contentPadding</code></td> |
| <td> |
| <p>the padding applied to the content of this TopAppBar</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/compose/runtime/Composable.html">Composable</a> @<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-extension-function-type/index.html">ExtensionFunctionType</a> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1<@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/foundation/layout/RowScope.html">RowScope</a>, <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a>> content</code></td> |
| <td> |
| <p>the content of this TopAppBar.The default layout here is a <code><a href="/reference/androidx/compose/foundation/layout/package-summary.html#Row(Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,AlignmentVertical,kotlin.Function1)">Row</a></code>, so content inside will be placed horizontally.</p> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </body> |
| </html> |
