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

Commit 7053e794 authored by Wenbo Jie's avatar Wenbo Jie
Browse files

[DocsUI M3] Uplift Profile tabs 

Check the bug item for demo.

Bug: 381928119
Test: Manual inspection
Flag: com.android.documentsui.flags.use_material3
Change-Id: Id2dbc03b7c3e13763132a3aaeb91c4605db09fd2
parent 075c73aa

res/flag(com.android.documentsui.flags.use_material3)/color/profile_tab_ripple_color.xml

0 → 100644
+22 −0
Original line number Diff line number Diff line 
<?xml version="1.0" encoding="utf-8"?>

<!--

  Copyright 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.

  You may obtain a copy of the License at



      https://www.apache.org/licenses/LICENSE-2.0



  Unless required by applicable law or agreed to in writing, software

  distributed under the License is distributed on an "AS IS" BASIS,

  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.

  -->



<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_activated="true"

        android:alpha="@dimen/ripple_overlay_alpha" android:color="?attr/colorOnPrimaryContainer"/>

    <item android:alpha="@dimen/ripple_overlay_alpha" android:color="?attr/colorOnSurfaceVariant"/>

</selector>
 
 No newline at end of file

res/flag(com.android.documentsui.flags.use_material3)/color/profile_tab_selector.xml→res/flag(com.android.documentsui.flags.use_material3)/drawable/profile_tab_mask.xml

+5 −7
Original line number Diff line number Diff line
@@ -14,10 +14,8 @@ 
     limitations under the License.

-->



<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item

        android:state_selected="true"

        android:color="@color/profile_tab_selected_color"/>

    <item

        android:color="@color/profile_tab_default_color"/>

</selector>
 
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <corners android:radius="@dimen/profile_tab_radius"/>

    <!-- The color here doesn't matter, it's just being used as a mask in tab_border_rounded. -->

    <solid android:color="@android:color/white"/>

</shape>

res/flag(com.android.documentsui.flags.use_material3)/drawable/tab_border_rounded.xml

+131 −6
Original line number Diff line number Diff line
@@ -14,10 +14,135 @@ 
     limitations under the License.

-->



<shape xmlns:android="http://schemas.android.com/apk/res/android"

    android:shape="rectangle">

<ripple

    xmlns:android="http://schemas.android.com/apk/res/android"

    android:color="@color/profile_tab_ripple_color">



   <solid

       android:color="@color/profile_tab_selector"/>

   <corners android:radius="12dp"/>

   <!-- The mask below only works for the ripple itself, doesn't work for other <item>s, we

        need to explicitly apply the drawable if the other items also need this mask. -->

   <item

       android:id="@android:id/mask"

       android:drawable="@drawable/profile_tab_mask"/>



   <item>

      <selector>

         <!-- Selected (activated). -->

         <item android:state_activated="true" android:state_pressed="true">

            <layer-list>

               <item>

                  <shape>

                     <corners android:radius="@dimen/profile_tab_radius" />

                     <solid android:color="?attr/colorPrimaryContainer" />

                  </shape>

               </item>

               <item>

                  <shape android:tint="?attr/colorOnPrimaryContainer">

                     <corners android:radius="@dimen/profile_tab_radius" />

                     <solid android:color="@color/overlay_color_percentage_10" />

                  </shape>

               </item>

            </layer-list>

         </item>

         <item android:state_activated="true" android:state_focused="true">

            <layer-list>

               <item>

                  <shape>

                     <corners android:radius="@dimen/profile_tab_radius" />

                     <solid android:color="?attr/colorPrimaryContainer" />

                  </shape>

               </item>

               <item>

                  <shape>

                     <corners android:radius="@dimen/profile_tab_radius" />

                     <stroke

                         android:width="@dimen/focus_ring_width"

                         android:color="?attr/colorSecondary" />

                  </shape>

               </item>

            </layer-list>

         </item>

         <item android:state_activated="true" android:state_hovered="true">

            <layer-list>

               <item>

                  <shape>

                     <corners android:radius="@dimen/profile_tab_radius" />

                     <solid android:color="?attr/colorPrimaryContainer" />

                  </shape>

               </item>

               <item>

                  <shape android:tint="?attr/colorOnPrimaryContainer">

                     <corners android:radius="@dimen/profile_tab_radius" />

                     <solid android:color="@color/overlay_color_percentage_10" />

                  </shape>

               </item>

            </layer-list>

         </item>

         <item android:state_activated="true">

            <shape>

               <corners android:radius="@dimen/profile_tab_radius" />

               <solid android:color="?attr/colorPrimaryContainer" />

            </shape>

         </item>



         <!-- Unselected. -->

         <item android:state_pressed="true">

            <layer-list>

               <item>

                  <shape>

                     <corners android:radius="@dimen/profile_tab_radius" />

                     <solid android:color="?attr/colorSurfaceContainerHighest" />

                  </shape>

               </item>

               <item>

                  <shape android:tint="?attr/colorOnSurface">

                     <corners android:radius="@dimen/profile_tab_radius" />

                     <solid android:color="@color/overlay_color_percentage_10" />

                  </shape>

               </item>

            </layer-list>

         </item>

         <item android:state_focused="true">

            <layer-list>

               <item>

                  <shape>

                     <corners android:radius="@dimen/profile_tab_radius" />

                     <solid android:color="?attr/colorSurfaceContainerHighest" />

                  </shape>

               </item>

               <item>

                  <shape>

                     <corners android:radius="@dimen/profile_tab_radius" />

                     <stroke

                         android:width="@dimen/focus_ring_width"

                         android:color="?attr/colorSecondary" />

                  </shape>

               </item>

            </layer-list>

         </item>

         <item android:state_hovered="true">

            <layer-list>

               <item>

                  <shape>

                     <corners android:radius="@dimen/profile_tab_radius" />

                     <solid android:color="?attr/colorSurfaceContainerHighest" />

                  </shape>

               </item>

               <item>

                  <shape android:tint="?attr/colorOnSurface">

                     <corners android:radius="@dimen/profile_tab_radius" />

                     <solid android:color="@color/overlay_color_percentage_10" />

                  </shape>

               </item>

            </layer-list>

         </item>



         <!-- Default -->

         <item>

            <shape>

               <corners android:radius="@dimen/profile_tab_radius" />

               <solid android:color="?attr/colorSurfaceContainerHighest" />

            </shape>

         </item>

      </selector>

   </item>

