TopAppBar

Functions summary

Unit
@Composable
TopAppBar(
    modifier: Modifier,
    backgroundColor: Color,
    contentColor: Color,
    elevation: Dp,
    contentPadding: PaddingValues,
    content: @Composable RowScope.() -> Unit
)

Material Design top app bar
Cmn
Unit
@Composable
TopAppBar(
    title: @Composable () -> Unit,
    modifier: Modifier,
    navigationIcon: (@Composable () -> Unit)?,
    actions: @Composable RowScope.() -> Unit,
    backgroundColor: Color,
    contentColor: Color,
    elevation: Dp
)

Material Design top app bar
Cmn
Unit
@Composable
TopAppBar(
    windowInsets: WindowInsets,
    modifier: Modifier,
    backgroundColor: Color,
    contentColor: Color,
    elevation: Dp,
    contentPadding: PaddingValues,
    content: @Composable RowScope.() -> Unit
)

Material Design top app bar
Cmn
Unit
@Composable
TopAppBar(
    title: @Composable () -> Unit,
    windowInsets: WindowInsets,
    modifier: Modifier,
    navigationIcon: (@Composable () -> Unit)?,
    actions: @Composable RowScope.() -> Unit,
    backgroundColor: Color,
    contentColor: Color,
    elevation: Dp
)

Material Design top app bar
Cmn

Functions

TopAppBar

Cmn 
@Composable
fun TopAppBar(
    modifier: Modifier = Modifier,
    backgroundColor: Color = MaterialTheme.colors.primarySurface,
    contentColor: Color = contentColorFor(backgroundColor),
    elevation: Dp = AppBarDefaults.TopAppBarElevation,
    contentPadding: PaddingValues = AppBarDefaults.ContentPadding,
    content: @Composable RowScope.() -> Unit
): Unit

Material Design top app bar

The top app bar displays information and actions relating to the current screen.

App bars: top image

This TopAppBar has no pre-defined slots for content, allowing you to customize the layout of content inside. See the other TopAppBar overload for a TopAppBar that has opinionated slots for title, navigation icon, and trailing actions.

The LocalContentAlpha inside this TopAppBar is ContentAlpha.medium - this is the default for trailing and overflow icons. It is recommended that any text, and leading icons at the start of the TopAppBar use ContentAlpha.high instead.

Parameters
modifier: Modifier = Modifier

The Modifier to be applied to this TopAppBar
backgroundColor: Color = MaterialTheme.colors.primarySurface

The background color for the TopAppBar. Use Color.Transparent to have no color.
contentColor: Color = contentColorFor(backgroundColor)

The preferred content color provided by this TopAppBar to its children. Defaults to either the matching content color for backgroundColor, or if backgroundColor is not a color from the theme, this will keep the same value set above this TopAppBar.
elevation: Dp = AppBarDefaults.TopAppBarElevation

the elevation of this TopAppBar.
contentPadding: PaddingValues = AppBarDefaults.ContentPadding

the padding applied to the content of this TopAppBar
content: @Composable RowScope.() -> Unit

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

TopAppBar

Cmn 
@Composable
fun TopAppBar(
    title: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    navigationIcon: (@Composable () -> Unit)? = null,
    actions: @Composable RowScope.() -> Unit = {},
    backgroundColor: Color = MaterialTheme.colors.primarySurface,
    contentColor: Color = contentColorFor(backgroundColor),
    elevation: Dp = AppBarDefaults.TopAppBarElevation
): Unit

Material Design top app bar

The top app bar displays information and actions relating to the current screen.

App bars: top image

This TopAppBar has slots for a title, navigation icon, and actions. Note that the title 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.

import androidx.compose.material.AppBarDefaults
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Menu

TopAppBar(
    windowInsets = AppBarDefaults.topAppBarWindowInsets,
    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")
        }
    },
)
Parameters
title: @Composable () -> Unit

The title to be displayed in the center of the TopAppBar
modifier: Modifier = Modifier

The Modifier to be applied to this TopAppBar
navigationIcon: (@Composable () -> Unit)? = null

The navigation icon displayed at the start of the TopAppBar. This should typically be an IconButton or IconToggleButton.
actions: @Composable RowScope.() -> Unit = {}

The actions displayed at the end of the TopAppBar. This should typically be IconButtons. The default layout here is a Row, so icons inside will be placed horizontally.
backgroundColor: Color = MaterialTheme.colors.primarySurface

