[M3][Chip] Update M3 chip styles with spec

Adds elevation to selected & hovered state. Adds leading icon tint. PiperOrigin-RevId: 407397700
material-components · Nov 4, 2021 · 8ed0ac9 · 8ed0ac9
1 parent b2fbace
commit 8ed0ac9
Show file tree

Hide file tree

Showing 5 changed files with 137 additions and 17 deletions.
diff --git a/lib/java/com/google/android/material/chip/res/animator/m3_chip_state_list_anim.xml b/lib/java/com/google/android/material/chip/res/animator/m3_chip_state_list_anim.xml
@@ -28,33 +28,36 @@
 <!--        android:valueType="floatType"/>-->
 <!--  </item>-->
 
-  <!-- Hovered state -->
+  <!-- Selected & hovered state -->
   <item
-      android:state_enabled="true"
-      android:state_hovered="true">
+    android:state_enabled="true"
+    android:state_selected="true"
+    android:state_hovered="true">
     <objectAnimator
       android:duration="@integer/m3_chip_anim_duration"
       android:propertyName="translationZ"
-      android:valueTo="@dimen/m3_chip_hovered_translation_z"
+      android:valueTo="@dimen/m3_chip_checked_hovered_translation_z"
       android:valueType="floatType"/>
   </item>
 
-  <!-- Enabled state -->
-  <item android:state_enabled="true">
+  <!-- Checked & hovered state -->
+  <item
+    android:state_enabled="true"
+    android:state_checked="true"
+    android:state_hovered="true">
     <objectAnimator
-        android:duration="@integer/m3_chip_anim_duration"
-        android:propertyName="translationZ"
-        android:valueTo="0"
-        android:valueType="floatType"/>
+      android:duration="@integer/m3_chip_anim_duration"
+      android:propertyName="translationZ"
+      android:valueTo="@dimen/m3_chip_checked_hovered_translation_z"
+      android:valueType="floatType"/>
   </item>
 
-  <!-- Disabled state -->
+  <!-- Other states -->
   <item>
     <objectAnimator
-        android:duration="0"
+        android:duration="@integer/m3_chip_anim_duration"
         android:propertyName="translationZ"
-        android:valueTo="@dimen/m3_chip_disabled_translation_z"
+        android:valueTo="0"
         android:valueType="floatType"/>
   </item>
-
 </selector>
diff --git a/lib/java/com/google/android/material/chip/res/animator/m3_elevated_chip_state_list_anim.xml b/lib/java/com/google/android/material/chip/res/animator/m3_elevated_chip_state_list_anim.xml
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Copyright 2021 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">
+
+  <!-- TODO: Uncomment the below section when we implemented Dragged state -->
+<!--  <item-->
+<!--      android:state_enabled="true"-->
+<!--      app:state_dragged="true">-->
+<!--    <objectAnimator-->
+<!--        android:duration="@integer/m3_chip_anim_duration"-->
+<!--        android:propertyName="translationZ"-->
+<!--        android:valueTo="@dimen/m3_chip_dragged_translation_z"-->
+<!--        android:valueType="floatType"/>-->
+<!--  </item>-->
+
+  <!-- Hovered state -->
+  <item
+      android:state_enabled="true"
+      android:state_hovered="true">
+    <objectAnimator
+      android:duration="@integer/m3_chip_anim_duration"
+      android:propertyName="translationZ"
+      android:valueTo="@dimen/m3_chip_hovered_translation_z"
+      android:valueType="floatType"/>
+  </item>
+
+  <!-- Enabled state -->
+  <item android:state_enabled="true">
+    <objectAnimator
+        android:duration="@integer/m3_chip_anim_duration"
+        android:propertyName="translationZ"
+        android:valueTo="0"
+        android:valueType="floatType"/>
+  </item>
+
+  <!-- Disabled state -->
+  <item>
+    <objectAnimator
+        android:duration="0"
+        android:propertyName="translationZ"
+        android:valueTo="@dimen/m3_chip_disabled_translation_z"
+        android:valueType="floatType"/>
+  </item>
+
+</selector>
diff --git a/lib/java/com/google/android/material/chip/res/color/m3_assist_chip_icon_tint_color.xml b/lib/java/com/google/android/material/chip/res/color/m3_assist_chip_icon_tint_color.xml
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Copyright 2021 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">
+  <!-- Disabled state -->
+  <item android:alpha="@dimen/material_emphasis_disabled" android:color="?attr/colorOnSurface" android:state_enabled="false"/>
+
+  <!-- Enabled state -->
+  <item android:color="?attr/colorPrimary"/>
+</selector>
diff --git a/lib/java/com/google/android/material/chip/res/values/dimens.xml b/lib/java/com/google/android/material/chip/res/values/dimens.xml
@@ -19,6 +19,8 @@
   <dimen name="mtrl_chip_pressed_translation_z">3dp</dimen>
   <dimen name="mtrl_chip_text_size">14sp</dimen>
 
