Skip to content

Commit

Permalink
[NTC][Slider] Update styles
Browse files Browse the repository at this point in the history
Update the Material Slider to be compliant with the latest accessibility requirements.

PiperOrigin-RevId: 595740932
  • Loading branch information
paulfthomas authored and pekingme committed Jan 4, 2024
1 parent 98284e7 commit c218b3c
Show file tree
Hide file tree
Showing 8 changed files with 121 additions and 27 deletions.
32 changes: 16 additions & 16 deletions lib/java/com/google/android/material/slider/BaseSlider.java
Expand Up @@ -44,6 +44,8 @@
import android.graphics.Paint;
import android.graphics.Paint.Cap;
import android.graphics.Paint.Style;
import android.graphics.Path;
import android.graphics.Path.Direction;
import android.graphics.PorterDuff.Mode;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
Expand Down Expand Up @@ -334,6 +336,7 @@ abstract class BaseSlider<
@NonNull private ColorStateList trackColorActive;
@NonNull private ColorStateList trackColorInactive;

@NonNull private final Path trackPath = new Path();
@NonNull private final RectF trackRect = new RectF();
@NonNull private final RectF cornerRect = new RectF();
@NonNull private final MaterialShapeDrawable defaultThumbDrawable = new MaterialShapeDrawable();
Expand Down Expand Up @@ -2187,29 +2190,26 @@ private void updateTrack(
bounds.left += leftCornerSize;
bounds.right -= rightCornerSize;

// Draw the left and right corners as round rect.
// Build track path with rounded corners.
trackPath.reset();
trackPath.addRect(bounds, Direction.CW);
addRoundedCorners(trackPath, bounds, leftCornerSize, rightCornerSize);

// Draw the track.
paint.setStyle(Style.FILL);
paint.setStrokeCap(Cap.BUTT);
drawRoundedCorners(canvas, paint, bounds, leftCornerSize, rightCornerSize);

// Draw the track overlapping the corners.
paint.setXfermode(new PorterDuffXfermode(Mode.SRC));
canvas.drawRect(bounds, paint);
paint.setXfermode(null);
paint.setAntiAlias(true);
canvas.drawPath(trackPath, paint);
}

private void drawRoundedCorners(
Canvas canvas, Paint paint, RectF bounds, float leftCornerSize, float rightCornerSize) {
canvas.save();

private void addRoundedCorners(
Path path, RectF bounds, float leftCornerSize, float rightCornerSize) {
cornerRect.set(
bounds.left - leftCornerSize, bounds.top, bounds.left + leftCornerSize, bounds.bottom);
canvas.drawRoundRect(cornerRect, leftCornerSize, leftCornerSize, paint);
path.addRoundRect(cornerRect, leftCornerSize, leftCornerSize, Direction.CW);
cornerRect.set(
bounds.right + rightCornerSize, bounds.top, bounds.right - rightCornerSize, bounds.bottom);
canvas.drawRoundRect(cornerRect, rightCornerSize, rightCornerSize, paint);

canvas.restore();
bounds.right - rightCornerSize, bounds.top, bounds.right + rightCornerSize, bounds.bottom);
path.addRoundRect(cornerRect, rightCornerSize, rightCornerSize, Direction.CW);
}