The background color for the TopAppBar. Use Color.Transparent to have no color.
contentColor: Color = contentColorFor(backgroundColor)

The preferred content color provided by this TopAppBar to its children. Defaults to either the matching content color for backgroundColor, or if backgroundColor is not a color from the theme, this will keep the same value set above this TopAppBar.
elevation: Dp = AppBarDefaults.TopAppBarElevation

the elevation of this TopAppBar.

TopAppBar

Cmn 
@Composable
fun TopAppBar(
    windowInsets: WindowInsets,
    modifier: Modifier = Modifier,
    backgroundColor: Color = MaterialTheme.colors.primarySurface,
    contentColor: Color = contentColorFor(backgroundColor),
    elevation: Dp = AppBarDefaults.TopAppBarElevation,
    contentPadding: PaddingValues = AppBarDefaults.ContentPadding,
    content: @Composable RowScope.() -> Unit
): Unit

Material Design top app bar

The top app bar displays information and actions relating to the current screen.

App bars: top image

This particular overload provides ability to specify WindowInsets. Recommended value can be found in AppBarDefaults.topAppBarWindowInsets.

This TopAppBar has no pre-defined slots for content, allowing you to customize the layout of content inside. See the other TopAppBar overload for a TopAppBar that has opinionated slots for title, navigation icon, and trailing actions.

The LocalContentAlpha inside this TopAppBar is ContentAlpha.medium - this is the default for trailing and overflow icons. It is recommended that any text, and leading icons at the start of the TopAppBar use ContentAlpha.high instead.

Parameters
windowInsets: WindowInsets

a window insets that app bar will respect.
modifier: Modifier = Modifier

The Modifier to be applied to this TopAppBar
backgroundColor: Color = MaterialTheme.colors.primarySurface

The background color for the TopAppBar. Use Color.Transparent to have no color.
contentColor: Color = contentColorFor(backgroundColor)

The preferred content color provided by this TopAppBar to its children. Defaults to either the matching content color for backgroundColor, or if backgroundColor is not a color from the theme, this will keep the same value set above this TopAppBar.
elevation: Dp = AppBarDefaults.TopAppBarElevation

the elevation of this TopAppBar.
contentPadding: PaddingValues = AppBarDefaults.ContentPadding

the padding applied to the content of this TopAppBar
content: @Composable RowScope.() -> Unit

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

TopAppBar

Cmn 
@Composable
fun TopAppBar(
    title: @Composable () -> Unit,
    windowInsets: WindowInsets,
    modifier: Modifier = Modifier,
    navigationIcon: (@Composable () -> Unit)? = null,
    actions: @Composable RowScope.() -> Unit = {},
    backgroundColor: Color = MaterialTheme.colors.primarySurface,
    contentColor: Color = contentColorFor(backgroundColor),
    elevation: Dp = AppBarDefaults.TopAppBarElevation
): Unit

Material Design top app bar

The top app bar displays information and actions relating to the current screen.

App bars: top image

This particular overload provides ability to specify WindowInsets. Recommended value can be found in AppBarDefaults.topAppBarWindowInsets.

This TopAppBar has slots for a title, navigation icon, and actions. Note that the title 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.

import androidx.compose.material.AppBarDefaults
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Menu

TopAppBar(
    windowInsets = AppBarDefaults.topAppBarWindowInsets,
    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")
        }
    },
)
Parameters
title: @Composable () -> Unit

The title to be displayed in the center of the TopAppBar
windowInsets: WindowInsets

a window insets that app bar will respect.
modifier: Modifier = Modifier

The Modifier to be applied to this TopAppBar
navigationIcon: (@Composable () -> Unit)? = null

The navigation icon displayed at the start of the TopAppBar. This should typically be an IconButton or IconToggleButton.
actions: @Composable RowScope.() -> Unit = {}

The actions displayed at the end of the TopAppBar. This should typically be IconButtons. The default layout here is a Row, so icons inside will be placed horizontally.
backgroundColor: Color = MaterialTheme.colors.primarySurface

The background color for the TopAppBar. Use Color.Transparent to have no color.
contentColor: Color = contentColorFor(backgroundColor)

The preferred content color provided by this TopAppBar to its children. Defaults to either the matching content color for backgroundColor, or if backgroundColor is not a color from the theme, this will keep the same value set above this TopAppBar.
elevation: Dp = AppBarDefaults.TopAppBarElevation

the elevation of this TopAppBar.