[Slider] Add support for track icons

- added trackIconActive, trackIconActiveSize and trackIconActiveColor attrs - added trackIconInactive, trackIconInactiveSize and trackIconInactiveColor attrs - added tests and demos - updated documentation PiperOrigin-RevId: 689804000
material-components · Oct 25, 2024 · 2e95296 · 2e95296
1 parent 31fa412
commit 2e95296
Show file tree

Hide file tree

Showing 8 changed files with 395 additions and 22 deletions.
diff --git a/catalog/java/io/material/catalog/slider/res/drawable/baseline_music_note_24.xml b/catalog/java/io/material/catalog/slider/res/drawable/baseline_music_note_24.xml
@@ -0,0 +1,28 @@
+<!--
+     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.
+     You may obtain a copy of the License at
+
+          http://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.
+-->
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+  android:width="24dp"
+  android:height="24dp"
+  android:autoMirrored="true"
+  android:tint="#000000"
+  android:viewportHeight="24"
+  android:viewportWidth="24">
+
+  <path
+    android:fillColor="@android:color/white"
+    android:pathData="M12,3v10.55c-0.59,-0.34 -1.27,-0.55 -2,-0.55 -2.21,0 -4,1.79 -4,4s1.79,4 4,4 4,-1.79 4,-4V7h4V3h-6z" />
+
+</vector>
diff --git a/catalog/java/io/material/catalog/slider/res/drawable/baseline_music_off_24.xml b/catalog/java/io/material/catalog/slider/res/drawable/baseline_music_off_24.xml
@@ -0,0 +1,28 @@
+<!--
+     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.
+     You may obtain a copy of the License at
+
+          http://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.
+-->
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+  android:width="24dp"
+  android:height="24dp"
+  android:autoMirrored="true"
+  android:tint="#000000"
+  android:viewportHeight="24"
+  android:viewportWidth="24">
+
+  <path
+    android:fillColor="@android:color/white"
+    android:pathData="M4.27,3L3,4.27l9,9v0.28c-0.59,-0.34 -1.27,-0.55 -2,-0.55 -2.21,0 -4,1.79 -4,4s1.79,4 4,4 4,-1.79 4,-4v-1.73L19.73,21 21,19.73 4.27,3zM14,7h4V3h-6v5.18l2,2z" />
+
+</vector>
diff --git a/catalog/java/io/material/catalog/slider/res/layout/cat_slider_demo_corner.xml b/catalog/java/io/material/catalog/slider/res/layout/cat_slider_demo_corner.xml
@@ -60,4 +60,23 @@
     app:values="@array/initial_slider_multi_values"
     android:valueFrom="0.0"
     android:valueTo="11.0" />
+
+  <com.google.android.material.slider.Slider
+    android:id="@+id/slider_icon"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:layout_marginTop="32dp"
+    android:layout_gravity="center"
+    app:trackHeight="40dp"
+    app:trackCornerSize="12dp"
+    app:thumbHeight="48dp"
+    app:trackIconActive="@drawable/baseline_music_note_24"
+    app:trackIconActiveSize="20dp"
+    app:trackIconActiveColor="@color/m3_slider_active_tick_marks_color"
+    app:trackIconInactive="@drawable/baseline_music_off_24"
+    app:trackIconInactiveSize="20dp"
+    app:trackIconInactiveColor="@color/m3_slider_inactive_tick_marks_color"
+    android:value="8.09"
+    android:valueFrom="0.0"
+    android:valueTo="11.0" />
 </LinearLayout>
diff --git a/docs/components/Slider.md b/docs/components/Slider.md
@@ -292,21 +292,27 @@ slider also has tick marks.
 
 #### Track attributes
 
