Update Slider to use TooltipDrawable

PiperOrigin-RevId: 282583539

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

@@ -28,10 +28,7 @@
 import android.graphics.Paint;
 import android.graphics.Paint.Style;
 import android.graphics.PorterDuff.Mode;
-import android.graphics.PorterDuffColorFilter;
 import android.graphics.PorterDuffXfermode;
-import android.graphics.Rect;
-import android.graphics.Typeface;
 import android.graphics.drawable.Drawable;
 import android.graphics.drawable.RippleDrawable;
 import android.os.Build.VERSION;
@@ -57,6 +54,7 @@
 import com.google.android.material.shape.CornerFamily;
 import com.google.android.material.shape.MaterialShapeDrawable;
 import com.google.android.material.shape.ShapeAppearanceModel;
+import com.google.android.material.tooltip.TooltipDrawable;
 import java.util.Locale;
 
 /**
@@ -102,8 +100,7 @@
  *       track. Only used when the slider is in discrete mode.
  *   <li>{@code inactiveTickColor}: the color of the slider's tick marks for the inactive part of
  *       the track. Only used when the slider is in discrete mode.
- *   <li>{@code labelColor}: the color of the text displayed in the slider's bubble. Only used when
- *       the slider is in discrete mode.
+ *   <li>{@code labelStyle}: the style to apply to the value indicator {@link TooltipDrawable}.
  * </ul>
  *
  * <p>The following XML attributes are used to set the slider's various parameters of operation:
@@ -133,10 +130,15 @@
  * @attr ref com.google.android.material.R.styleable#Slider_activeTrackColor
  * @attr ref com.google.android.material.R.styleable#Slider_inactiveTrackColor
  * @attr ref com.google.android.material.R.styleable#Slider_thumbColor
+ * @attr ref com.google.android.material.R.styleable#Slider_haloColor
  * @attr ref com.google.android.material.R.styleable#Slider_tickColor
  * @attr ref com.google.android.material.R.styleable#Slider_activeTickColor
  * @attr ref com.google.android.material.R.styleable#Slider_inactiveTickColor
- * @attr ref com.google.android.material.R.styleable#Slider_labelColor
+ * @attr ref com.google.android.material.R.styleable#Slider_labelStyle
+ * @attr ref com.google.android.material.R.styleable#Slider_floatingLabel
+ * @attr ref com.google.android.material.R.styleable#Slider_thumbRadius
+ * @attr ref com.google.android.material.R.styleable#Slider_thumbElevation
+ * @attr ref com.google.android.material.R.styleable#Slider_haloRadius
  */
 public class Slider extends View {
 
@@ -160,11 +162,8 @@ public class Slider extends View {
   @NonNull private final Paint thumbPaint;
   @NonNull private final Paint haloPaint;
   @NonNull private final Paint ticksPaint;
-  @NonNull private final Drawable label;
-  @NonNull private final Paint labelTextPaint;
-  @NonNull private final Rect labelTextBounds;
 
-  @NonNull private String labelText = "";
+  @NonNull private TooltipDrawable label;
 
   private int widgetHeight;
   private int widgetHeightLabel;
@@ -175,12 +174,7 @@ public class Slider extends View {
   private int trackTopLabel;
   private int thumbRadius;
   private int haloRadius;
-  private int labelWidth;
-  private int labelHeight;
   private int labelPadding;
-  private int labelTopOffset;
-  private float labelTextSize;
-  private int labelTextTopOffset;
   private OnChangeListener listener;
   private LabelFormatter formatter;
   private boolean thumbIsPressed = false;
@@ -197,7 +191,6 @@ public class Slider extends View {
   @NonNull private ColorStateList thumbColor;
   @NonNull private ColorStateList haloColor;
   @NonNull private ColorStateList tickColor;
-  @NonNull private ColorStateList textColor;
 
   @NonNull private final MaterialShapeDrawable thumbDrawable = new MaterialShapeDrawable();
 
@@ -287,15 +280,6 @@ public Slider(@NonNull Context context, @Nullable AttributeSet attrs, int defSty
       }
     }
 
-    label = context.getResources().getDrawable(R.drawable.mtrl_slider_label);
-    label.setColorFilter(new PorterDuffColorFilter(getColorForState(thumbColor), Mode.MULTIPLY));
-
-    labelTextPaint = new Paint();
-    labelTextPaint.setTypeface(Typeface.DEFAULT);
-    labelTextPaint.setTextSize(labelTextSize);
-
-    labelTextBounds = new Rect();
-
     super.setOnFocusChangeListener(
         new OnFocusChangeListener() {
           @Override
@@ -332,12 +316,7 @@ private void loadResources(@NonNull Resources resources) {
     trackTop = resources.getDimensionPixelOffset(R.dimen.mtrl_slider_track_top);
     trackTopLabel = resources.getDimensionPixelOffset(R.dimen.mtrl_slider_track_top_label);
 
-    labelWidth = resources.getDimensionPixelSize(R.dimen.mtrl_slider_label_width);
-    labelHeight = resources.getDimensionPixelSize(R.dimen.mtrl_slider_label_height);
     labelPadding = resources.getDimensionPixelSize(R.dimen.mtrl_slider_label_padding);
-    labelTopOffset = resources.getDimensionPixelSize(R.dimen.mtrl_slider_label_top_offset);
-    labelTextSize = resources.getDimension(R.dimen.mtrl_slider_label_text_size);
-    labelTextTopOffset = resources.getDimensionPixelSize(R.dimen.mtrl_slider_label_text_top_offset);
   }
 
   private void processAttributes(Context context, AttributeSet attrs, int defStyleAttr) {
@@ -362,7 +341,8 @@ private void processAttributes(Context context, AttributeSet attrs, int defStyle
     thumbDrawable.setFillColor(thumbColor);
     haloColor = MaterialResources.getColorStateList(context, a, R.styleable.Slider_haloColor);
     tickColor = MaterialResources.getColorStateList(context, a, R.styleable.Slider_activeTickColor);
-    textColor = MaterialResources.getColorStateList(context, a, R.styleable.Slider_labelColor);
+
+    label = parseLabelDrawable(context, a);
 
     setThumbRadius(a.getDimensionPixelSize(R.styleable.Slider_thumbRadius, 0));
     haloRadius = a.getDimensionPixelSize(R.styleable.Slider_haloRadius, 0);
@@ -377,6 +357,20 @@ private void processAttributes(Context context, AttributeSet attrs, int defStyle
     validateStepSize();
   }
 
+  @NonNull
+  private TooltipDrawable parseLabelDrawable(@NonNull Context context, @NonNull TypedArray a) {
+    TooltipDrawable label =
+        TooltipDrawable.createFromAttributes(
+            context,
+            null,
+            0,
+            a.getResourceId(
+                R.styleable.Slider_labelStyle, R.style.Widget_MaterialComponents_Tooltip));
+    label.setRelativeToView(this);
+
+    return label;
+  }
+
   private void validateValueFrom() {
     if (valueFrom >= valueTo) {
       Log.e(TAG, EXCEPTION_ILLEGAL_VALUE_FROM);
@@ -685,7 +679,6 @@ protected void onDraw(@NonNull Canvas canvas) {
 
       maybeDrawHalo(canvas, trackWidth, top);
       drawLabel(canvas, trackWidth, top);
-      drawLabelText(canvas, trackWidth, top);
     }
 
     drawThumb(canvas, trackWidth, top);
@@ -708,18 +701,12 @@ private void drawTicks(@NonNull Canvas canvas) {
   }
 
   private void drawLabel(@NonNull Canvas canvas, int width, int top) {
-    int left = trackSidePadding + (int) (thumbPosition * width) - labelWidth / 2;
-    top -= labelTopOffset + labelPadding + thumbRadius;
-    label.setBounds(left, top, left + labelWidth, top + labelHeight);
+    int left = trackSidePadding + (int) (thumbPosition * width) - label.getIntrinsicWidth() / 2;
+    top -= labelPadding + thumbRadius;
+    label.setBounds(left, top - label.getIntrinsicHeight(), left + label.getIntrinsicWidth(), top);
     label.draw(canvas);
   }
 
-  private void drawLabelText(@NonNull Canvas canvas, int width, int top) {
-    labelTextPaint.getTextBounds(labelText, 0, labelText.length(), labelTextBounds);
-    int left = trackSidePadding + (int) (thumbPosition * width) - labelTextBounds.width() / 2;
-    canvas.drawText(labelText, left, top - labelTextTopOffset - thumbRadius, labelTextPaint);
-  }
-
   private void drawThumb(@NonNull Canvas canvas, int width, int top) {
     // Clear out the track behind the thumb if we're in a disable state since the thumb is
     // transparent.
@@ -785,9 +772,9 @@ public boolean onTouchEvent(@NonNull MotionEvent event) {
     }
     float value = getValue();
     if (hasLabelFormatter()) {
-      labelText = formatter.getFormattedValue(value);
+      label.setText(formatter.getFormattedValue(value));
     } else {
-      labelText = String.format((int) value == value ? "%.0f" : "%.2f", value);
+      label.setText(String.format((int) value == value ? "%.0f" : "%.2f", value));
     }
 
     // Set if the thumb is pressed. This will cause the ripple to be drawn.
@@ -809,7 +796,9 @@ protected void drawableStateChanged() {
     inactiveTrackPaint.setColor(getColorForState(inactiveTrackColor));
     activeTrackPaint.setColor(getColorForState(activeTrackColor));
     ticksPaint.setColor(getColorForState(tickColor));
-    labelTextPaint.setColor(getColorForState(textColor));
+    if (label.isStateful()) {
+      label.setState(getDrawableState());
+    }
     if (thumbDrawable.isStateful()) {
       thumbDrawable.setState(getDrawableState());
     }

lib/java/com/google/android/material/slider/res-public/values/public.xml

@@ -25,7 +25,7 @@
   <public name="tickColor" type="attr" />
   <public name="activeTickColor" type="attr" />
   <public name="inactiveTickColor" type="attr" />
-  <public name="labelColor" type="attr" />
+  <public name="labelStyle" type="attr" />
   <public name="floatingLabel" type="attr" />
   <public name="thumbRadius" format="attr" />
   <public name="thumbElevation" format="attr" />

lib/java/com/google/android/material/slider/res/values/attrs.xml

@@ -38,8 +38,8 @@
     <!-- The color of the slider's tick marks for the inactive portion of the track. Only used when
          the slider is in discrete mode. -->
     <attr name="inactiveTickColor" format="color" />
-    <!-- The color of the text displayed in the slider's bubble. -->
-    <attr name="labelColor" format="color" />
+    <!-- The style used for the label TooltipDrawable. -->
+    <attr name="labelStyle" format="reference" />
     <!-- Determines if Slider should increase its default height to include space for the label. -->
     <attr name="floatingLabel" format="boolean" />
     <!-- The radius of the thumb. -->

lib/java/com/google/android/material/slider/res/values/dimens.xml

@@ -34,8 +34,5 @@
   <dimen name="mtrl_slider_label_width">26dp</dimen>
   <dimen name="mtrl_slider_label_height">26dp</dimen>
   <dimen name="mtrl_slider_label_radius">13dp</dimen>
-  <dimen name="mtrl_slider_label_top_offset">33dp</dimen>
   <dimen name="mtrl_slider_label_padding">4dp</dimen>
-  <dimen name="mtrl_slider_label_text_size">10sp</dimen>
-  <dimen name="mtrl_slider_label_text_top_offset">20dp</dimen>
 </resources>

lib/java/com/google/android/material/slider/res/values/styles.xml

@@ -23,13 +23,12 @@
     <item name="haloColor">@color/material_slider_halo_color</item>
     <item name="activeTickColor">@color/material_slider_active_tick_marks_color</item>
     <item name="inactiveTickColor">@color/material_slider_inactive_tick_marks_color</item>
-    <item name="labelColor">?attr/colorOnPrimary</item>
+    <item name="labelStyle">@style/Widget.MaterialComponents.Tooltip</item>
     <item name="thumbRadius">@dimen/mtrl_slider_thumb_radius</item>
     <item name="haloRadius">@dimen/mtrl_slider_halo_radius</item>
     <item name="thumbElevation">@dimen/mtrl_slider_thumb_elevation</item>
   </style>
 
   <style name="Widget.MaterialComponents.Slider" parent="Base.Widget.MaterialComponents.Slider"/>
 
-
 </resources>

lib/java/com/google/android/material/tooltip/TooltipDrawable.java

@@ -65,7 +65,7 @@ public class TooltipDrawable extends MaterialShapeDrawable implements TextDrawab
   @StyleRes private static final int DEFAULT_STYLE = R.style.Widget_MaterialComponents_Tooltip;
   @AttrRes private static final int DEFAULT_THEME_ATTR = R.attr.tooltipStyle;
 
-  @NonNull private CharSequence text = "";
+  @Nullable private CharSequence text;
   @NonNull private final Context context;
   @Nullable private final FontMetrics fontMetrics = new FontMetrics();
 
@@ -179,7 +179,7 @@ private void loadFromAttributes(
    *
    * @attr ref com.google.android.material.R.styleable#Tooltip_android_text
    */
-  @NonNull
+  @Nullable
   public CharSequence getText() {
     return text;
   }
@@ -202,7 +202,7 @@ public void setTextResource(@StringRes int id) {
    * @see #setTextResource(int)
    * @attr ref com.google.android.material.R.styleable#Tooltip_android_text
    */
-  public void setText(@NonNull CharSequence text) {
+  public void setText(@Nullable CharSequence text) {
     if (!TextUtils.equals(this.text, text)) {
       this.text = text;
       textDrawableHelper.setTextWidthDirty(true);
@@ -419,6 +419,11 @@ private EdgeTreatment createMarkerEdge() {
   }
 
   private void drawText(@NonNull Canvas canvas) {
+    if (text == null) {
+      // If text is null there's nothing to draw.
+      return;
+    }
+
     Rect bounds = getBounds();
     int y = (int) calculateTextOriginAndAlignment(bounds);
 
@@ -431,7 +436,10 @@ private void drawText(@NonNull Canvas canvas) {
   }
 
   private float getTextWidth() {
-    return textDrawableHelper.getTextWidth(getText().toString());
+    if (text == null) {
+      return 0;
+    }
+    return textDrawableHelper.getTextWidth(text.toString());
   }
 
   /** Calculates the text origin and alignment based on the bounds. */