core/com.orange.ouds.core.component/OudsTopAppBar

OudsTopAppBar

fun OudsTopAppBar(title: String, modifier: Modifier = Modifier, translucent: Boolean = false, navigationIcon: OudsTopAppBarNavigationIcon? = null, actions: List<OudsTopAppBarAction> = emptyList(), expandedHeight: Dp = TopAppBarDefaults.TopAppBarExpandedHeight, windowInsets: WindowInsets = TopAppBarDefaults.windowInsets, scrollBehavior: TopAppBarScrollBehavior? = null)

Top app bars display information and actions at the top of a screen.

This small top app bar has slots for a title, navigation icon, and actions.

OudsTopAppBar default appearance is opaque but, if you need a translucent blurred top app bar as specified on OUDS design side, you can implement it in your app with the help of Haze library. To do this, use OudsTopAppBar with translucent parameter set to true and follow these steps:

Add Haze dependency
Follow Haze basic usage instructions:

Define Haze state in the screen containing the top app bar: val hazeState = rememberHazeState()
Use hazeEffect Modifier on OudsTopAppBar providing OUDS blur radius: Modifier.hazeEffect(state = hazeState, style = HazeStyle(tint = null, blurRadius = OudsTheme.components.bar.blurRadius.dp)),
Apply hazeSource Modifier on the content that scrolls behind the top app bar: Modifier.hazeSource(state = hazeState)

As your screen content needs to scroll behind the top app bar, you'll probably need to add an additional bottom padding that will have the height of OudsTopAppBar.

Design

Guidelines	unified-design-system.orange.com
Version	1.0.0

Parameters

title

The title to be displayed in the top app bar.

modifier

The Modifier to be applied to this top app bar.

translucent

Whether the top app bar should be translucent.

navigationIcon

The navigation icon displayed at the start of the top app bar.

actions

The actions displayed at the end of the top app bar. These can be instances of OudsTopAppBarAction.Icon or OudsTopAppBarAction.Avatar. The default layout here is a Row, so actions will be placed horizontally. The maximum recommended number of actions is three. Please use a dropdown menu if you need more than three actions.

expandedHeight

This app bar's height. When a specified scrollBehavior causes the app bar to collapse or expand, this value will represent the maximum height that the bar will be allowed to expand. This value must be specified and finite, otherwise it will be ignored and replaced with TopAppBarDefaults.TopAppBarExpandedHeight.

windowInsets

A window insets that app bar will respect.

scrollBehavior

A TopAppBarScrollBehavior which holds various offset values that will be applied by this top app bar to set up its height and colors. A scroll behavior is designed to work in conjunction with a scrolled content to change the top app bar appearance as the content scrolls. See TopAppBarScrollBehavior.nestedScrollConnection.

Samples

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.FavoriteBorder
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.PreviewLightDark
import com.orange.ouds.core.component.OudsCenterAlignedTopAppBar
import com.orange.ouds.core.component.OudsLargeTopAppBar
import com.orange.ouds.core.component.OudsMediumTopAppBar
import com.orange.ouds.core.component.OudsTopAppBar
import com.orange.ouds.core.component.OudsTopAppBarAction
import com.orange.ouds.core.component.OudsTopAppBarNavigationIcon
import com.orange.ouds.core.utilities.OudsPreview

fun main() { 
   //sampleStart 
   OudsTopAppBar(
    title = "Title",
    navigationIcon = OudsTopAppBarNavigationIcon.Back {},
    actions = listOf(
        OudsTopAppBarAction.Icon(Icons.Outlined.FavoriteBorder, "") {},
        OudsTopAppBarAction.Avatar(monogram = 'A', color = Color.White, backgroundColor = Color(0xffd5204e), "") {}
    )
) 
   //sampleEnd
}