Import
View-based framework
Before you can use components from the Backbase Design System SDK, make sure you've installed the package and import it at the top of your file.
import com.google.android.material.appbar.AppBarLayout
import com.google.android.material.appbar.MaterialToolbar
import com.google.android.material.appbar.CollapsingToolbarLayout
Usage
Basic usage
Apply AppBarLayout styles through XML style attributes to get consistent theming for different screen contexts.
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="?appBarLayoutStyle">
<com.google.android.material.appbar.MaterialToolbar
android:layout_width="match_parent"
android:layout_height="?actionBarSize" />
</com.google.android.material.appbar.AppBarLayout>
Prominent AppBarLayout
Use prominent AppBarLayout with CollapsingToolbarLayout for screens that need expanded headers.
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="?appBarLayoutStyle">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="?prominentAppbarLayoutHeight"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<com.google.android.material.appbar.MaterialToolbar
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
app:layout_collapseMode="pin" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
Configuration
|
Style |
Type |
Description |
|---|---|---|
|
appBarLayoutFoundationStyle |
Style reference |
Foundation screen style (alias to default) |
|
appBarLayoutModalPageStyle |
Style reference |
Modal page screen style |
|
appBarLayoutModalStyle |
Style reference |
Modal screen style |
|
appBarLayoutStyle |
Style reference |
Default screen style |
|
appBarLayoutTabHeaderStyle |
Style reference |
Tab header screen style |
|
tabHeaderAppBarLayoutStyle |
Style reference |
Tab header alias style |
appBarLayoutFoundationStyle
The appBarLayoutFoundationStyle provides styling for foundation screens and is an alias to the default AppBarLayout style.
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="?appBarLayoutFoundationStyle" />
appBarLayoutModalPageStyle
The appBarLayoutModalPageStyle provides styling specifically designed for modal page contexts with appropriate background and text colors.
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="?appBarLayoutModalPageStyle" />
appBarLayoutModalStyle
The appBarLayoutModalStyle provides styling specifically designed for modal screen contexts with modal-appropriate theming.
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="?appBarLayoutModalStyle" />
appBarLayoutStyle
The appBarLayoutStyle provides the default styling for regular screen contexts with standard background and elevation settings.
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="?appBarLayoutStyle" />
appBarLayoutTabHeaderStyle
The appBarLayoutTabHeaderStyle provides styling specifically designed for tab header contexts with gradient background and specialized tab styling.
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="?appBarLayoutTabHeaderStyle" />
tabHeaderAppBarLayoutStyle
The tabHeaderAppBarLayoutStyle provides an alias to the tab header AppBarLayout style.
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="?tabHeaderAppBarLayoutStyle" />
Styling
Screen type styles
The AppBarLayout styles are organized by screen type to provide appropriate theming for different contexts:
- Default: Standard screens with neutral background and zero elevation
- Modal: Modal dialogs with modal-specific background colors
- Modal Page: Modal pages with page-specific background colors
- Tab Header: Tab navigation screens with gradient backgrounds
- Foundation: Foundation screens (alias to default style)
<!-- Different screen type examples -->
<com.google.android.material.appbar.AppBarLayout
style="?appBarLayoutStyle" /> <!-- Default -->
<com.google.android.material.appbar.AppBarLayout
style="?appBarLayoutModalStyle" /> <!-- Modal -->
<com.google.android.material.appbar.AppBarLayout
style="?appBarLayoutTabHeaderStyle" /> <!-- Tab Header -->
Theme overlays
Each AppBarLayout style includes a material theme overlay that customizes child components:
- Toolbar styling: Custom toolbar appearance and colors
- Tab styling: Tab layout colors and indicators
- Search view styling: Search component theming
- Action menu styling: Menu text and icon colors
<!-- Theme overlay automatically applies to child components -->
<com.google.android.material.appbar.AppBarLayout
style="?appBarLayoutModalStyle">
<!-- Toolbar automatically gets modal theming -->
<com.google.android.material.appbar.MaterialToolbar
android:layout_width="match_parent"
android:layout_height="?actionBarSize" />
</com.google.android.material.appbar.AppBarLayout>
Prominent AppBarLayout height
The design system defines a specific height for prominent AppBarLayout configurations:
<!-- Prominent height is 164dp -->
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_height="?prominentAppbarLayoutHeight" />
Design tokens
The AppBarLayout styles use design tokens for consistent theming:
- Colors: Background colors use semantic tokens colorSubHeaderDefaultBackground, colorSubHeaderModalBackground)
- Elevation: Zero elevation for flat design aesthetic
- Typography: Action menu text uses textAppearanceSubtitle2Medium
- Spacing: Action bar size set to 64dp for consistent touch targets
- Layout: Prominent height defined as 164dp for expanded headers
<!-- Styles automatically apply design tokens -->
<com.google.android.material.appbar.AppBarLayout
style="?appBarLayoutStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content" />