Skip to content

Commit 60c09d9

Browse files
paulfthomashunterstich
paulfthomas
authored and
hunterstich
committed
[Slider] Add extra track icons support
- added support for start and end track icons - removed the hide/show track icon logic to let the user implement it for more flexibility - added demo - updated tests + doc PiperOrigin-RevId: 696960630
1 parent 4ec0447 commit 60c09d9

File tree

10 files changed

+411
-209
lines changed

10 files changed

+411
-209
lines changed

‎catalog/java/io/material/catalog/slider/SliderFragment.java‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,13 @@ public Fragment createFragment() {
9191
return new SliderCornerDemoFragment();
9292
}
9393
});
94+
additionalDemos.add(
95+
new Demo(R.string.cat_slider_demo_icon_title) {
96+
@Override
97+
public Fragment createFragment() {
98+
return new SliderTrackIconDemoFragment();
99+
}
100+
});
94101
additionalDemos.add(
95102
new Demo(R.string.cat_slider_demo_vertical_title) {
96103
@Override

‎catalog/java/io/material/catalog/slider/SliderTrackIconDemoFragment.java‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
/*
2+
* Copyright 2019 The Android Open Source Project
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* https://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
package io.material.catalog.slider;
18+
19+
import io.material.catalog.R;
20+
21+
import android.os.Bundle;
22+
import android.view.LayoutInflater;
23+
import android.view.View;
24+
import android.view.ViewGroup;
25+
import androidx.annotation.NonNull;
26+
import androidx.annotation.Nullable;
27+
import com.google.android.material.slider.Slider;
28+
import io.material.catalog.feature.DemoFragment;
29+
30+
/**
31+
* Fragment to display a few basic uses of the {@link Slider} widget with different track icons for
32+
* the Catalog app.
33+
*/
34+
public class SliderTrackIconDemoFragment extends DemoFragment {
35+
36+
@Nullable
37+
@Override
38+
public View onCreateDemoView(
39+
@NonNull LayoutInflater layoutInflater,
40+
@Nullable ViewGroup viewGroup,
41+
@Nullable Bundle bundle) {
42+
return layoutInflater.inflate(
43+
R.layout.cat_slider_demo_icon, viewGroup, false /* attachToRoot */);
44+
}
45+
}

‎catalog/java/io/material/catalog/slider/res/layout/cat_slider_demo_corner.xml‎

Lines changed: 21 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
<?xml version="1.0" encoding="utf-8"?>
2-
<!--
3-
Copyright 2019 The Android Open Source Project
1+
<?xml version="1.0" encoding="utf-8"?><!--
2+
Copyright 2024 The Android Open Source Project
43
54
Licensed under the Apache License, Version 2.0 (the "License");
65
you may not use this file except in compliance with the License.
@@ -15,68 +14,49 @@
1514
limitations under the License.
1615
-->
1716
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
17+
xmlns:app="http://schemas.android.com/apk/res-auto"
1818
android:layout_width="match_parent"
1919
android:layout_height="match_parent"
20-
xmlns:app="http://schemas.android.com/apk/res-auto"
2120
android:paddingTop="16dp"
2221
android:paddingLeft="16dp"
2322
android:paddingRight="16dp"
2423
android:orientation="vertical">
2524

2625
<com.google.android.material.slider.Slider
27-
android:id="@+id/slider"
28-
android:layout_width="match_parent"
29-
android:layout_height="wrap_content"
30-
android:layout_marginTop="32dp"
31-
android:layout_gravity="center"
32-
app:trackHeight="36dp"
33-
app:trackCornerSize="12dp"
34-
android:value="8.09"
35-
android:valueFrom="0.0"
36-
android:valueTo="11.0" />
37-
38-
<com.google.android.material.slider.RangeSlider
39-
android:id="@+id/range_slider"
26+
android:id="@+id/slider"
4027
android:layout_width="match_parent"
4128
android:layout_height="wrap_content"
4229
android:layout_marginTop="32dp"
4330
android:layout_gravity="center"
44-
app:trackHeight="48dp"
45-
app:trackCornerSize="16dp"
46-
app:thumbHeight="56dp"
47-
app:values="@array/initial_slider_values"
31+
android:value="8.09"
4832
android:valueFrom="0.0"
49-
android:valueTo="11.0" />
33+
android:valueTo="11.0"
34+
app:trackCornerSize="12dp"
35+
app:trackHeight="36dp" />
5036

5137
<com.google.android.material.slider.RangeSlider
52-
android:id="@+id/range_slider_multi"
38+
android:id="@+id/range_slider"
5339
android:layout_width="match_parent"
5440
android:layout_height="wrap_content"
5541
android:layout_marginTop="32dp"
5642
android:layout_gravity="center"
57-
app:trackHeight="84dp"
58-
app:trackCornerSize="28dp"
59-
app:thumbHeight="92dp"
60-
app:values="@array/initial_slider_multi_values"
6143
android:valueFrom="0.0"
62-
android:valueTo="11.0" />
44+
android:valueTo="11.0"
45+
app:thumbHeight="56dp"
46+
app:trackCornerSize="16dp"
47+
app:trackHeight="48dp"
48+
app:values="@array/initial_slider_values" />
6349

64-
<com.google.android.material.slider.Slider
65-
android:id="@+id/slider_icon"
50+
<com.google.android.material.slider.RangeSlider
51+
android:id="@+id/range_slider_multi"
6652
android:layout_width="match_parent"
6753
android:layout_height="wrap_content"
6854
android:layout_marginTop="32dp"
6955
android:layout_gravity="center"
70-
app:trackHeight="40dp"
71-
app:trackCornerSize="12dp"
72-
app:thumbHeight="48dp"
73-
app:trackIconActive="@drawable/baseline_music_note_24"
74-
app:trackIconActiveSize="20dp"
75-
app:trackIconActiveColor="@color/m3_slider_active_tick_marks_color"
76-
app:trackIconInactive="@drawable/baseline_music_off_24"
77-
app:trackIconInactiveSize="20dp"
78-
app:trackIconInactiveColor="@color/m3_slider_inactive_tick_marks_color"
79-
android:value="8.09"
8056
android:valueFrom="0.0"
81-
android:valueTo="11.0" />
57+
android:valueTo="11.0"
58+
app:thumbHeight="92dp"
59+
app:trackCornerSize="28dp"
60+
app:trackHeight="84dp"
61+
app:values="@array/initial_slider_multi_values" />
8262
</LinearLayout>

‎catalog/java/io/material/catalog/slider/res/layout/cat_slider_demo_icon.xml‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<?xml version="1.0" encoding="utf-8"?><!--
2+
Copyright 2024 The Android Open Source Project
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
-->
16+
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
17+
xmlns:app="http://schemas.android.com/apk/res-auto"
18+
android:layout_width="match_parent"
19+
android:layout_height="match_parent"
20+
android:paddingTop="16dp"
21+
android:paddingLeft="16dp"
22+
android:paddingRight="16dp"
23+
android:orientation="vertical">
24+
25+
<com.google.android.material.slider.Slider
26+
android:id="@+id/slider_icon_start"
27+
android:layout_width="match_parent"
28+
android:layout_height="wrap_content"
29+
android:layout_marginTop="32dp"
30+
android:layout_gravity="center"
31+
android:value="8.09"
32+
android:valueFrom="0.0"
33+
android:valueTo="11.0"
34+
app:thumbHeight="48dp"
35+
app:trackCornerSize="12dp"
36+
app:trackHeight="40dp"
37+
app:trackIconActiveColor="@color/m3_slider_active_tick_marks_color"
38+
app:trackIconActiveStart="@drawable/baseline_music_note_24"
39+
app:trackIconInactiveColor="@color/m3_slider_inactive_tick_marks_color"
40+
app:trackIconInactiveStart="@drawable/baseline_music_off_24"
41+
app:trackIconSize="20dp" />
42+
43+
<com.google.android.material.slider.Slider
44+
android:id="@+id/slider_icon_end"
45+
android:layout_width="match_parent"
46+
android:layout_height="wrap_content"
47+
android:layout_marginTop="32dp"
48+
android:layout_gravity="center"
49+
android:value="8.09"
50+
android:valueFrom="0.0"
51+
android:valueTo="11.0"
52+
app:thumbHeight="48dp"
53+
app:trackCornerSize="12dp"
54+
app:trackHeight="40dp"
55+
app:trackIconActiveColor="@color/m3_slider_active_tick_marks_color"
56+
app:trackIconActiveEnd="@drawable/baseline_music_note_24"
57+
app:trackIconInactiveColor="@color/m3_slider_inactive_tick_marks_color"
58+
app:trackIconInactiveEnd="@drawable/baseline_music_off_24"
59+
app:trackIconSize="20dp"
60+
app:trackStopIndicatorSize="0dp" />
61+
62+
<com.google.android.material.slider.Slider
63+
android:id="@+id/slider_icon_start_end"
64+
android:layout_width="match_parent"
65+
android:layout_height="wrap_content"
66+
android:layout_marginTop="32dp"
67+
android:layout_gravity="center"
68+
android:value="8.09"
69+
android:valueFrom="0.0"
70+
android:valueTo="11.0"
71+
app:thumbHeight="48dp"
72+
app:trackCornerSize="12dp"
73+
app:trackHeight="40dp"
74+
app:trackIconActiveColor="@color/m3_slider_active_tick_marks_color"
75+
app:trackIconActiveEnd="@drawable/baseline_music_note_24"
76+
app:trackIconActiveStart="@drawable/baseline_music_note_24"
77+
app:trackIconInactiveColor="@color/m3_slider_inactive_tick_marks_color"
78+
app:trackIconInactiveEnd="@drawable/baseline_music_off_24"
79+
app:trackIconInactiveStart="@drawable/baseline_music_off_24"
80+
app:trackIconSize="20dp"
81+
app:trackStopIndicatorSize="0dp" />
82+
</LinearLayout>

‎catalog/java/io/material/catalog/slider/res/layout/cat_slider_demo_vertical.xml‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,12 +34,11 @@
3434
app:thumbHeight="48dp"
3535
app:trackCornerSize="12dp"
3636
app:trackHeight="40dp"
37-
app:trackIconActive="@drawable/baseline_music_note_24"
37+
app:trackIconSize="20dp"
38+
app:trackIconActiveStart="@drawable/baseline_music_note_24"
3839
app:trackIconActiveColor="@color/m3_slider_active_tick_marks_color"
39-
app:trackIconActiveSize="20dp"
40-
app:trackIconInactive="@drawable/baseline_music_off_24"
41-
app:trackIconInactiveColor="@color/m3_slider_inactive_tick_marks_color"
42-
app:trackIconInactiveSize="20dp" />
40+
app:trackIconInactiveStart="@drawable/baseline_music_off_24"
41+
app:trackIconInactiveColor="@color/m3_slider_inactive_tick_marks_color" />
4342

4443
<com.google.android.material.materialswitch.MaterialSwitch
4544
android:id="@+id/switch_button"

‎catalog/java/io/material/catalog/slider/res/values/strings.xml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
<string name="cat_slider_demo_scroll_container_title" description="Title for the Slider inside scrolling container demo [CHAR LIMIT=NONE]">Slider in scrolling container demo</string>
2222
<string name="cat_slider_demo_label_behavior_title" description="Title for the Slider with different label behaviors demo [CHAR LIMIT=NONE]">Slider label behavior demo</string>
2323
<string name="cat_slider_demo_corner_title" description="Title for the Slider with different corner sizes demo [CHAR LIMIT=NONE]">Slider custom corners demo</string>
24+
<string name="cat_slider_demo_icon_title" description="Title for the Slider with different track icons demo [CHAR LIMIT=NONE]">Slider track icons demo</string>
2425
<string name="cat_slider_demo_vertical_title" description="Title for the vertical Slider demo [CHAR LIMIT=NONE]">Slider vertical demo</string>
2526

2627
<string name="cat_slider_description" description="Body text describing the Slider widget within the design system [CHAR LIMIT=NONE]">

‎docs/components/Slider.md‎

Lines changed: 23 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -292,28 +292,29 @@ slider also has tick marks.
292292

293293
#### Track attributes
294294

295-
| Element | Attribute | Related method(s) | Default value |
296-
|--------------------------------------------|------------------------------|--------------------------------------------------------------------------------------|--------------------------------------|
297-
| **Orientation** | `android:orientation` | `setOrientation`<br/>`isVertical` | `horizontal` |
298-
| **Min value** | `android:valueFrom` | `setValueFrom`<br/>`getValueFrom` | N/A |
299-
| **Max value** | `android:valueTo` | `setValueTo`<br/>`getValueTo` | N/A |
300-
| **Step size (discrete)** | `android:stepSize` | `setStepSize`<br/>`getStepSize` | N/A |
301-
| **Initial selected value (Slider)** | `android:value` | `setValue`<br/>`getValue` | N/A |
302-
| **Initial selected values (RangeSlider)** | `app:values` | `setValues`<br/>`getValues` | N/A |
303-
| **Height** | `app:trackHeight` | `setTrackHeight`<br/>`getTrackHeight` | `16dp` |
304-
| **Color** | `app:trackColor` | `setTrackTintList`<br/>`getTrackTintList` | `null` |
305-
| **Color for track's active part** | `app:trackColorActive` | `setTrackActiveTintList`<br/>`getTrackActiveTintList` | `?attr/colorPrimary` |
306-
| **Color for track's inactive part** | `app:trackColorInactive` | `setTrackInactiveTintList`<br/>`getTrackInactiveTintList` | `?attr/colorSurfaceContainerHighest` |
307-
| **Corner size** | `app:trackCornerSize` | `setTrackCornerSize`<br/>`getTrackCornerSize` | `trackHeight / 2` |
308-
| **Inside corner size** | `app:trackInsideCornerSize` | `setTrackInsideCornerSize`<br/>`getTrackInsideCornerSize` | `2dp` |
309-
| **Stop indicator size** | `app:trackStopIndicatorSize` | `setTrackStopIndicatorSize`<br/>`getTrackStopIndicatorSize` | `4dp` |
310-
| **Minimum separation for adjacent thumbs** | `app:minSeparation` | `setMinSeparation`<br/>`getMinSeparation` | `0dp` |
311-
| **Active icon** | `app:trackIconActive` | `setTrackIconActive`<br/>`setTrackIconActiveResource`<br/>`getTrackIconActive` | `null` |
312-
| **Active icon size** | `app:trackIconActiveSize` | `setTrackIconActiveSize`<br/>`getTrackIconActiveSize` | N/A |
313-
| **Active icon color** | `app:trackIconActiveColor` | `setTrackIconActiveColor`<br/>`getTrackIconActiveColor` | N/A |
314-
| **Inactive icon** | `app:trackIconInactive` | `setTrackIconInactive`<br/>`setTrackIconInactiveResource`<br/>`getTrackIconInactive` | `null` |
315-
| **Inactive icon size** | `app:trackIconInactiveSize` | `setTrackIconInactiveSize`<br/>`getTrackIconInactiveSize` | N/A |
316-
| **Inactive icon color** | `app:trackIconInactiveColor` | `setTrackIconInactiveColor`<br/>`getTrackIconInactiveColor` | N/A |
295+
| Element | Attribute | Related method(s) | Default value |
296+
|--------------------------------------------|------------------------------|-------------------------------------------------------------|--------------------------------------|
297+
| **Orientation** | `android:orientation` | `setOrientation`<br/>`isVertical` | `horizontal` |
298+
| **Min value** | `android:valueFrom` | `setValueFrom`<br/>`getValueFrom` | N/A |
299+
| **Max value** | `android:valueTo` | `setValueTo`<br/>`getValueTo` | N/A |
300+
| **Step size (discrete)** | `android:stepSize` | `setStepSize`<br/>`getStepSize` | N/A |
301+
| **Initial selected value (Slider)** | `android:value` | `setValue`<br/>`getValue` | N/A |
302+
| **Initial selected values (RangeSlider)** | `app:values` | `setValues`<br/>`getValues` | N/A |
303+
| **Height** | `app:trackHeight` | `setTrackHeight`<br/>`getTrackHeight` | `16dp` |
304+
| **Color** | `app:trackColor` | `setTrackTintList`<br/>`getTrackTintList` | `null` |
305+
| **Color for track's active part** | `app:trackColorActive` | `setTrackActiveTintList`<br/>`getTrackActiveTintList` | `?attr/colorPrimary` |
306+
| **Color for track's inactive part** | `app:trackColorInactive` | `setTrackInactiveTintList`<br/>`getTrackInactiveTintList` | `?attr/colorSurfaceContainerHighest` |
307+
| **Corner size** | `app:trackCornerSize` | `setTrackCornerSize`<br/>`getTrackCornerSize` | `trackHeight / 2` |
308+
| **Inside corner size** | `app:trackInsideCornerSize` | `setTrackInsideCornerSize`<br/>`getTrackInsideCornerSize` | `2dp` |
309+
| **Stop indicator size** | `app:trackStopIndicatorSize` | `setTrackStopIndicatorSize`<br/>`getTrackStopIndicatorSize` | `4dp` |
310+
| **Minimum separation for adjacent thumbs** | `app:minSeparation` | `setMinSeparation`<br/>`getMinSeparation` | `0dp` |
311+
| **Active start icon** | `app:trackIconActiveStart` | `setTrackIconActiveStart`<br/>`getTrackIconActiveStart` | `null` |
312+
| **Active end icon** | `app:trackIconActiveEnd` | `setTrackIconActiveEnd`<br/>`getTrackIconActiveEnd` | `null` |
313+
| **Active icon color** | `app:trackIconActiveColor` | `setTrackIconActiveColor`<br/>`getTrackIconActiveColor` | N/A |
314+
| **Inactive start icon** | `app:trackIconInactiveStart` | `setTrackIconInactiveStart`<br/>`getTrackIconInactiveStart` | `null` |
315+
| **Inactive end icon** | `app:trackIconInactiveEnd` | `setTrackIconInactiveEnd`<br/>`getTrackIconInactiveEnd` | `null` |
316+
| **Inactive icon color** | `app:trackIconInactiveColor` | `setTrackIconInactiveColor`<br/>`getTrackIconInactiveColor` | N/A |
317+
| **Icon size** | `app:trackIconSize` | `setTrackIconSize`<br/>`getTrackIconSize` | N/A |
317318

318319
**Note:** `app:trackColor` takes precedence over `app:trackColorActive` and
319320
`app:trackColorInative`. It's a shorthand for setting both values to the same

0 commit comments

Comments
 (0)