AppBar¶

AppBar is the top navigation bar or header component in CortenaUI. This component is purely created by detecting window insets (specifically operating system paddings) so it perfectly adapts to the Edge-to-Edge design.

Experimental API

This component is annotated with @ExperimentalComponentsApi and its API is subject to change.

Concept¶

Unlike a standard TopAppBar which is unaware of insets unless modified, the Cortena AppBar proactively reads the OS's WindowInsets.statusBars height and adds it to its default size parameter (APP_BAR_HEIGHT_DEFAULT which is 56dp). This means you simply place your layout inside the AppBar, and it will automatically shift down, safely avoiding the notch (the phone's top camera) overlaps.

API Reference¶

@Composable
fun AppBar(
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit = {}
)

Parameters¶

Name	Data Type	Description
`modifier`	`Modifier`	Standard Compose modifier. Typically filled with modifiers like additional vertical padding or background color. Important: If providing Modifier.background, the rendered color will also draw into the statusBar boundaries (overlap).
`content`	`@Composable () -> Unit`	The content elements of the AppBar, such as Title text, Back button, etc.

Example¶

AppBar(
    modifier = Modifier.background(Color(LocalColors.current.surface))
) {
    // Insert a Row that renders the title
    SafeArea {
        Text("Settings List")
    }
}