Material 3 Top App Bar in Android with Developer Documentation

byBolt UIX • • 2 min read
0

Material 3 Top App Bar

Overview of Material 3 Top App Bar

Overview

Top app bars display screen-related information and actions.

Material 3 Top App Bars, built with MaterialToolbar, support Regular (Center aligned, Small), Collapsing (Medium, Large), and Contextual variants, adhering to Material Design guidelines. This guide covers implementation, accessibility, and theming.

Material 3 Top App Bar variants

Using Top App Bars

  • Add Material Components for Android library dependency
  • Use MaterialToolbar in AppBarLayout and CoordinatorLayout for scrolling
  • Use CollapsingToolbarLayout for collapsing variants
  • Apply Theme.Material3.*.NoActionBar theme

Accessibility

  • Set android:contentDescription on MaterialToolbar, navigation icons, action items, overflow menu
  • Use app:navigationContentDescription for navigation icons
  • Set android:contentDescription in menu XML for actions
  • Add descriptions to ImageViews in collapsing bars

Behavior and Configuration

  • Configure titles, navigation icons, action menus, scrolling (e.g., lift-on-scroll, collapse)
  • Handle interactions with setNavigationOnClickListener, setOnMenuItemClickListener
  • Use ActionMode for contextual action bars
      
val toolbar = findViewById<MaterialToolbar>(R.id.topAppBar)
toolbar.setNavigationOnClickListener { /* Handle navigation */ }
toolbar.setOnMenuItemClickListener { menuItem ->
    when (menuItem.itemId) {
        R.id.favorite -> { /* Handle favorite */ true }
        else -> false
    }
}

Top App Bar Variants

  1. Regular (Center aligned/Small): Fixed, compact bar
  2. Collapsing (Medium/Large): Expands/collapses with scroll
  3. Contextual: Temporary action mode for selections

Regular Top App Bar

  • Provides fixed titles, navigation, actions
  • Suitable for most screens
  • Uses MaterialToolbar, AppBarLayout

Example

      
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <com.google.android.material.appbar.MaterialToolbar
            android:id="@+id/topAppBar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:minHeight="?attr/actionBarSize"
            android:contentDescription="@string/appbar_desc"
            app:title="@string/home"
            app:titleCentered="true"
            app:menu="@menu/top_app_bar"
            app:navigationIcon="@drawable/ic_menu_24dp"
            app:navigationContentDescription="@string/nav_menu"/>
    </com.google.android.material.appbar.AppBarLayout>
    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <!-- Content -->
    </androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
      
    
      
<!-- res/menu/top_app_bar.xml -->
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/favorite"
        android:icon="@drawable/ic_favorite_24dp"
        android:contentDescription="@string/favorite_desc"
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/more"
        android:contentDescription="@string/more_desc"
        app:showAsAction="never"/>
</menu>
      
    
      
val toolbar = findViewById<MaterialToolbar>(R.id.topAppBar)
toolbar.setNavigationOnClickListener { /* Open drawer */ }
toolbar.setOnMenuItemClickListener { menuItem ->
    when (menuItem.itemId) {
        R.id.favorite -> { /* Toggle favorite */ true }
        R.id.more -> { /* Show more options */ true }
        else -> false
    }
}

Collapsing Top App Bar

  • Expands for longer titles or imagery
  • Collapses on scroll for compact view
  • Uses CollapsingToolbarLayout

Example

      
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">
    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true">
        <com.google.android.material.appbar.CollapsingToolbarLayout
            style="?attr/collapsingToolbarLayoutLargeStyle"
            android:layout_width="match_parent"
            android:layout_height="?attr/collapsingToolbarLayoutLargeSize"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
            app:contentScrim="?attr/colorPrimary">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@drawable/landscape"
                android:scaleType="centerCrop"
                android:fitsSystemWindows="true"
                android:contentDescription="@string/landscape_desc"/>
            <com.google.android.material.appbar.MaterialToolbar
                android:id="@+id/topAppBar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@android:color/transparent"
                android:elevation="0dp"
                app:title="@string/profile"
                app:menu="@menu/top_app_bar"
                app:navigationIcon="@drawable/ic_back_24dp"
                app:navigationContentDescription="@string/back_desc"
                app:layout_collapseMode="pin"/>
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>
    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <!-- Content -->
    </androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
      
    
      
val toolbar = findViewById<MaterialToolbar>(R.id.topAppBar)
toolbar.setNavigationOnClickListener { /* Navigate back */ }
toolbar.setOnMenuItemClickListener { menuItem ->
    when (menuItem.itemId) {
        R.id.favorite -> { /* Toggle favorite */ true }
        R.id.more -> { /* Show more options */ true }
        else -> false
    }
}