+  <dimen name="m3_chip_checked_hovered_translation_z">1dp</dimen>
+
   <dimen name="m3_chip_dragged_translation_z">7dp</dimen>
   <dimen name="m3_chip_hovered_translation_z">2dp</dimen>
   <dimen name="m3_chip_disabled_translation_z">-1dp</dimen>

diff --git a/lib/java/com/google/android/material/chip/res/values/styles.xml b/lib/java/com/google/android/material/chip/res/values/styles.xml
@@ -152,13 +152,17 @@
     <item name="android:textAppearance">?attr/textAppearanceLabelLarge</item>
     <item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlay.Material3.Chip</item>
     <item name="android:textColor">@color/m3_chip_text_color</item>
+    <item name="chipIconTint">@color/m3_chip_text_color</item>
     <item name="closeIconTint">@color/m3_chip_text_color</item>
     <item name="chipStrokeColor">@color/m3_chip_stroke_color</item>
     <item name="chipSurfaceColor">?attr/colorSurface</item>
     <item name="chipBackgroundColor">@color/m3_chip_background_color</item>
     <item name="chipStrokeWidth">1dp</item>
     <item name="rippleColor">@color/m3_chip_ripple_color</item>
     <item name="checkedIcon">@drawable/ic_m3_chip_checked_circle</item>
+    <item name="android:stateListAnimator" tools:ignore="NewApi">
+      @animator/m3_chip_state_list_anim
+    </item>
   </style>
 
   <!-- Style for Input Chip: for user-entered information.
@@ -189,13 +193,39 @@
     <item name="chipEndPadding">4dp</item>
   </style>
 
+  <!-- Style for input Chip, to be used when placed against a background
+       that needs protection, such as an image. -->
+  <style name="Widget.Material3.Chip.Input.Elevated">
+    <item name="android:elevation" tools:ignore="NewApi">
+      @dimen/m3_chip_elevated_elevation
+    </item>
+    <item name="android:stateListAnimator" tools:ignore="NewApi">
+      @animator/m3_elevated_chip_state_list_anim
+    </item>
+    <item name="chipStrokeColor">@android:color/transparent</item>
+    <item name="chipBackgroundColor">@color/m3_elevated_chip_background_color</item>
+  </style>
+
   <!-- Style for input chips with system icons. For input chips with avatar
        style icons, use Widget.Material3.Chip.Input, instead. -->
   <style name="Widget.Material3.Chip.Input.Icon" parent="Widget.Material3.Chip.Input">
     <item name="chipIconSize">18dp</item>
     <item name="iconStartPadding">4dp</item>
   </style>
 
+  <!-- Style for Input Chip with system icons, to be used when placed against a
+       background that needs protection, such as an image. -->
+  <style name="Widget.Material3.Chip.Input.Icon.Elevated">
+    <item name="android:elevation" tools:ignore="NewApi">
+      @dimen/m3_chip_elevated_elevation
+    </item>
+    <item name="android:stateListAnimator" tools:ignore="NewApi">
+      @animator/m3_elevated_chip_state_list_anim
+    </item>
+    <item name="chipStrokeColor">@android:color/transparent</item>
+    <item name="chipBackgroundColor">@color/m3_elevated_chip_background_color</item>
+  </style>
+
   <!-- Style for Suggestion Chips: for suggested information.
        Suggestion Chips are used to help a user narrow their intent by
        presenting dynamically generated suggestions like possible responses or
@@ -237,7 +267,7 @@
       @dimen/m3_chip_elevated_elevation
     </item>
     <item name="android:stateListAnimator" tools:ignore="NewApi">
-      @animator/m3_chip_state_list_anim
+      @animator/m3_elevated_chip_state_list_anim
     </item>
     <item name="chipStrokeColor">@android:color/transparent</item>
     <item name="chipBackgroundColor">@color/m3_elevated_chip_background_color</item>
@@ -263,6 +293,7 @@
 
     <item name="enforceTextAppearance">false</item>
     <item name="android:textColor">@color/m3_chip_assist_text_color</item>
+    <item name="chipIconTint">@color/m3_assist_chip_icon_tint_color</item>
 
     <item name="chipMinHeight">32dp</item>
 
@@ -283,7 +314,7 @@
       @dimen/m3_chip_elevated_elevation
     </item>
     <item name="android:stateListAnimator" tools:ignore="NewApi">
-      @animator/m3_chip_state_list_anim
+      @animator/m3_elevated_chip_state_list_anim
     </item>
     <item name="chipStrokeColor">@android:color/transparent</item>
     <item name="chipBackgroundColor">@color/m3_elevated_chip_background_color</item>
@@ -318,7 +349,7 @@
     <item name="android:elevation" tools:ignore="NewApi">
       @dimen/m3_chip_elevated_elevation</item>
     <item name="android:stateListAnimator" tools:ignore="NewApi">
-      @animator/m3_chip_state_list_anim
+      @animator/m3_elevated_chip_state_list_anim
     </item>
     <item name="chipStrokeColor">@android:color/transparent</item>
     <item name="chipBackgroundColor">@color/m3_elevated_chip_background_color</item>