spark/com.adevinta.spark.components.appbar

Package-level declarations

App bars display navigation controls and key actions at the top or bottom of a screen. Use them to give users consistent access to navigation and contextual actions across your app.

Top App Bars

Four variants are available, differing in title size and collapsing behaviour.

Variant	Height (expanded)	Title alignment	Collapses on scroll
`TopAppBar`	64 dp	Start	Yes (hides entirely)
`CenterAlignedTopAppBar`	64 dp	Center	Yes (hides entirely)
`MediumTopAppBar`	112 dp	Start (second row)	Yes (collapses to 64 dp)
`LargeTopAppBar`	152 dp	Start (second row)	Yes (collapses to 64 dp)

All four share the same parameters:

Parameter	Description
`title`	Composable shown as the screen title
`navigationIcon`	Leading icon, typically an `IconButton` with `UpNavigationIcon` or a menu icon
`actions`	Trailing `IconButton`s laid out in a `Row`
`scrollBehavior`	Controls collapse animation; provide via `TopAppBarDefaults`
`colors`	Override colours via the matching `TopAppBarSparkDefaults` factory
`windowInsets`	Insets the bar respects; defaults to `TopAppBarDefaults.windowInsets`

TopAppBar

Single-row bar with a start-aligned title. The bar hides entirely when the user scrolls down.

val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()

Scaffold(
    modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
    topBar = {
        TopAppBar(
            title = { Text("Listings") },
            navigationIcon = {
                UpNavigationIcon(onClick = onNavigateUp)
            },
            actions = {
                IconButton(onClick = onSearch) {
                    Icon(SparkIcons.SearchFill, contentDescription = "Search")
                }
            },
            scrollBehavior = scrollBehavior,
        )
    },
) { padding -> /* content */ }

CenterAlignedTopAppBar

Same as TopAppBar but the title is centred horizontally.

CenterAlignedTopAppBar(
    title = { Text("My Profile") },
    navigationIcon = {
        UpNavigationIcon(onClick = onNavigateUp)
    },
)

MediumTopAppBar

Two-row bar: navigation and actions on the first row, large title on the second. The title row collapses into the first row when scrolled.

val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()

Scaffold(
    modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
    topBar = {
        MediumTopAppBar(
            title = { Text("Search results") },
            navigationIcon = {
                UpNavigationIcon(onClick = onNavigateUp)
            },
            scrollBehavior = scrollBehavior,
        )
    },
) { padding -> /* content */ }

LargeTopAppBar

Same two-row pattern as MediumTopAppBar with a taller expanded height (152 dp) suited for prominent section headers.

val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()

LargeTopAppBar(
    title = { Text("Favourites") },
    navigationIcon = {
        UpNavigationIcon(onClick = onNavigateUp)
    },
    scrollBehavior = scrollBehavior,
)

Colours

Each variant has a matching colour factory on TopAppBarSparkDefaults. The container colour animates to a tonal-elevated surface when content scrolls underneath the bar.

TopAppBar(
    title = { Text("Custom colours") },
    colors = TopAppBarSparkDefaults.topAppBarColors(
        containerColor = SparkTheme.colors.primaryContainer,
        titleContentColor = SparkTheme.colors.onPrimaryContainer,
    ),
)

Factory	Variant
`TopAppBarSparkDefaults.topAppBarColors()`	`TopAppBar`
`TopAppBarSparkDefaults.centerAlignedTopAppBarColors()`	`CenterAlignedTopAppBar`
`TopAppBarSparkDefaults.mediumTopAppBarColors()`	`MediumTopAppBar`
`TopAppBarSparkDefaults.largeTopAppBarColors()`	`LargeTopAppBar`

BottomAppBar

A bottom bar for navigation controls and a primary action. It optionally hosts a FloatingActionButton at the trailing end.

BottomAppBar(
    actions = {
        IconButton(onClick = onEdit) {
            Icon(SparkIcons.PenOutline, contentDescription = "Edit")
        }
        IconButton(onClick = onShare) {
            Icon(SparkIcons.Share, contentDescription = "Share")
        }
    },
    floatingActionButton = {
        FloatingActionButton(
            onClick = onAdd,
            containerColor = BottomAppBarDefaults.bottomAppBarFabColor,
            elevation = FloatingActionButtonDefaults.bottomAppBarFabElevation(),
            icon = SparkIcons.Plus,
            contentDescription = "Add",
        )
    },
)

Scroll behaviour

BottomAppBar gains elevation when the user has scrolled down and there is content above to return to. Use BottomAppBarSparkDefaults.bottomAppBarScrollBehavior() and connect it via nestedScroll.

val bottomBarBehavior = BottomAppBarSparkDefaults.bottomAppBarScrollBehavior()

Scaffold(
    modifier = Modifier.nestedScroll(bottomBarBehavior.nestedScrollConnection),
    bottomBar = {
        BottomAppBar(
            scrollBehavior = bottomBarBehavior,
            actions = {
                IconButton(onClick = onCancel) {
                    Icon(SparkIcons.ArrowLeft, contentDescription = "Cancel")
                }
            },
        )
    },
) { padding -> /* content */ }

