Skip to content

Top App Bar

顶部应用栏 显示与当前屏幕相关的信息和操作。

"Top app bar on a screen"

设计和 API 文档

使顶部应用栏可访问

Android 的顶部应用栏组件 API 提供了对导航图标、操作项、溢出菜单等的支持,以告知用户每个操作的功能。 虽然这些是可选的,但强烈建议使用它们。

内容描述

在使用导航、操作项和其他顶部应用栏元素的图标时,您应该为它们设置内容描述,以便屏幕阅读器如 TalkBack 能够宣布它们的目的或操作。

对于顶部应用栏的整体内容描述,设置 android:contentDescription 或使用 MaterialToolbar 上的 setContentDescription 方法。

对于导航图标,可以通过app:navigationContentDescription 属性或 setNavigationContentDescription 方法实现。

对于操作项和溢出菜单中的项,内容描述需要在菜单中设置:

xml
<menu ...>
    ...
    <item
          ...
          android:contentDescription="@string/content_description_one" />
    <item
          ...
          android:contentDescription="@string/content_description_two" />
</menu>

对于可折叠顶部应用栏中的图像,设置 android:contentDescription 或使用 ImageViewsetContentDescription 方法。

类型

顶部应用栏有四种类型:1. 居中对齐,2. 小号,3. 中号,4. 大号。

从实现的角度来看,居中对齐和小号类型可以归类为 常规顶部应用栏, 而中号和大号类型可以归类为 可折叠顶部应用栏

Types of top app bars

API 和源代码:

常规顶部应用栏

顶部应用栏提供与当前屏幕相关的内容和操作。它用于品牌、屏幕标题、导航和操作。

小号顶部应用栏示例

以下示例显示了一个带有页面标题、导航图标、两个操作和一个溢出菜单的小号顶部应用栏。

Small top app bar with light purple background, grey icons, and page title

在布局中:

xml
<androidx.coordinatorlayout.widget.CoordinatorLayout
    ...
    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"
            app:title="@string/page_title"
            app:menu="@menu/top_app_bar"
            app:navigationIcon="@drawable/ic_close_24dp" />

    </com.google.android.material.appbar.AppBarLayout>

    <!-- Note: A RecyclerView can also be used -->
    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <!-- Scrollable content -->

    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

⭐ 注意

为了使您的顶部应用栏在系统字体设置增加时能够变高, 您可以在 MaterialToolbar 上使用 android:layout_height="wrap_content" + android:minHeight="?attr/actionBarSize",如上例所示。

@menu/top_app_bar.xml 中:

xml
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/edit"
        android:title="@string/edit"
        android:contentDescription="@string/content_description_search"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/favorite"
        android:icon="@drawable/ic_favorite_24dp"
        android:title="@string/favorite"
        android:contentDescription="@string/content_description_favorite"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/more"
        android:title="@string/more"
        android:contentDescription="@string/content_description_more"
        app:showAsAction="never" />

</menu>

在菜单/导航图标 icon drawables中:

xml
<vector
    ...
    android:tint="?attr/colorControlNormal">
    ...
</vector>

在代码中:

kotlin
topAppBar.setNavigationOnClickListener {
    // 处理导航图标按下
}

topAppBar.setOnMenuItemClickListener { menuItem ->
    when (menuItem.itemId) {
        R.id.edit -> {
            // 处理编辑文本按下
            true
        }
        R.id.favorite -> {
            // 处理收藏图标按下
            true
        }
        R.id.more -> {
            // 处理更多项(在溢出菜单中)按下
            true
        }
        else -> false
    }
}

⭐ 注意

上述示例是推荐的方法,为了使其工作,您需要使用包含 NoActionBar 段的 Theme.Material3.* 主题, 例如 Theme.Material3.Light.NoActionBar。 如果不是,则会在当前 Activity 窗口中添加一个操作栏。 MaterialToolbar 可以设置为支持操作栏,并因此接收各种 Activity 回调,如本 指南 所示。

将滚动行为应用于顶部应用栏

