Skip to content

feat(appbar): Allow multiline titles in MaterialToolbar (Fixes #4725) #4745

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

feat(appbar): Allow multiline titles in MaterialToolbar (Fixes #4725) #4745

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions lib/java/com/google/android/material/appbar/res/values/integers.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<!--
~ Copyright (C) 2015 The Android Open Source Project
~ Copyright (C) 2024 The Android Open Source Project
~
~ Licensed under the Apache License, Version 2.0 (the "License");
~ you may not use this file except in compliance with the License.
Expand All @@ -13,7 +13,9 @@
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ See the License for the specific language governing permissions and
~ limitations under the License.
-->
-->
<resources>
<integer name="app_bar_elevation_anim_duration">150</integer>
<!-- Default max lines for the Material Toolbar title to allow wrapping for accessibility. -->
<integer name="mtrl_toolbar_title_max_lines">2</integer>
</resources>
35 changes: 21 additions & 14 deletions lib/java/com/google/android/material/appbar/res/values/styles.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
~ See the License for the specific language governing permissions and
~ limitations under the License.
-->
<resources xmlns:tools="http://schemas.android.com/tools">
<resources xmlns:tools="http://schemas.android.com/tools" xmlns:ns1="http://schemas.android.com/apk/res/android">

<!-- M3 Expressive CollapsingToolbarLayout styles. -->
<style name="Widget.Material3Expressive.CollapsingToolbar" parent="Widget.Material3.CollapsingToolbar">
Expand Down Expand Up @@ -122,7 +122,7 @@

<!-- Style for a M3 Toolbar. -->
<style name="Widget.Material3.Toolbar" parent="Widget.AppCompat.Toolbar">
<item name="titleTextAppearance">@macro/m3_comp_app_bar_small_title_font</item>
<item name="titleTextAppearance">?attr/toolbarTitleTextAppearanceMultiline</item>
<item name="subtitleTextAppearance">?attr/textAppearanceTitleMedium</item>
<item name="contentInsetStartWithNavigation">0dp</item>

Expand All @@ -134,18 +134,19 @@
<!-- Style for a M3 On Surface Toolbar (transparent background and on-surface
colors for text and iconography). Use with MaterialToolbar to get
navigation icon and menu icon coloring. -->
<style name="Widget.Material3.Toolbar.OnSurface">
<item name="titleTextColor">@macro/m3_comp_app_bar_title_color</item>
<item name="subtitleTextColor">?attr/colorOnSurfaceVariant</item>
<item name="navigationIconTint">@macro/m3_comp_app_bar_leading_icon_color</item>
<item name="materialThemeOverlay">@style/ThemeOverlay.Material3.Toolbar.Surface</item>
<style name="Widget.Material3.Toolbar.OnSurface" parent="Widget.AppCompat.Toolbar.Title">
<item name="titleTextAppearance">?attr/toolbarTitleTextAppearanceMultiline</item>
<item name="subtitleTextAppearance">?attr/textAppearanceTitleMedium</item>
<item name="materialThemeOverlay">@style/ThemeOverlay.Material3.Toolbar.OnSurface</item>
</style>

<!-- Style for a M3 Surface Toolbar (surface background and on-surface
colors for text and iconography). Use with MaterialToolbar to get
navigation icon and menu icon coloring. -->
<style name="Widget.Material3.Toolbar.Surface" parent="Widget.Material3.Toolbar.OnSurface">
<item name="android:background">@macro/m3_comp_app_bar_container_color</item>
<style name="Widget.Material3.Toolbar.Surface" parent="Widget.AppCompat.Toolbar.Title">
<item name="titleTextAppearance">?attr/toolbarTitleTextAppearanceMultiline</item>
<item name="subtitleTextAppearance">?attr/textAppearanceTitleMedium</item>
<item name="materialThemeOverlay">@style/ThemeOverlay.Material3.Toolbar.Surface</item>
</style>

<style name="ThemeOverlay.Material3.Toolbar.Surface" parent="">
Expand Down Expand Up @@ -222,13 +223,12 @@

<!-- Toolbar styles -->
<style name="Widget.MaterialComponents.Toolbar" parent="Widget.AppCompat.Toolbar">
<!-- We don't set the background; this is done by AppBarLayout based on the surface color. -->
<item name="android:background">@android:color/transparent</item>
<item name="android:elevation" ns1:ignore="NewApi">@dimen/mtrl_toolbar_default_elevation</item>
<item name="titleTextAppearance">?attr/textAppearanceHeadline6</item>
<item name="titleTextColor">?android:attr/textColorPrimary</item>
<item name="subtitleTextAppearance">?attr/textAppearanceSubtitle1</item>
<item name="subtitleTextColor">?android:attr/textColorSecondary</item>
<!-- Overrides minimum height in landscape to avoid headline6 and subtitle1 height concerns. -->
<item name="android:minHeight">@dimen/mtrl_toolbar_default_height</item>
<item name="maxButtonHeight">@dimen/mtrl_toolbar_default_height</item>
<item name="materialThemeOverlay">@style/ThemeOverlay.MaterialComponents.Toolbar.Primary</item>
</style>

<style name="Widget.MaterialComponents.Toolbar.Primary">
Expand Down Expand Up @@ -320,4 +320,11 @@
<item name="android:colorBackground">?attr/colorSurface</item>
</style>

<!-- =========================================================================================
Material3 Toolbar Text Appearances (Additions for Multiline)
========================================================================================== -->
<style name="TextAppearance.Material3.Toolbar.Title.Multiline" parent="TextAppearance.Material3.TitleLarge">
<item name="android:maxLines">@integer/mtrl_toolbar_title_max_lines</item>
</style>

</resources>
8 changes: 8 additions & 0 deletions lib/java/com/google/android/material/theme/res/values/attrs.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<attr name="toolbarStyle" format="reference"/>
<attr name="toolbarSurfaceStyle" format="reference"/>
<attr name="toolbarNavigationButtonStyle" format="reference"/>
<!-- Theme attribute for the multiline Toolbar title text appearance -->
<attr name="toolbarTitleTextAppearanceMultiline" format="reference"/>

<!-- Material 3 specific theme attributes. -->
<attr name="materialAlertDialogTheme" format="reference"/>
20 changes: 20 additions & 0 deletions lib/java/com/google/android/material/theme/res/values/themes_base.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,11 @@

<item name="toolbarStyle">@style/Widget.Material3Expressive.Toolbar</item>
<item name="toolbarSurfaceStyle">@style/Widget.Material3Expressive.Toolbar.Surface</item>
<item name="toolbarNavigationButtonStyle">@style/Widget.Material3Expressive.Toolbar.NavigationButton</item>
<item name="toolbarTitleTextAppearanceMultiline">@style/TextAppearance.Material3Expressive.Toolbar.Title.Multiline</item>

<!-- Tooltip -->
<item name="tooltipStyle">@style/Widget.Material3Expressive.Tooltip</item>

<!-- Top App Bars. -->
<item name="collapsingToolbarLayoutMediumSize">@dimen/m3_comp_app_bar_medium_flexible_container_height</item>
Expand Down Expand Up @@ -87,6 +92,11 @@

<item name="toolbarStyle">@style/Widget.Material3Expressive.Toolbar</item>
<item name="toolbarSurfaceStyle">@style/Widget.Material3Expressive.Toolbar.Surface</item>
<item name="toolbarNavigationButtonStyle">@style/Widget.Material3Expressive.Toolbar.NavigationButton</item>
<item name="toolbarTitleTextAppearanceMultiline">@style/TextAppearance.Material3Expressive.Toolbar.Title.Multiline</item>

<!-- Tooltip -->
<item name="tooltipStyle">@style/Widget.Material3Expressive.Tooltip</item>

<!-- Top App Bars. -->
<item name="collapsingToolbarLayoutMediumSize">@dimen/m3_comp_app_bar_medium_flexible_container_height</item>
Expand Down Expand Up @@ -279,6 +289,11 @@
<item name="textInputFilledExposedDropdownMenuStyle">@style/Widget.Material3.TextInputLayout.FilledBox.ExposedDropdownMenu</item>
<item name="toolbarStyle">@style/Widget.Material3.Toolbar</item>
<item name="toolbarSurfaceStyle">@style/Widget.Material3.Toolbar.Surface</item>
<item name="toolbarNavigationButtonStyle">@style/Widget.Material3.Toolbar.NavigationButton</item>
<item name="toolbarTitleTextAppearanceMultiline">@style/TextAppearance.Material3.Toolbar.Title.Multiline</item>

<!-- Tooltip -->
<item name="tooltipStyle">@style/Widget.Material3.Tooltip</item>

<!-- Top App Bars. -->
<item name="collapsingToolbarLayoutMediumSize">@dimen/m3_appbar_size_medium</item>
Expand Down Expand Up @@ -588,6 +603,11 @@
<item name="textInputFilledExposedDropdownMenuStyle">@style/Widget.Material3.TextInputLayout.FilledBox.ExposedDropdownMenu</item>
<item name="toolbarStyle">@style/Widget.Material3.Toolbar</item>
<item name="toolbarSurfaceStyle">@style/Widget.Material3.Toolbar.Surface</item>
<item name="toolbarNavigationButtonStyle">@style/Widget.Material3.Toolbar.NavigationButton</item>
<item name="toolbarTitleTextAppearanceMultiline">@style/TextAppearance.Material3.Toolbar.Title.Multiline</item>

<!-- Tooltip -->
<item name="tooltipStyle">@style/Widget.Material3.Tooltip</item>

<!-- Top App Bars. -->
<item name="collapsingToolbarLayoutMediumSize">@dimen/m3_appbar_size_medium</item>
Expand Down