private void maybeDrawTicks(@NonNull Canvas canvas) {
Expand Down
@@ -0,0 +1,20 @@
<?xml version="1.0" encoding="utf-8"?>
<!--
~ Copyright (C) 2023 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.
-->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@macro/m3_comp_slider_active_track_color" android:state_enabled="true"/>
<item android:alpha="@dimen/m3_comp_slider_disabled_active_track_opacity" android:color="@macro/m3_comp_slider_disabled_active_track_color"/>
</selector>
Expand Up @@ -15,6 +15,6 @@
~ limitations under the License.
-->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@macro/m3_comp_slider_inactive_track_color" android:state_enabled="true"/>
<item android:alpha="@dimen/m3_comp_slider_disabled_inactive_track_opacity" android:color="@macro/m3_comp_slider_disabled_inactive_track_color"/>
<item android:color="?attr/colorSecondaryContainer" android:state_enabled="true" />
<item android:color="?attr/colorSurfaceVariant" />
</selector>
@@ -0,0 +1,20 @@
<?xml version="1.0" encoding="utf-8"?>
<!--
~ Copyright (C) 2023 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.
-->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@macro/m3_comp_slider_inactive_track_color" android:state_enabled="true"/>
<item android:alpha="@dimen/m3_comp_slider_disabled_inactive_track_opacity" android:color="@macro/m3_comp_slider_disabled_inactive_track_color"/>
</selector>
@@ -0,0 +1,25 @@
<?xml version="1.0" encoding="utf-8"?>
<!--
~ Copyright (C) 2023 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.
-->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Disabled -->
<item android:alpha="@dimen/m3_comp_slider_disabled_handle_opacity"
android:color="@macro/m3_comp_slider_disabled_handle_color"
android:state_enabled="false"/>

<!-- Normal -->
<item android:color="@macro/m3_comp_slider_handle_color"/>
</selector>
Expand Up @@ -33,7 +33,7 @@
<dimen name="mtrl_slider_label_radius">13dp</dimen>
<dimen name="mtrl_slider_label_padding">4dp</dimen>

<dimen name="m3_slider_thumb_elevation">2dp</dimen> <!-- TODO(b/246836765): Update to the new style -->
<dimen name="m3_slider_thumb_elevation">2dp</dimen>
<dimen name="m3_slider_inactive_track_height">@dimen/m3_comp_slider_inactive_track_height</dimen>

</resources>
45 changes: 37 additions & 8 deletions lib/java/com/google/android/material/slider/res/values/styles.xml
Expand Up @@ -35,22 +35,51 @@

<style name="Widget.MaterialComponents.Slider" parent="Base.Widget.MaterialComponents.Slider"/>

<style name="Widget.Material3.Slider.Legacy" parent="Widget.MaterialComponents.Slider">
<item name="haloColor">@color/m3_slider_halo_color_legacy</item>
<item name="labelStyle">@style/Widget.Material3.Slider.Legacy.Label</item>
<item name="thumbColor">@color/m3_slider_thumb_color_legacy</item>
<item name="tickColorActive">@color/m3_slider_inactive_track_color_legacy</item>
<item name="tickColorInactive">@color/m3_slider_active_track_color_legacy</item>
<item name="trackColorActive">@color/m3_slider_active_track_color_legacy</item>
<item name="trackColorInactive">@color/m3_slider_inactive_track_color_legacy</item>
<item name="trackHeight">@dimen/m3_slider_inactive_track_height</item>
<item name="thumbElevation">@dimen/m3_slider_thumb_elevation</item>
<item name="trackInsideCornerSize">0dp</item>
<item name="thumbWidth">@null</item>
<item name="thumbHeight">@null</item>
<item name="thumbTrackGapSize">0dp</item>
<item name="trackStopIndicatorSize">0dp</item>
</style>

<style name="Widget.Material3.Slider.Legacy.Label" parent="Widget.Material3.Tooltip">
<item name="android:textColor">@macro/m3_comp_slider_label_label_text_color</item>
<item name="backgroundTint">@macro/m3_comp_slider_label_container_color</item>
</style>

<style name="Widget.Material3.Slider" parent="Widget.MaterialComponents.Slider">
<item name="haloColor">@color/m3_slider_halo_color</item> <!-- TODO(b/246836765): Check with designer regarding the new style -->
<item name="haloColor">@android:color/transparent</item>
<item name="labelStyle">@style/Widget.Material3.Slider.Label</item>
<item name="thumbColor">@color/m3_slider_thumb_color</item>
<item name="tickColorActive">@color/m3_slider_inactive_track_color</item> <!-- TODO(b/246836765): Update to the new style -->
<item name="tickColorInactive">@color/m3_slider_active_track_color</item> <!-- TODO(b/246836765): Update to the new style -->
<item name="tickColorActive">@color/m3_slider_inactive_track_color</item>
<item name="tickColorInactive">@color/m3_slider_active_track_color</item>
<item name="trackColorActive">@color/m3_slider_active_track_color</item>
<item name="trackColorInactive">@color/m3_slider_inactive_track_color</item>
<item name="trackHeight">@dimen/m3_slider_inactive_track_height</item> <!-- TODO(b/246836765): Update to the new style -->
<item name="thumbElevation">@dimen/m3_slider_thumb_elevation</item>
<item name="trackHeight">16dp</item>
<item name="thumbElevation">0dp</item>
<item name="trackInsideCornerSize">2dp</item>
<item name="thumbWidth">4dp</item>
<item name="thumbHeight">44dp</item>
<item name="thumbTrackGapSize">6dp</item>
<item name="trackStopIndicatorSize">4dp</item>
</style>

<!-- TODO(b/246836765): Update to the new style -->
<style name="Widget.Material3.Slider.Label" parent="Widget.Material3.Tooltip">
<item name="android:textColor">@macro/m3_comp_slider_label_label_text_color</item>
<item name="backgroundTint">@macro/m3_comp_slider_label_container_color</item>
<item name="android:textColor">?attr/colorOnSurfaceInverse</item>
<item name="backgroundTint">?attr/colorSurfaceInverse</item>
<item name="showMarker">false</item>
<item name="android:padding">10dp</item>
<item name="android:minHeight">32dp</item>
</style>

</resources>

0 comments on commit c218b3c

Please sign in to comment.