</ripple>

res/flag(com.android.documentsui.flags.use_material3)/layout/directory_header.xml

+3 −8
Original line number Diff line number Diff line
@@ -25,33 +25,28 @@ 


    <LinearLayout

        android:id="@+id/tabs_container"

        android:theme="@style/TabTheme"

        android:clipToPadding="true"

        android:clipChildren="true"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:paddingStart="@dimen/main_container_padding_start"

        android:paddingEnd="@dimen/main_container_padding_end"

        android:paddingBottom="@dimen/space_extra_small_6"

        android:orientation="vertical">



        <com.google.android.material.tabs.TabLayout

            android:id="@+id/tabs"

            android:background="@android:color/transparent"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            app:tabMaxWidth="0dp"

            app:tabGravity="fill"

            app:tabMode="fixed"

            app:tabIndicatorColor="?android:attr/colorAccent"

            app:tabIndicatorHeight="@dimen/tab_selector_indicator_height"

            app:tabSelectedTextColor="@color/tab_selected_text_color"

            app:tabTextAppearance="@style/TabTextAppearance"

            app:tabTextColor="@color/tab_unselected_text_color"/>

            style="@style/ProfileTabStyle"/>

        <View

            android:id="@+id/tab_separator"

            android:layout_width="match_parent"

            android:layout_height="1dp"

            android:background="?android:attr/listDivider"/>

            android:background="?attr/colorOutlineVariant"/>

    </LinearLayout>



    <!-- used for apps row. -->

res/flag(com.android.documentsui.flags.use_material3)/values-night-v31/colors.xml

+0 −10
Original line number Diff line number Diff line
@@ -14,7 +14,6 @@ 
-->



<resources>

  <color name="tab_selected_text_color">@android:color/black</color>

  <color name="work_profile_button_stroke_color">

    @*android:color/system_accent1_200

  </color> <!-- accent 200 -->
@@ -24,15 +23,6 @@ 
  <color name="empty_state_message_text_color">

    @*android:color/system_neutral2_200

  </color>

  <!-- neutral variant 200 -->

  <color name="tab_unselected_text_color">@*android:color/system_neutral2_200

  </color>

  <!-- neutral variant 200 -->

  <color name="profile_tab_default_color">@*android:color/system_neutral1_800

  </color>

  <!-- neutral 800 -->

  <color name="profile_tab_selected_color">@*android:color/system_neutral2_100

  </color>

  <!-- neutral variant 100 -->

  <color name="fragment_pick_inactive_button_color">

    @*android:color/system_neutral1_800