Donate to e Foundation | Murena handsets with /e/OS | Own a part of Murena! Learn more

Commit feae0560 authored by Mill Chen's avatar Mill Chen
Browse files

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
parent d0ca25a0

res/layout/settings_collapsing_base_layout.xml

+9 −6
Original line number Diff line number Diff line
@@ -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

res/values-night/colors.xml

+2 −0
Original line number Diff line number Diff line
@@ -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>

res/values/colors.xml

+3 −0
Original line number Diff line number Diff line
@@ -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

res/values/dimens.xml

+8 −0
Original line number Diff line number Diff line
@@ -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>

res/values/styles.xml

+2 −2
Original line number Diff line number Diff line
@@ -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>