Contextual Action Bar

Contextual Action Bar
  • Provides actions for selected items
  • Temporarily replaces top app bar until dismissed
  • Uses ActionMode

Example

      
<!-- res/values/themes.xml -->
<style name="Theme.App" parent="Theme.Material3.*.NoActionBar">
    <item name="windowActionModeOverlay">true</item>
    <item name="actionModeCloseDrawable">@drawable/ic_close_24dp</item>
</style>
<!-- res/menu/contextual_action_bar.xml -->
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/share"
        android:icon="@drawable/ic_share_24dp"
        android:contentDescription="@string/share_desc"
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/delete"
        android:icon="@drawable/ic_delete_24dp"
        android:contentDescription="@string/delete_desc"
        app:showAsAction="ifRoom"/>
</menu>
      
    
      
val callback = object : ActionMode.Callback {
    override fun onCreateActionMode(mode: ActionMode?, menu: Menu?): Boolean {
        menuInflater.inflate(R.menu.contextual_action_bar, menu)
        mode?.title = "1 selected"
        return true
    }
    override fun onPrepareActionMode(mode: ActionMode?, menu: Menu?): Boolean = false
    override fun onActionItemClicked(mode: ActionMode?, item: MenuItem?): Boolean {
        return when (item?.itemId) {
            R.id.share -> { /* Share selected */ true }
            R.id.delete -> { /* Delete selected */ true }
            else -> false
        }
    }
    override fun onDestroyActionMode(mode: ActionMode?) {}
}
startSupportActionMode(callback)

Anatomy and Key Properties

  • Container: Holds bar content, 4dp elevation
  • Navigation Icon: Optional, for navigation actions
  • Title: Identifies the screen
  • Action Menu: Screen-specific actions, overflow menu
  • Collapsing Variants: May include imagery or extended titles

Attributes and Usage

Element Attribute Related Method(s) Default Value Usage Description Component Type
Container android:background setBackground ?attr/colorSurface Sets background color for visual styling All variants
Title app:title setTitle null Defines the screen title All variants
Navigation app:navigationIcon setNavigationIcon null Sets navigation icon (e.g., back, menu) Regular, Collapsing
Scroll Flags app:layout_scrollFlags setScrollFlags noScroll Controls scrolling behavior Collapsing
Content Scrim app:contentScrim setContentScrim ?attr/colorPrimary Sets color when collapsed Collapsing
Collapse Mode app:layout_collapseMode None none Defines collapse behavior (e.g., pin, parallax) Collapsing
Menu app:menu setMenu null Specifies menu resource for actions All variants
Action Mode windowActionModeOverlay None false Enables overlay for contextual action bar Contextual

Styles

  • Toolbar: Widget.Material3.Toolbar
  • Collapsing: Widget.Material3.CollapsingToolbar, Medium, Large
  • Action Mode: Widget.Material3.ActionMode
  • Default theme attributes: ?attr/toolbarStyle, ?attr/collapsingToolbarLayoutStyle, ?attr/actionModeStyle

Theming Top App Bars

  • Customize colors, typography, shapes
  • Use res/values/styles.xml for theming

Example

      
<style name="Theme.App" parent="Theme.Material3.*.NoActionBar">
    <item name="colorSurface">@color/shrine_pink_100</item>
    <item name="colorOnSurface">@color/shrine_pink_900</item>
</style>
      
    
      
<style name="Theme.App" parent="Theme.Material3.*.NoActionBar">
    <item name="toolbarStyle">@style/Widget.App.Toolbar</item>
</style>
<style name="Widget.App.Toolbar" parent="Widget.Material3.Toolbar">
    <item name="titleTextColor">@color/shrine_pink_900</item>
    <item name="background">@color/shrine_pink_100</item>
</style>

Material Design Documentation

  • Adheres to Material Design guidelines for Top App Bars
  • Covers design, behavior, theming specifications
  • Includes structure, variants, accessibility requirements
  • Refer to Material Design documentation for full details

FAQ

What are Material 3 Top App Bars?

  • Bars for screen-related information and actions

How many variants are there?

  • Four types: Center aligned, Small, Medium, Large; plus Contextual

When to use Collapsing Bars?

  • Use Medium/Large for longer titles or imagery

How to make them accessible?

  • Set content descriptions for bar, icons, menu items

Can I customize appearance?

  • Yes, theme via res/values/styles.xml

How to add the Material 3 library?

  • Include Material Components for Android

Are there updates for the latest standards?

  • Reflects latest Material 3 standards for top app bars
Tags:
Rated 4.94 by 169 users • 0views

Post a Comment

Previous Post Next Post