以下示例显示了与内容同高度的顶部应用栏。在滚动时,它会提高高度并允许内容在其后面滚动。

在布局中:

xml
<androidx.coordinatorlayout.widget.CoordinatorLayout
    ...>
    <com.google.android.material.appbar.AppBarLayout
        ...
        app:liftOnScroll="true"> // [!code focus]
        <com.google.android.material.appbar.MaterialToolbar
            ...
            />
    </com.google.android.material.appbar.AppBarLayout>
    ...
</androidx.coordinatorlayout.widget.CoordinatorLayout>

⭐ 注意

如果您的滚动视图(RecyclerViewListView 等)嵌套在另一个视图中(例如 SwipeRefreshLayout),您应该确保在 AppBarLayout 上设置 app:liftOnScrollTargetViewId 为滚动视图的 ID。 这将确保 AppBarLayout 使用正确的视图来确定是否应该提升,并有助于避免闪烁问题。

以下示例显示了在向上滚动时消失,在向下滚动时出现的顶部应用栏。

在布局中:

xml
<androidx.coordinatorlayout.widget.CoordinatorLayout
    ...>
    <com.google.android.material.appbar.AppBarLayout
        ...>
        <com.goole.android.material.appbar.MaterialToolbar
            ...
            app:layout_scrollFlags="scroll|enterAlways|snap"
            />
    </com.google.android.material.appbar.AppBarLayout>
    ...
</androidx.coordinatorlayout.widget.CoordinatorLayout>

可选地,您可以通过设置滚动效果来更改应用栏消失和出现时的样式。 默认情况下,设置为 none 的滚动效果会将与滚动内容同步平移应用栏。 以下选项显示了设置 compress 滚动效果,该效果会剪裁顶部应用栏,直到它与屏幕顶部对齐:

在布局中:

xml
<androidx.coordinatorlayout.widget.CoordinatorLayout
    ...>
    <com.google.android.material.appbar.AppBarLayout
        ...>
        <com.google.android.material.appbar.MaterialToolbar
            ...
            app:layout_scrollFlags="scroll|enterAlways|snap"
            app:layout_scrollEffect="compress"
            />
    </com.google.android.material.appbar.AppBarLayout>
    ...
</androidx.coordinatorlayout.widget.CoordinatorLayout>

状态栏和边缘到边缘 (edge-to-edge)

Small top app bar with edge-to-edge status bar

现代顶部应用栏的常见配置,如上所示,是与状态栏共享无缝颜色。 实现这一点的最佳方法是遵循 边缘到边缘指南,这将导致透明状态栏,让顶部应用栏的背景颜色透过来。

确保在 AppBarLayout 上设置 android:fitsSystemWindows="true"(或者如果不使用 AppBarLayout,则在 MaterialToolbar 上设置), 以便添加额外的内嵌以避免与状态栏重叠。

如果您的 AppBarLayout 滚动并且内容在状态栏下可见,您可以设置 AppBarLayoutstatusBarForegroundMaterialShapeDrawable, 以让 AppBarLayout 自动将状态栏颜色与其背景匹配。

在代码中:

kotlin
appBarLayout.statusBarForeground =
    MaterialShapeDrawable.createWithElevationOverlay(context)

或者,如果使用色调表面颜色而不是高程覆盖,您可以简单地将 statusBarForeground 设置为 colorSurface,以让 AppBarLayout 自动将状态栏颜色与其背景匹配:

kotlin
appBarLayout.setStatusBarForegroundColor(
    MaterialColors.getColor(appBarLayout, R.attr.colorSurface))

居中对齐顶部应用栏示例

上述部分的所有指导和代码对于居中对齐顶部应用栏都是相关的。 居中对齐所需的唯一额外配置是在 MaterialToolbar 上将 app:titleCentered 和/或 app:subtitleCentered 属性设置为 true

Center aligned top app bar with light purple background, grey icons, and page
title

关键属性

Regular app bar anatomy diagram

  1. 容器
  2. 导航图标(可选)
  3. 标题(可选)
  4. 操作菜单项(可选)

容器属性