NavigationBar

A persistent bottom destination switcher. Use it with three to five NavigationBarItems.

var selected by remember { mutableIntStateOf(0) }

NavigationBar {
    NavigationBarItem(
        icon = SparkIcons.HomeFill,
        label = { Text("Home") },
        selected = selected == 0,
        onClick = { selected = 0 },
    )
    NavigationBarItem(
        icon = SparkIcons.SearchFill,
        label = { Text("Search") },
        selected = selected == 1,
        onClick = { selected = 1 },
    )
    NavigationBarItem(
        icon = SparkIcons.AccountFill,
        label = { Text("Profile") },
        selected = selected == 2,
        onClick = { selected = 2 },
    )
}

NavigationBarItem always shows the label for the selected item. Set alwaysShowLabel = false to hide labels on unselected items when space is limited.

Types

BottomAppBarSparkDefaults

object BottomAppBarSparkDefaults

Contains default values used for the bottom app bar implementations.

SparkBottomAppBarScrollBehavior

class SparkBottomAppBarScrollBehavior(val state: BottomAppBarState, val snapAnimationSpec: AnimationSpec<Float>?, val flingAnimationSpec: DecayAnimationSpec<Float>?, val canScroll: () -> Boolean = { true }) : BottomAppBarScrollBehavior

Scroll behavior for BottomAppBar that implements a pinned behavior similar to TopAppBar but with bottom-specific elevation logic. The bottom app bar stays pinned at the bottom and shows elevation when content has been scrolled up from a scrolled-down position (contentOffset > 0), indicating there's content above the current scroll position.

TopAppBarColors

@Stable

class TopAppBarColors

Represents the colors used by a top app bar in different states. This implementation animates the container color according to the top app bar scroll state. It does not animate the leading, headline, or trailing colors.

TopAppBarSparkDefaults

object TopAppBarSparkDefaults

Contains default values used for the top app bar implementations.

Functions

BottomAppBar

@Composable

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

@Composable

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

Material Design bottom app bar.

CenterAlignedTopAppBar

@Composable

fun CenterAlignedTopAppBar(title: @Composable () -> Unit, modifier: Modifier = Modifier, navigationIcon: @Composable () -> Unit = {}, actions: @Composable RowScope.() -> Unit = {}, windowInsets: WindowInsets = TopAppBarDefaults.windowInsets, colors: TopAppBarColors = TopAppBarSparkDefaults.centerAlignedTopAppBarColors(), scrollBehavior: TopAppBarScrollBehavior? = null)

Spark center-aligned small top app bar.

LargeTopAppBar

@Composable

fun LargeTopAppBar(title: @Composable () -> Unit, modifier: Modifier = Modifier, navigationIcon: @Composable () -> Unit = {}, actions: @Composable RowScope.() -> Unit = {}, windowInsets: WindowInsets = TopAppBarDefaults.windowInsets, colors: TopAppBarColors = TopAppBarSparkDefaults.largeTopAppBarColors(), scrollBehavior: TopAppBarScrollBehavior? = null)

Spark large top app bar.

MediumTopAppBar

@Composable

fun MediumTopAppBar(title: @Composable () -> Unit, modifier: Modifier = Modifier, navigationIcon: @Composable () -> Unit = {}, actions: @Composable RowScope.() -> Unit = {}, windowInsets: WindowInsets = TopAppBarDefaults.windowInsets, colors: TopAppBarColors = TopAppBarSparkDefaults.mediumTopAppBarColors(), scrollBehavior: TopAppBarScrollBehavior? = null)

Spark medium top app bar.

NavigationBar

@Composable

fun NavigationBar(modifier: Modifier = Modifier, windowInsets: WindowInsets = NavigationBarDefaults.windowInsets, elevation: Dp = NavigationBarDefaults.Elevation, content: @Composable RowScope.() -> Unit)

Material Design bottom navigation bar.

NavigationBarItem

@Composable

fun RowScope.NavigationBarItem(selected: Boolean, onClick: () -> Unit, icon: SparkIcon, modifier: Modifier = Modifier, enabled: Boolean = true, label: @Composable () -> Unit? = null, alwaysShowLabel: Boolean = true, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() })

Material Design navigation bar item.

rememberTopAppBarState

@Composable

fun rememberTopAppBarState(initialHeightOffsetLimit: Float = -Float.MAX_VALUE, initialHeightOffset: Float = 0.0f, initialContentOffset: Float = 0.0f): TopAppBarState

Creates a TopAppBarState that is remembered across compositions.

TopAppBar

@Composable

fun TopAppBar(title: @Composable () -> Unit, modifier: Modifier = Modifier, navigationIcon: @Composable () -> Unit = {}, actions: @Composable RowScope.() -> Unit = {}, windowInsets: WindowInsets = TopAppBarDefaults.windowInsets, colors: TopAppBarColors = TopAppBarSparkDefaults.topAppBarColors(), scrollBehavior: TopAppBarScrollBehavior? = null)

Spark small top app bar.