From feae056067db286208b6f053921f95f5f0ebde09 Mon Sep 17 00:00:00 2001
From: Mill Chen <millchen@google.com>
Date: Thu, 15 Apr 2021 22:11:13 +0800
Subject: [PATCH] Tweak the layout of top app bar

- Update the color of content scrim
- Dynamically change the height of collapsing toolbar according to the
  line count of title
- Fix the jank problem of collapsing toolbar

Fixes: 184615642
Fixes: 185003521
Fixes: 182770567
Fixes: 184209747
Test: visual verified
Change-Id: I78c517eb9bec0b85997085970007481d1a4ef7d3
---
 res/layout/settings_collapsing_base_layout.xml    | 15 +++++++++------
 res/values-night/colors.xml                       |  2 ++
 res/values/colors.xml                             |  3 +++
 res/values/dimens.xml                             |  8 ++++++++
 res/values/styles.xml                             |  4 ++--
 .../settings/core/SettingsBaseActivity.java       | 13 +++++++++----
 6 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/res/layout/settings_collapsing_base_layout.xml b/res/layout/settings_collapsing_base_layout.xml
index ca9c132af5f..97d249c00ac 100644
--- a/res/layout/settings_collapsing_base_layout.xml
+++ b/res/layout/settings_collapsing_base_layout.xml
@@ -29,22 +29,25 @@
         android:fitsSystemWindows="true"
         android:outlineAmbientShadowColor="@android:color/transparent"
         android:outlineSpotShadowColor="@android:color/transparent"
-        android:background="?android:attr/colorPrimary"
+        android:background="@android:color/transparent"
         android:theme="@style/Theme.CollapsingToolbar.Settings">
 
         <com.google.android.material.appbar.CollapsingToolbarLayout
             android:id="@+id/collapsing_toolbar"
             android:layout_width="match_parent"
-            android:layout_height="226dp"
+            android:layout_height="@dimen/toolbar_one_line_height"
+            android:clipToPadding="false"
+            app:contentScrim="@color/color_surface_header"
             app:maxLines="3"
             app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
-            app:scrimAnimationDuration="150"
-            app:scrimVisibleHeightTrigger="174dp"
+            app:scrimAnimationDuration="50"
+            app:scrimVisibleHeightTrigger="@dimen/scrim_visible_height_trigger"
             app:statusBarScrim="@empty"
             app:titleCollapseMode="fade"
             app:collapsedTitleTextAppearance="@style/ToolbarText.Collapsed"
-            app:expandedTitleMarginStart="18dp"
-            app:expandedTitleMarginEnd="16dp"
+            app:expandedTitleTextAppearance="@style/ToolbarText.Expanded"
+            app:expandedTitleMarginStart="@dimen/expanded_title_margin_start"
+            app:expandedTitleMarginEnd="@dimen/expanded_title_margin_end"
             app:toolbarId="@id/action_bar">
 
             <Toolbar
diff --git a/res/values-night/colors.xml b/res/values-night/colors.xml
index b2f9a890598..168fd0db585 100644
--- a/res/values-night/colors.xml
+++ b/res/values-night/colors.xml
@@ -40,5 +40,7 @@
     <color name="palette_list_color_purple">@color/palette_list_dark_mode_color_purple</color>
     <color name="palette_list_color_gray">@color/palette_list_dark_mode_color_gray</color>
     <color name="gestures_setting_background_color">@android:color/black</color>
+
+    <color name="color_surface_header">@*android:color/surface_header_dark</color>
 </resources>
 
diff --git a/res/values/colors.xml b/res/values/colors.xml
index e107b65ce42..736a7dbc217 100644
--- a/res/values/colors.xml
+++ b/res/values/colors.xml
@@ -192,4 +192,7 @@
 
     <!-- Google colors -->
     <color name="google_grey_700">#5f6368</color>
+
+    <!-- Top app bar colors -->
+    <color name="color_surface_header">@*android:color/surface_header_light</color>
 </resources>
\ No newline at end of file
diff --git a/res/values/dimens.xml b/res/values/dimens.xml
index 304feb82021..6047092f8d3 100755
--- a/res/values/dimens.xml
+++ b/res/values/dimens.xml
@@ -446,4 +446,12 @@
     <dimen name="chartview_trapezoid_radius">2dp</dimen>
     <dimen name="chartview_trapezoid_margin_start">1dp</dimen>
     <dimen name="chartview_trapezoid_margin_bottom">2dp</dimen>
+
+    <!-- Collapsing toolbar layout dimensions -->
+    <dimen name="toolbar_one_line_height">226dp</dimen>
+    <dimen name="toolbar_two_lines_height">270dp</dimen>
+    <dimen name="toolbar_three_lines_height">314dp</dimen>
+    <dimen name="scrim_visible_height_trigger">174dp</dimen>
+    <dimen name="expanded_title_margin_start">24dp</dimen>
+    <dimen name="expanded_title_margin_end">24dp</dimen>
 </resources>
diff --git a/res/values/styles.xml b/res/values/styles.xml
index 735cc15ab2e..31f44dd609a 100644
--- a/res/values/styles.xml
+++ b/res/values/styles.xml
@@ -781,7 +781,7 @@
         <item name="android:fontFamily">@*android:string/config_headlineFontFamily</item>
     </style>
 
-    <style name="HomepageTitleText" parent="ToolbarText">
+    <style name="HomepageTitleText" parent="ToolbarText.Expanded">
         <item name="android:layout_width">wrap_content</item>
         <item name="android:layout_height">wrap_content</item>
         <item name="android:layout_marginBottom">@dimen/homepage_title_margin_bottom</item>
@@ -874,6 +874,6 @@
     </style>
 
     <style name="ToolbarText.Collapsed" parent="CollapsingToolbarTitle.Collapsed"/>
-    <style name="ToolbarText" parent="CollapsingToolbarTitle"/>
+    <style name="ToolbarText.Expanded" parent="CollapsingToolbarTitle"/>
     <style name="ToolbarText.MoreThanTwoLines" parent="CollapsingToolbarTitle.MoreThanTwoLines"/>
 </resources>
diff --git a/src/com/android/settings/core/SettingsBaseActivity.java b/src/com/android/settings/core/SettingsBaseActivity.java
index cc78fa6d474..569e4805b8d 100644
--- a/src/com/android/settings/core/SettingsBaseActivity.java
+++ b/src/com/android/settings/core/SettingsBaseActivity.java
@@ -218,10 +218,15 @@ public class SettingsBaseActivity extends FragmentActivity {
                 v.removeOnLayoutChangeListener(this);
                 final int count = getLineCount();
                 if (count > TOOLBAR_MAX_LINE_NUMBER) {
-                    mCollapsingToolbarLayout
-                            .setExpandedTitleTextAppearance(R.style.ToolbarText_MoreThanTwoLines);
-                } else {
-                    mCollapsingToolbarLayout.setExpandedTitleTextAppearance(R.style.ToolbarText);
+                    ViewGroup.LayoutParams lp = mCollapsingToolbarLayout.getLayoutParams();
+                    lp.height = getResources()
+                            .getDimensionPixelSize(R.dimen.toolbar_three_lines_height);
+                    mCollapsingToolbarLayout.setLayoutParams(lp);
+                } else if (count == TOOLBAR_MAX_LINE_NUMBER) {
+                    ViewGroup.LayoutParams lp = mCollapsingToolbarLayout.getLayoutParams();
+                    lp.height =
+                            getResources().getDimensionPixelSize(R.dimen.toolbar_two_lines_height);
+                    mCollapsingToolbarLayout.setLayoutParams(lp);
                 }
             }
         });