元素属性相关方法默认值
颜色android:backgroundsetBackground
getBackground
?attr/colorSurface
MaterialToolbar高度android:elevationsetElevation
getElevation
4dp
AppBarLayout 高度android:stateListAnimatorsetStateListAnimator
getStateListAnimator
0dp4dp (所有状态)

导航图标属性

元素属性相关方法默认值
MaterialToolbar 图标app:navigationIconsetNavigationIcon
getNavigationIcon
null
MaterialToolbar 图标颜色app:navigationIconTintsetNavigationIconTint?attr/colorOnSurface

标题属性

元素属性相关方法默认值
MaterialToolbar 标题文本app:titlesetTitle
getTitle
null
MaterialToolbar 副标题文本app:subtitlesetSubtitle
getSubtitle
null
MaterialToolbar 标题颜色app:titleTextColorsetTitleTextColor?attr/colorOnSurface
MaterialToolbar 副标题颜色app:subtitleTextColorsetSubtitleTextColor?attr/colorOnSurfaceVariant
MaterialToolbar 标题排版app:titleTextAppearancesetTitleTextAppearance?attr/textAppearanceTitleLarge
MaterialToolbar 副标题排版app:subtitleTextAppearancesetSubtitleTextAppearance?attr/textAppearanceTitleMedium
MaterialToolbar 标题居中app:titleCenteredsetTitleCenteredfalse
MaterialToolbar 副标题居中app:subtitleCenteredsetSubtitleCenteredfalse
CollapsingToolbarLayout 折叠标题排版app:collapsedTitleTextAppearancesetCollapsedTitleTextAppearance?attr/textAppearanceTitleLarge
CollapsingToolbarLayout 展开标题排版app:expandedTitleTextAppearancesetExpandedTitleTextAppearance?attr/textAppearanceHeadlineSmall for Medium?attr/textAppearanceHeadlineMedium for Large
CollapsingToolbarLayout 折叠标题颜色android:textColor (in app:collapsedTitleTextAppearance) or app:collapsedTitleTextColorsetCollapsedTitleTextColor?attr/colorOnSurface
CollapsingToolbarLayout 展开标题颜色android:textColor (in app:expandedTitleTextAppearance) or app:expandedTitleTextColorsetExpandedTitleTextColor?attr/colorOnSurface
CollapsingToolbarLayout 展开标题边距app:expandedTitleMargin*setExpandedTitleMargin*16dp
CollapsingToolbarLayout 标题最大行数app:maxLinessetMaxLines
getMaxLines
1
CollapsingToolbarLayout 标题省略app:titleTextEllipsizesetTitleEllipsize
getTitleEllipsize
end

操作项属性

元素属性相关方法默认值
MaterialToolbar 菜单app:menuinflateMenu
getMenu
null
MaterialToolbar 图标颜色N/AN/A?attr/colorOnSurfaceVariant

溢出菜单属性

元素属性相关方法默认值
MaterialToolbar 图标android:srcapp:srcCompatactionOverflowButtonStyle (在应用主题中)setOverflowIcon
getOverflowIcon
@drawable/abc_ic_menu_overflow_material (在 API 23 之前) 或 @drawable/ic_menu_moreoverflow_material (在 API 23 之后)
MaterialToolbar 溢出主题app:popupThemesetPopupTheme
getPopupTheme
@style/ThemeOverlay.Material3.*
MaterialToolbar 溢出项排版textAppearanceSmallPopupMenutextAppearanceLargePopupMenuapp:popupTheme 或应用主题N/A?attr/textAppearanceBodyLarge

滚动行为属性

