[Slider][a11y] Change thumb width when it's keyboard focused.

Refactored so that each thumb is an individual drawable, so that they can change width independently. Plus, with this change a custom thumb drawable no longer changes its width when pressed.

PiperOrigin-RevId: 822162251

Author: leticiarossi

lib/java/com/google/android/material/slider/BaseSlider.java

@@ -398,10 +398,16 @@ abstract class BaseSlider<
   @NonNull private final RectF iconRectF = new RectF();
   @NonNull private final Rect iconRect = new Rect();
   @NonNull private final Matrix rotationMatrix = new Matrix();
-  @NonNull private final MaterialShapeDrawable defaultThumbDrawable = new MaterialShapeDrawable();
+  @NonNull private final List<MaterialShapeDrawable> defaultThumbDrawables = new ArrayList<>();
+
   @Nullable private Drawable customThumbDrawable;
   @NonNull private List<Drawable> customThumbDrawablesForValues = Collections.emptyList();
 
+  private float thumbElevation;
+  private float thumbStrokeWidth;
+  @Nullable private ColorStateList thumbStrokeColor;
+  @NonNull private ColorStateList thumbTintList;
+
   private float touchPosition;
   @SeparationUnit private int separationUnit = UNIT_PX;
 
@@ -494,10 +500,6 @@ public BaseSlider(
     setFocusable(true);
     setClickable(true);
 
-    // Set up the thumb drawable to always show the compat shadow.
-    defaultThumbDrawable.setShadowCompatibilityMode(
-        MaterialShapeDrawable.SHADOW_COMPAT_MODE_ALWAYS);
-
     scaledTouchSlop = ViewConfiguration.get(context).getScaledTouchSlop();
 
     accessibilityHelper = new AccessibilityHelper(this);
@@ -544,12 +546,12 @@ private void processAttributes(Context context, AttributeSet attrs, int defStyle
 
     valueFrom = a.getFloat(R.styleable.Slider_android_valueFrom, 0.0f);
     valueTo = a.getFloat(R.styleable.Slider_android_valueTo, 1.0f);
-    setValues(valueFrom);
     setCentered(a.getBoolean(R.styleable.Slider_centered, false));
     stepSize = a.getFloat(R.styleable.Slider_android_stepSize, 0.0f);
     continuousModeTickCount = a.getInt(R.styleable.Slider_continuousModeTickCount, 0);
 
-    float defaultMinTouchTargetSize = MaterialAttributes.resolveMinimumAccessibleTouchTarget(context);
+    float defaultMinTouchTargetSize =
+        MaterialAttributes.resolveMinimumAccessibleTouchTarget(context);
     minTouchTargetSize =
         (int)
             Math.ceil(
@@ -578,8 +580,10 @@ private void processAttributes(Context context, AttributeSet attrs, int defStyle
                 context, R.color.material_slider_active_track_color));
     ColorStateList thumbColor =
         MaterialResources.getColorStateList(context, a, R.styleable.Slider_thumbColor);
-    defaultThumbDrawable.setFillColor(thumbColor);
-
+    setThumbTintList(
+        thumbColor != null
+            ? thumbColor
+            : AppCompatResources.getColorStateList(context, R.color.material_slider_thumb_color));
     if (a.hasValue(R.styleable.Slider_thumbStrokeColor)) {
       setThumbStrokeColor(
           MaterialResources.getColorStateList(context, a, R.styleable.Slider_thumbStrokeColor));
@@ -660,6 +664,8 @@ private void processAttributes(Context context, AttributeSet attrs, int defStyle
       setEnabled(false);
     }
 
+    setValues(valueFrom);
+
     a.recycle();
   }
 
@@ -899,6 +905,7 @@ private void setValuesInternal(@NonNull ArrayList<Float> values) {
 
     this.values = values;
     dirtyConfig = true;
+    updateDefaultThumbDrawables();
     // Only update the focused thumb index. The active thumb index will be updated on touch.
     focusedThumbIdx = 0;
     updateHaloHotspot();
@@ -907,6 +914,30 @@ private void setValuesInternal(@NonNull ArrayList<Float> values) {
     postInvalidate();
   }
 
+  private void updateDefaultThumbDrawables() {
+    if (defaultThumbDrawables.size() != values.size()) {
+     defaultThumbDrawables.clear();
+     for (int i = 0; i < values.size(); i++) {
+       // Create default thumbs to make sure each one is an independent drawable.
+       defaultThumbDrawables.add(createNewDefaultThumb());
+     }
+    }
+  }
+
+  private MaterialShapeDrawable createNewDefaultThumb() {
+    MaterialShapeDrawable thumb = new MaterialShapeDrawable();
+    thumb.setShadowCompatibilityMode(MaterialShapeDrawable.SHADOW_COMPAT_MODE_ALWAYS);
+    thumb.setFillColor(getThumbTintList());
+    thumb.setShapeAppearanceModel(
+        ShapeAppearanceModel.builder().setAllCorners(ROUNDED, thumbWidth / 2f).build());
+    thumb.setBounds(0, 0, thumbWidth, thumbHeight);
+    thumb.setElevation(getThumbElevation());
+    thumb.setStrokeWidth(getThumbStrokeWidth());
+    thumb.setStrokeTint(getThumbStrokeColor());
+    thumb.setState(getDrawableState());
+    return thumb;
+  }
+
   private void createLabelPool() {
     // If there are too many labels, remove the extra ones from the end.
     if (labels.size() > values.size()) {
@@ -1093,12 +1124,17 @@ private Drawable initializeCustomThumbDrawable(Drawable originalDrawable) {
   }
 
   private void adjustCustomThumbDrawableBounds(Drawable drawable) {
+    adjustCustomThumbDrawableBounds(thumbWidth, drawable);
+  }
+
+  private void adjustCustomThumbDrawableBounds(
+      @IntRange(from = 0) @Px int width, Drawable drawable) {
     int originalWidth = drawable.getIntrinsicWidth();
     int originalHeight = drawable.getIntrinsicHeight();
     if (originalWidth == -1 && originalHeight == -1) {
-      drawable.setBounds(0, 0, thumbWidth, thumbHeight);
+      drawable.setBounds(0, 0, width, thumbHeight);
     } else {
-      float scaleRatio = (float) max(thumbWidth, thumbHeight) / max(originalWidth, originalHeight);
+      float scaleRatio = (float) max(width, thumbHeight) / max(originalWidth, originalHeight);
       drawable.setBounds(
           0, 0, (int) (originalWidth * scaleRatio), (int) (originalHeight * scaleRatio));
     }
@@ -1201,7 +1237,7 @@ public void setLabelFormatter(@Nullable LabelFormatter formatter) {
    * @attr ref com.google.android.material.R.styleable#Slider_thumbElevation
    */
   public float getThumbElevation() {
-    return defaultThumbDrawable.getElevation();
+    return thumbElevation;
   }
 
   /**
@@ -1211,7 +1247,13 @@ public float getThumbElevation() {
    * @attr ref com.google.android.material.R.styleable#Slider_thumbElevation
    */
   public void setThumbElevation(float elevation) {
-    defaultThumbDrawable.setElevation(elevation);
+    if (elevation == thumbElevation) {
+      return;
+    }
+    thumbElevation = elevation;
+    for (int i = 0; i < defaultThumbDrawables.size(); i++) {
+      defaultThumbDrawables.get(i).setElevation(thumbElevation);
+    }
   }
 
   /**
@@ -1296,16 +1338,26 @@ public void setThumbWidth(@IntRange(from = 0) @Px int width) {
     }
 
     thumbWidth = width;
-
-    defaultThumbDrawable.setShapeAppearanceModel(
-        ShapeAppearanceModel.builder().setAllCorners(ROUNDED, thumbWidth / 2f).build());
-    defaultThumbDrawable.setBounds(0, 0, thumbWidth, thumbHeight);
-
+    // Update custom thumbs, if any.
     if (customThumbDrawable != null) {
-      adjustCustomThumbDrawableBounds(customThumbDrawable);
+      adjustCustomThumbDrawableBounds(width, customThumbDrawable);
     }
-    for (Drawable customDrawable : customThumbDrawablesForValues) {
-      adjustCustomThumbDrawableBounds(customDrawable);
+    for (int i = 0; i < customThumbDrawablesForValues.size(); i++) {
+      adjustCustomThumbDrawableBounds(width, customThumbDrawablesForValues.get(i));
+    }
+    // Update default thumb(s).
+    setThumbWidth(width, /* thumbIndex= */ null);
+  }
+
+  private void setThumbWidth(@IntRange(from = 0) @Px int width, @Nullable Integer thumbIndex) {
+    for (int i = 0; i < defaultThumbDrawables.size(); i++) {
+      if (thumbIndex == null || i == thumbIndex) {
+        defaultThumbDrawables
+            .get(i)
+            .setShapeAppearanceModel(
+                ShapeAppearanceModel.builder().setAllCorners(ROUNDED, thumbWidth / 2f).build());
+        defaultThumbDrawables.get(i).setBounds(0, 0, width, thumbHeight);
+      }
     }
 
     updateWidgetLayout(false);
@@ -1355,7 +1407,9 @@ public void setThumbHeight(@IntRange(from = 0) @Px int height) {
 
     thumbHeight = height;
 
-    defaultThumbDrawable.setBounds(0, 0, thumbWidth, thumbHeight);
+    for (int i = 0; i < defaultThumbDrawables.size(); i++) {
+      defaultThumbDrawables.get(i).setBounds(0, 0, thumbWidth, thumbHeight);
+    }
 
     if (customThumbDrawable != null) {
       adjustCustomThumbDrawableBounds(customThumbDrawable);
@@ -1390,7 +1444,15 @@ public void setThumbHeightResource(@DimenRes int height) {
    * @see #getThumbStrokeColor()
    */
   public void setThumbStrokeColor(@Nullable ColorStateList thumbStrokeColor) {
-    defaultThumbDrawable.setStrokeColor(thumbStrokeColor);
+    if (thumbStrokeColor == this.thumbStrokeColor) {
+      return;
+    }
+
+    this.thumbStrokeColor = thumbStrokeColor;
+    for (int i = 0; i < defaultThumbDrawables.size(); i++) {
+      defaultThumbDrawables.get(i).setStrokeColor(thumbStrokeColor);
+    }
+
     postInvalidate();
   }
 
@@ -1418,8 +1480,9 @@ public void setThumbStrokeColorResource(@ColorRes int thumbStrokeColorResourceId
    * @see #setThumbStrokeColor(ColorStateList)
    * @see #setThumbStrokeColorResource(int)
    */
+  @Nullable
   public ColorStateList getThumbStrokeColor() {
-    return defaultThumbDrawable.getStrokeColor();
+    return thumbStrokeColor;
   }
 
   /**
@@ -1432,7 +1495,15 @@ public ColorStateList getThumbStrokeColor() {
    * @see #getThumbStrokeWidth()
    */
   public void setThumbStrokeWidth(float thumbStrokeWidth) {
-    defaultThumbDrawable.setStrokeWidth(thumbStrokeWidth);
+    if (thumbStrokeWidth == this.thumbStrokeWidth) {
+      return;
+    }
+
+    this.thumbStrokeWidth = thumbStrokeWidth;
+    for (int i = 0; i < defaultThumbDrawables.size(); i++) {
+      defaultThumbDrawables.get(i).setStrokeWidth(thumbStrokeWidth);
+    }
+
     postInvalidate();
   }
 
@@ -1460,7 +1531,7 @@ public void setThumbStrokeWidthResource(@DimenRes int thumbStrokeWidthResourceId
    * @see #setThumbStrokeWidthResource(int)
    */
   public float getThumbStrokeWidth() {
-    return defaultThumbDrawable.getStrokeWidth();
+    return thumbStrokeWidth;
   }
 
   /**
@@ -1708,7 +1779,7 @@ public void setHaloTintList(@NonNull ColorStateList haloColor) {
    */
   @NonNull
   public ColorStateList getThumbTintList() {
-    return defaultThumbDrawable.getFillColor();
+    return thumbTintList;
   }
 
   /**
@@ -1718,11 +1789,15 @@ public ColorStateList getThumbTintList() {
    * @attr ref com.google.android.material.R.styleable#Slider_thumbColor
    */
   public void setThumbTintList(@NonNull ColorStateList thumbColor) {
-    if (thumbColor.equals(defaultThumbDrawable.getFillColor())) {
+    if (thumbColor.equals(thumbTintList)) {
       return;
     }
 
-    defaultThumbDrawable.setFillColor(thumbColor);
+    thumbTintList = thumbColor;
+    for (int i = 0; i < defaultThumbDrawables.size(); i++) {
+      defaultThumbDrawables.get(i).setFillColor(thumbTintList);
+    }
+
     invalidate();
   }
 
@@ -3080,7 +3155,7 @@ private void drawThumbs(@NonNull Canvas canvas, int width, int yCenter) {
       } else if (i < customThumbDrawablesForValues.size()) {
         drawThumbDrawable(canvas, width, yCenter, value, customThumbDrawablesForValues.get(i));
       } else {
-        // Clear out the track behind the thumb if we're in a disable state since the thumb is
+        // Clear out the track behind the thumb if we're in a disabled state since the thumb is
         // transparent.
         if (!isEnabled()) {
           canvas.drawCircle(
@@ -3089,7 +3164,7 @@ private void drawThumbs(@NonNull Canvas canvas, int width, int yCenter) {
               getThumbRadius(),
               thumbPaint);
         }
-        drawThumbDrawable(canvas, width, yCenter, value, defaultThumbDrawable);
+        drawThumbDrawable(canvas, width, yCenter, value, defaultThumbDrawables.get(i));
       }
     }
   }
@@ -3224,13 +3299,7 @@ && abs(lastEvent.getY() - event.getY()) <= scaledTouchSlop) {
         if (activeThumbIdx != -1) {
           snapTouchPosition();
           updateHaloHotspot();
-          // Reset the thumb width.
-          if (hasGapBetweenThumbAndTrack()
-              && defaultThumbWidth != -1
-              && defaultThumbTrackGapSize != -1) {
-            setThumbWidth(defaultThumbWidth);
-            setThumbTrackGapSize(defaultThumbTrackGapSize);
-          }
+          resetThumbWidth();
           activeThumbIdx = -1;
           onStopTrackingTouch();
         }
@@ -3248,17 +3317,29 @@ && abs(lastEvent.getY() - event.getY()) <= scaledTouchSlop) {
   }
 
   private void updateThumbWidthWhenPressed() {
-    // Update thumb width and track gap size when pressed.
-    if (hasGapBetweenThumbAndTrack()) {
+    // Update default thumb width and track gap size when pressed.
+    if (hasGapBetweenThumbAndTrack()
+        && customThumbDrawable == null
+        && customThumbDrawablesForValues.isEmpty()) {
       defaultThumbWidth = thumbWidth;
       defaultThumbTrackGapSize = thumbTrackGapSize;
       int pressedThumbWidth = Math.round(thumbWidth * THUMB_WIDTH_PRESSED_RATIO);
       int delta = thumbWidth - pressedThumbWidth;
-      setThumbWidth(pressedThumbWidth);
+      // Only the currently pressed thumb should change width.
+      setThumbWidth(pressedThumbWidth, /* thumbIndex= */ activeThumbIdx);
       setThumbTrackGapSize(thumbTrackGapSize - delta / 2);
     }
   }
 
+  private void resetThumbWidth() {
+    // Reset the default thumb width.
+    if (hasGapBetweenThumbAndTrack() && defaultThumbWidth != -1 && defaultThumbTrackGapSize != -1) {
+      // Only the currently pressed thumb should change width.
+      setThumbWidth(defaultThumbWidth, /* thumbIndex= */ activeThumbIdx);
+      setThumbTrackGapSize(defaultThumbTrackGapSize);
+    }
+  }
+
   private double snapPosition(float position) {
     if (stepSize > 0.0f) {
       int stepCount = (int) ((valueTo - valueFrom) / stepSize);
@@ -3766,8 +3847,10 @@ protected void drawableStateChanged() {
         label.setState(getDrawableState());
       }
     }
-    if (defaultThumbDrawable.isStateful()) {
-      defaultThumbDrawable.setState(getDrawableState());
+    for (int i = 0; i < defaultThumbDrawables.size(); i++) {
+      if (defaultThumbDrawables.get(i).isStateful()) {
+        defaultThumbDrawables.get(i).setState(getDrawableState());
+      }
     }
     haloPaint.setColor(getColorForState(haloColor));
     haloPaint.setAlpha(HALO_ALPHA);
@@ -3802,6 +3885,7 @@ public boolean onKeyDown(int keyCode, @NonNull KeyEvent event) {
     }
 
     if (keyCode == KeyEvent.KEYCODE_TAB) {
+      resetThumbWidth();
       if (event.hasNoModifiers()) {
         return moveFocus(1);
       }
@@ -3851,6 +3935,7 @@ private boolean moveFocus(int direction) {
       return false;
     }
     activeThumbIdx = focusedThumbIdx;
+    updateThumbWidthWhenPressed();
     updateHaloHotspot();
     postInvalidate();
     return true;
@@ -3918,6 +4003,7 @@ protected void onFocusChanged(
       boolean gainFocus, int direction, @Nullable Rect previouslyFocusedRect) {
     super.onFocusChanged(gainFocus, direction, previouslyFocusedRect);
     if (!gainFocus) {
+      resetThumbWidth();
       activeThumbIdx = -1;
       accessibilityHelper.clearKeyboardFocusForVirtualView(focusedThumbIdx);
     } else {
@@ -3927,6 +4013,8 @@ protected void onFocusChanged(
         focusThumbOnFocusGained(direction);
         activeThumbIdx = focusedThumbIdx;
       }
+      resetThumbWidth();
+      updateThumbWidthWhenPressed();
       accessibilityHelper.requestKeyboardFocusForVirtualView(focusedThumbIdx);
     }
   }