-| Element                                    | Attribute                    | Related method(s)                                           | Default value                        |
-|--------------------------------------------|------------------------------|-------------------------------------------------------------|--------------------------------------|
-| **Min value**                              | `android:valueFrom`          | `setValueFrom`<br/>`getValueFrom`                           | N/A                                  |
-| **Max value**                              | `android:valueTo`            | `setValueTo`<br/>`getValueTo`                               | N/A                                  |
-| **Step size (discrete)**                   | `android:stepSize`           | `setStepSize`<br/>`getStepSize`                             | N/A                                  |
-| **Initial selected value (Slider)**        | `android:value`              | `setValue`<br/>`getValue`                                   | N/A                                  |
-| **Initial selected values (RangeSlider)**  | `app:values`                 | `setValues`<br/>`getValues`                                 | N/A                                  |
-| **Height**                                 | `app:trackHeight`            | `setTrackHeight`<br/>`getTrackHeight`                       | `16dp`                               |
-| **Color**                                  | `app:trackColor`             | `setTrackTintList`<br/>`getTrackTintList`                   | `null`                               |
-| **Color for track's active part**          | `app:trackColorActive`       | `setTrackActiveTintList`<br/>`getTrackActiveTintList`       | `?attr/colorPrimary`                 |
-| **Color for track's inactive part**        | `app:trackColorInactive`     | `setTrackInactiveTintList`<br/>`getTrackInactiveTintList`   | `?attr/colorSurfaceContainerHighest` |
-| **Corner size**                            | `app:trackCornerSize`        | `setTrackCornerSize`<br/>`getTrackCornerSize`               | `trackHeight / 2`                    |
-| **Inside corner size**                     | `app:trackInsideCornerSize`  | `setTrackInsideCornerSize`<br/>`getTrackInsideCornerSize`   | `2dp`                                |
-| **Stop indicator size**                    | `app:trackStopIndicatorSize` | `setTrackStopIndicatorSize`<br/>`getTrackStopIndicatorSize` | `4dp`                                |
-| **Minimum separation for adjacent thumbs** | `app:minSeparation`          | `setMinSeparation`<br/>`getMinSeparation`                   | `0dp`                                |
+| Element                                    | Attribute                    | Related method(s)                                                                    | Default value                        |
+|--------------------------------------------|------------------------------|--------------------------------------------------------------------------------------|--------------------------------------|
+| **Min value**                              | `android:valueFrom`          | `setValueFrom`<br/>`getValueFrom`                                                    | N/A                                  |
+| **Max value**                              | `android:valueTo`            | `setValueTo`<br/>`getValueTo`                                                        | N/A                                  |
+| **Step size (discrete)**                   | `android:stepSize`           | `setStepSize`<br/>`getStepSize`                                                      | N/A                                  |
+| **Initial selected value (Slider)**        | `android:value`              | `setValue`<br/>`getValue`                                                            | N/A                                  |
+| **Initial selected values (RangeSlider)**  | `app:values`                 | `setValues`<br/>`getValues`                                                          | N/A                                  |
+| **Height**                                 | `app:trackHeight`            | `setTrackHeight`<br/>`getTrackHeight`                                                | `16dp`                               |
+| **Color**                                  | `app:trackColor`             | `setTrackTintList`<br/>`getTrackTintList`                                            | `null`                               |
+| **Color for track's active part**          | `app:trackColorActive`       | `setTrackActiveTintList`<br/>`getTrackActiveTintList`                                | `?attr/colorPrimary`                 |
+| **Color for track's inactive part**        | `app:trackColorInactive`     | `setTrackInactiveTintList`<br/>`getTrackInactiveTintList`                            | `?attr/colorSurfaceContainerHighest` |
+| **Corner size**                            | `app:trackCornerSize`        | `setTrackCornerSize`<br/>`getTrackCornerSize`                                        | `trackHeight / 2`                    |
+| **Inside corner size**                     | `app:trackInsideCornerSize`  | `setTrackInsideCornerSize`<br/>`getTrackInsideCornerSize`                            | `2dp`                                |
+| **Stop indicator size**                    | `app:trackStopIndicatorSize` | `setTrackStopIndicatorSize`<br/>`getTrackStopIndicatorSize`                          | `4dp`                                |
+| **Minimum separation for adjacent thumbs** | `app:minSeparation`          | `setMinSeparation`<br/>`getMinSeparation`                                            | `0dp`                                |
+| **Active icon**                            | `app:trackIconActive`        | `setTrackIconActive`<br/>`setTrackIconActiveResource`<br/>`getTrackIconActive`       | `null`                               |
+| **Active icon size**                       | `app:trackIconActiveSize`    | `setTrackIconActiveSize`<br/>`getTrackIconActiveSize`                                | N/A                                  |
+| **Active icon color**                      | `app:trackIconActiveColor`   | `setTrackIconActiveColor`<br/>`getTrackIconActiveColor`                              | N/A                                  |
+| **Inactive icon**                          | `app:trackIconInactive`      | `setTrackIconInactive`<br/>`setTrackIconInactiveResource`<br/>`getTrackIconInactive` | `null`                               |
+| **Inactive icon size**                     | `app:trackIconInactiveSize`  | `setTrackIconInactiveSize`<br/>`getTrackIconInactiveSize`                            | N/A                                  |
+| **Inactive icon color**                    | `app:trackIconInactiveColor` | `setTrackIconInactiveColor`<br/>`getTrackIconInactiveColor`                          | N/A                                  |
 
 **Note:** `app:trackColor` takes precedence over `app:trackColorActive` and
 `app:trackColorInative`. It's a shorthand for setting both values to the same