元素属性相关方法默认值
MaterialToolbar or CollapsingToolbarLayout 滚动标志app:layout_scrollFlagssetScrollFlags
getScrollFlags
(on AppBarLayout.LayoutParams)
noScroll
MaterialToolbar 折叠模式app:collapseModesetCollapseMode
getCollapseMode
(on CollapsingToolbar)
none
CollapsingToolbarLayout 内容剪裁颜色app:contentScrimsetContentScrim
setContentScrimColor
setContentScrimResource
getContentScrim
null
CollapsingToolbarLayout 状态栏剪裁颜色app:statusBarScrimsetStatusBarScrim
setStatusBarScrimColor
setStatusBarScrimResource
getStatusBarScrim
@empty
CollapsingToolbarLayout 剪裁动画持续时间app:scrimAnimationDurationsetScrimAnimationDuration
getScrimAnimationDuration
600
CollapsingToolbarLayout 折叠动画插值器app:titlePositionInterpolatorsetTitlePositionInterpolator@null
AppBarLayout 提升滚动app:liftOnScrollsetLiftOnScroll
isLiftOnScroll
true
AppBarLayout 提升滚动颜色app:liftOnScrollColorN/A?attr/colorSurfaceContainer
AppBarLayout 提升滚动目标视图app:liftOnScrollTargetViewIdsetLiftOnScrollTargetViewId
getLiftOnScrollTargetViewId
@null
AppBarLayout 滚动效果app:layout_scrollEffectsetScrollEffect
getScrollEffect
none

AppBarLayout 样式

元素样式
表面背景颜色样式Widget.Material3.AppBarLayout

默认样式主题属性: ?attr/appBarLayoutStyle

MaterialToolbar 样式

元素样式
默认样式Widget.Material3.Toolbar
表面背景颜色样式Widget.Material3.Toolbar.Surface
表面颜色样式Widget.Material3.Toolbar.OnSurface

默认样式主题属性:?attr/toolbarStyle

额外样式主题属性:?attr/toolbarSurfaceStyle

CollapsingToolbarLayout 样式

元素样式
**默认样式 **Widget.Material3.CollapsingToolbar
**中号样式 **Widget.Material3.CollapsingToolbar.Medium
大号样式Widget.Material3.CollapsingToolbar.Large

默认样式主题属性:?attr/collapsingToolbarLayoutStyle

额外样式主题属性:?attr/collapsingToolbarLayoutMediumStyle, ?attr/collapsingToolbarLayoutLargeStyle

完整的 样式属性

可折叠顶部应用栏

较大的可折叠顶部应用栏可用于较长的标题、容纳图像或提供更强的顶部应用栏存在感。

中号顶部应用栏示例

以下示例显示了一个带有页面标题、导航图标、一个操作图标和一个溢出菜单的中号可折叠顶部应用栏。

Medium top app bar with light background and grey icons with the page title on
a newline below the icons

在布局中:

xml
<androidx.coordinatorlayout.widget.CoordinatorLayout
    ...>

    <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/collapsingToolbarLayoutMediumStyle"
            android:layout_width="match_parent"
            android:layout_height="?attr/collapsingToolbarLayoutMediumSize">

            <com.google.android.material.appbar.MaterialToolbar
                ...
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:elevation="0dp" />

        </com.google.android.material.appbar.CollapsingToolbarLayout>

    </com.google.android.material.appbar.AppBarLayout>

    ...

</androidx.coordinatorlayout.widget.CoordinatorLayout>

大号顶部应用栏示例

以下示例显示了一个带有页面标题、导航图标、一个操作图标和一个溢出菜单的大号可折叠顶部应用栏。

Large top app bar with light background and grey icons with the page title on
a newline below the icons

在布局中:

xml
<androidx.coordinatorlayout.widget.CoordinatorLayout
    ...>

    <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">

            <com.google.android.material.appbar.MaterialToolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                ...
                android:elevation="0dp" />

        </com.google.android.material.appbar.CollapsingToolbarLayout>

    </com.google.android.material.appbar.AppBarLayout>

    ...

</androidx.coordinatorlayout.widget.CoordinatorLayout>

向可折叠顶部应用栏添加图像

一个带有图像背景、页面标题、导航图标、两个操作图标和一个溢出菜单的可折叠顶部应用栏:

App bar with image background and white icons. The page title is on a newline
below the icons

在布局中:

