OudsCenterAlignedTopAppBar

App bar (aka Top app bar on Material 2) is a top-aligned component that displays the screen title and provides access to key actions and navigation elements. It may include an Up button, action icons, overflow menus, search, or tabs. It provides context and controls relevant to the current view.

This small top app bar has slots for a title that is horizontally aligned to the center, navigation icon, and actions.

Background Styles

OudsCenterAlignedTopAppBar supports three background styles via the background parameter:

• Translucent (OudsTopAppBarBackground.Translucent, recommended): Semi-transparent background with blur effect, as specified in OUDS design guidelines

• Transparent (OudsTopAppBarBackground.Transparent): Fully transparent background with no blur

• Opaque (OudsTopAppBarBackground.Opaque): Solid background with full opacity for standard use cases

Using Translucent Background with Blur (Recommended)

To implement the translucent blurred top app bar as recommended by OUDS design guidelines, use OudsTopAppBarBackground.Translucent and integrate the Haze library:

1. Add Haze and Haze Blur dependencies

2. Follow Haze basic usage instructions:

• Define Haze state in the screen containing the top app bar: val hazeState = rememberHazeState()

• Define a variable to store the OUDS blur radius value: val oudsBlurRadius = OudsTheme.components.bar.effect.backgroundBlur.dp

• Use hazeBlur Modifier on OudsCenterAlignedTopAppBar providing OUDS blur radius: Modifier.hazeBlur(input = HazeInput.Sources(hazeState), style = HazeBlurStyle { blurRadius = oudsBlurRadius }),

• Apply hazeSource Modifier on the content that scrolls behind the top app bar: Modifier.hazeSource(state = hazeState)

1. 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 OudsCenterAlignedTopAppBar.

Using Transparent Background

When using OudsTopAppBarBackground.Transparent, ensure sufficient contrast between the top app bar content and the scrolling content behind for accessibility.

Design

Parameters

Samples

OudsCenterAlignedTopAppBar(
    title = "Title",
    background = OudsTopAppBarBackground.Opaque,
    navigationIcon = OudsTopAppBarNavigationIcon.Back {},
    actions = listOf(
        OudsTopAppBarAction.Icon(Icons.Outlined.FavoriteBorder, "") {},
        OudsTopAppBarAction.Avatar(monogram = 'A', color = Color.White, backgroundColor = Color(0xff247a85), "") {}
    )
)

OudsTopAppBar(
    title = "Title",
    background = OudsTopAppBarBackground.Opaque,
    navigationIcon = OudsTopAppBarNavigationIcon.Back {},
    actions = listOf(
        OudsTopAppBarAction.Icon(
            painter = rememberRainbowHeartPainter(),
            contentDescription = "",
            tinted = false,
            onClick = {}
        )
    )
)

import com.orange.ouds.core.component.OudsTopAppBarBackground

OudsCenterAlignedTopAppBar(title = title, modifier = modifier, background = if (translucent) OudsTopAppBarBackground.Translucent else OudsTopAppBarBackground.Opaque, navigationIcon = navigationIcon, actions = actions, expandedHeight = expandedHeight, windowInsets = windowInsets, scrollBehavior = scrollBehavior)

App bar (aka Top app bar on Material 2) is a top-aligned component that displays the screen title and provides access to key actions and navigation elements. It may include an Up button, action icons, overflow menus, search, or tabs. It provides context and controls relevant to the current view.

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

OudsCenterAlignedTopAppBar 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 OudsCenterAlignedTopAppBar with translucent parameter set to true and follow these steps:

1. Add Haze and Haze Blur dependencies

2. Follow Haze basic usage instructions:

• Define Haze state in the screen containing the top app bar: val hazeState = rememberHazeState()

• Define a variable to store the OUDS blur radius value: val oudsBlurRadius = OudsTheme.components.bar.effect.backgroundBlur.dp

• Use hazeBlur Modifier on OudsCenterAlignedTopAppBar providing OUDS blur radius: Modifier.hazeBlur(input = HazeInput.Sources(hazeState), style = HazeBlurStyle { blurRadius = oudsBlurRadius }),

• Apply hazeSource Modifier on the content that scrolls behind the top app bar: Modifier.hazeSource(state = hazeState)

1. 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 OudsCenterAlignedTopAppBar.

Design

Parameters

Samples

OudsCenterAlignedTopAppBar(
    title = "Title",
    background = OudsTopAppBarBackground.Opaque,
    navigationIcon = OudsTopAppBarNavigationIcon.Back {},
    actions = listOf(
        OudsTopAppBarAction.Icon(Icons.Outlined.FavoriteBorder, "") {},
        OudsTopAppBarAction.Avatar(monogram = 'A', color = Color.White, backgroundColor = Color(0xff247a85), "") {}
    )
)

OudsTopAppBar(
    title = "Title",
    background = OudsTopAppBarBackground.Opaque,
    navigationIcon = OudsTopAppBarNavigationIcon.Back {},
    actions = listOf(
        OudsTopAppBarAction.Icon(
            painter = rememberRainbowHeartPainter(),
            contentDescription = "",
            tinted = false,
            onClick = {}
        )
    )
)