xml
<androidx.coordinatorlayout.widget.CoordinatorLayout
    ...
    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">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@drawable/media"
                android:scaleType="centerCrop"
                android:fitsSystemWindows="true"
                android:contentDescription="@string/content_description_media" />

            <com.google.android.material.appbar.MaterialToolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                ...
                android:background="@android:color/transparent" />

        </com.google.android.material.appbar.CollapsingToolbarLayout>

    </com.google.android.material.appbar.AppBarLayout>

    ...

</androidx.coordinatorlayout.widget.CoordinatorLayout>

res/values/themes.xml中:

xml
<style name="Theme.App" parent="Theme.Material3.*.NoActionBar">
    <item name="android:windowTranslucentStatus">true</item>
</style>

将滚动行为应用于可折叠顶部应用栏

在向上滚动时,可折叠顶部应用栏会转换为常规顶部应用栏。

在布局中:

xml
<androidx.coordinatorlayout.widget.CoordinatorLayout
    ...>

    <com.google.android.material.appbar.AppBarLayout
        ...>

        <com.google.android.material.appbar.CollapsingToolbarLayout
            ...
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
            app:contentScrim="?attr/colorPrimary">

            ...

            <com.google.android.material.appbar.MaterialToolbar
                ...
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                />

        </com.google.android.material.appbar.CollapsingToolbarLayout>

    </com.google.android.material.appbar.AppBarLayout>

    ...

</androidx.coordinatorlayout.widget.CoordinatorLayout>

上下文操作栏

上下文操作栏为选定项提供操作。 顶部应用栏可以转换为上下文操作栏,保持活动状态直到采取操作或被

上下文操作栏示例

API 和源代码:

以下示例展示了一个带有上下文标题、关闭图标、两个上下文操作图标和一个溢出菜单的上下文操作栏:

Contextual action bar example with dark grey background, white icons and "1
selected".

res/values/themes.xml 中:

xml
<style name="Theme.App" parent="Theme.Material3.*.NoActionBar">
    ...
    <item name="windowActionModeOverlay">true</item>
    <item name="actionModeCloseDrawable">@drawable/ic_close_24dp</item>
    <item name="actionBarTheme">@style/ThemeOverlay.Material3.Dark.ActionBar</item>
</style>

在代码中:

kotlin
val callback = object : ActionMode.Callback {

    override fun onCreateActionMode(mode: ActionMode?, menu: Menu?): Boolean {
        menuInflater.inflate(R.menu.contextual_action_bar, menu)
        return true
    }

    override fun onPrepareActionMode(mode: ActionMode?, menu: Menu?): Boolean {
        return false
    }

    override fun onActionItemClicked(mode: ActionMode?, item: MenuItem?): Boolean {
        return when (item?.itemId) {
            R.id.share -> {
                // 处理分享图标点击
                true
            }
            R.id.delete -> {
                // 处理删除图标点击
                true
            }
            R.id.more -> {
                // 处理更多项(在溢出菜单内)点击
                true
            }
            else -> false
        }
    }

    override fun onDestroyActionMode(mode: ActionMode?) {
    }
}

val actionMode = startSupportActionMode(callback)
actionMode?.title = "1 selected"

@menu/contextual_action_bar.xml中:

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:title="@string/share"
        android:contentDescription="@string/content_description_share"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/delete"
        android:icon="@drawable/ic_delete_24dp"
        android:title="@string/delete"
        android:contentDescription="@string/content_description_delete"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/more"
        android:title="@string/more"
        android:contentDescription="@string/content_description_more"
        app:showAsAction="never" />

</menu>

在菜单/导航图标中:

xml
<vector
    ...
    android:tint="?attr/colorControlNormal">
    ...
</vector>

结构和关键属性

Contextual action bar anatomy diagram

  1. 关闭按钮(代替导航图标)
  2. 上下文标
  3. 上下文操作
  4. 溢出菜单(可选)
  5. 容器(未显示)

关闭按钮属性

元素属性相关方法默认值
图标app:actionModeCloseDrawable(在应用主题中)N/A@drawable/abc_ic_ab_back_material
颜色N/AN/A?attr/colorControlNormal (作为 Drawable 色调)

上下文标题属性

元素属性相关方法默认值
标题文本N/AsetTitle
getTitle
null
副标题文本N/AsetSubtitle
getSubtitle
null
标题排版app:titleTextStyleN/A@style/TextAppearance.Material3.ActionBar.Title
副标题排版app:subtitleTextStyleN/A@style/TextAppearance.Material3.ActionBar.Subtitle

上下文操作属性

元素属性相关方法默认值
菜单N/AmenuInflater.inflate in ActionMode.Callbacknull
图标颜色N/AN/A?attr/colorControlNormal (作为 Drawable 色调)

溢出菜单属性

元素属性相关方法默认值
图标android:srcapp:srcCompatactionOverflowButtonStyle (在应用主题中)setOverflowIcon
getOverflowIcon
@drawable/abc_ic_menu_overflow_material(API 23 之前)或 @drawable/ic_menu_moreoverflow_material (API 23 之后)
溢出项排版textAppearanceSmallPopupMenutextAppearanceLargePopupMenu 在应用主题中N/A?attr/textAppearanceTitleMedium

容器属性

元素属性相关方法默认值
颜色app:backgroundN/A?attr/actionModeBackground
高度app:heightN/A?attr/actionBarSize
覆盖窗口app:windowActionModeOverlay(在应用主题中)N/Afalse

工具栏图标属性

元素属性相关方法默认值
调整视图边界app:logoAdjustViewBoundssetLogoAdjustViewBounds
isLogoAdjustViewBounds
false
缩放类型app:logoScaleTypesetLogoScaleType
getLogoScaleType
ImageView 的默认值

样式

元素样式
默认样式Widget.Material3.ActionMode

默认样式主题属性:actionModeStyle

主题化顶部应用栏

顶部应用栏支持 Material Theming and can 并可以自定义颜色、排版和形状。

顶部应用栏主题示例

API 和源代码:

一个带有 Material Theming 的常规顶部应用栏:

"Top app bar theming with pink and brown colors"

实现顶部应用栏主题

res/values/styles.xml 中使用主题属性,这会影响所有顶部应用栏并影响其他组件:

xml
<style name="Theme.App" parent="Theme.Material3.*.NoActionBar">
    ...
    <item name="colorSurface">@color/shrine_pink_100</item>
    <item name="colorOnSurface">@color/shrine_pink_900</item>
    <item name="android:statusBarColor">?attr/colorPrimary</item>
    <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>
    <item name="textAppearanceTitleLarge">@style/TextAppearance.App.TitleLarge</item>
    <item name="textAppearanceTitleMedium">@style/TextAppearance.App.TitleMedium</item>
</style>

<style name="TextAppearance.App.TitleLarge" parent="TextAppearance.Material3.TitleLarge">
    <item name="fontFamily">@font/rubik</item>
    <item name="android:fontFamily">@font/rubik</item>
</style>

<style name="TextAppearance.App.TitleMedium" parent="TextAppearance.Material3.TitleMedium">
    <item name="fontFamily">@font/rubik</item>
    <item name="android:fontFamily">@font/rubik</item>
</style>

使用默认样式主题属性、样式和主题覆盖,这会影响所有顶部应用栏但不影响其他组件:

xml
<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="materialThemeOverlay">@style/ThemeOverlay.App.Toolbar</item>
    <item name="titleTextAppearance">@style/TextAppearance.App.TitleLarge</item>
    <item name="subtitleTextAppearance">@style/TextAppearance.App.TitleMedium</item>
</style>

<style name="ThemeOverlay.App.Toolbar" parent="">
    <item name="colorSurface">@color/shrine_pink_100</item>
    <item name="colorOnSurface">@color/shrine_pink_900</item>
</style>

在布局中使用样式,这只会影响此顶部应用栏:

xml
<com.google.android.material.appbar.MaterialToolbar
    ...
    app:title="@string/flow_shirt_blouse"
    app:menu="@menu/top_app_bar_shrine"
    app:navigationIcon="@drawable/ic_close_24dp"
    style="@style/Widget.App.Toolbar"
    />