Remove the requirement to setClipChildren false on the parent of Slider

Draw the Slider label with ViewOverlay, and update the way the halo is drawn pre lollipop. This stops any clipping that happens by the bounds view.

Resolves #697

PiperOrigin-RevId: 284650572

Author: cketcham

catalog/java/io/material/catalog/slider/res/layout/cat_slider_demo_continuous.xml

@@ -24,8 +24,6 @@
       android:layout_height="wrap_content"
       android:paddingLeft="16dp"
       android:paddingRight="16dp"
-      android:clipChildren="false"
-      android:clipToPadding="false"
       android:orientation="vertical">
 
     <TextView
@@ -37,8 +35,6 @@
     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:clipChildren="false"
-        android:clipToPadding="false"
         android:gravity="center_vertical">
 
       <com.google.android.material.switchmaterial.SwitchMaterial
@@ -73,9 +69,7 @@
     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:gravity="center_vertical"
-        android:clipChildren="false"
-        android:clipToPadding="false">
+        android:gravity="center_vertical">
 
       <com.google.android.material.switchmaterial.SwitchMaterial
           android:id="@+id/switch_button_2"
@@ -109,9 +103,7 @@
     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:gravity="center_vertical"
-        android:clipChildren="false"
-        android:clipToPadding="false">
+        android:gravity="center_vertical">
 
       <com.google.android.material.switchmaterial.SwitchMaterial
           android:id="@+id/switch_button_3"

catalog/java/io/material/catalog/slider/res/layout/cat_slider_demo_discrete.xml

@@ -24,8 +24,6 @@
       android:layout_height="wrap_content"
       android:paddingLeft="16dp"
       android:paddingRight="16dp"
-      android:clipChildren="false"
-      android:clipToPadding="false"
       android:orientation="vertical">
 
     <TextView
@@ -37,9 +35,7 @@
     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:gravity="center_vertical"
-        android:clipChildren="false"
-        android:clipToPadding="false">
+        android:gravity="center_vertical">
 
       <androidx.appcompat.widget.SwitchCompat
           android:id="@+id/switch_button_1"
@@ -69,9 +65,7 @@
     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:gravity="center_vertical"
-        android:clipChildren="false"
-        android:clipToPadding="false">
+        android:gravity="center_vertical">
 
       <androidx.appcompat.widget.SwitchCompat
           android:id="@+id/switch_button_2"
@@ -101,9 +95,7 @@
     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:gravity="center_vertical"
-        android:clipChildren="false"
-        android:clipToPadding="false">
+        android:gravity="center_vertical">
 
       <androidx.appcompat.widget.SwitchCompat
           android:id="@+id/switch_button_3"
@@ -133,9 +125,7 @@
     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:gravity="center_vertical"
-        android:clipChildren="false"
-        android:clipToPadding="false">
+        android:gravity="center_vertical">
 
       <androidx.appcompat.widget.SwitchCompat
           android:id="@+id/switch_button_4"
@@ -165,9 +155,7 @@
     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:gravity="center_vertical"
-        android:clipChildren="false"
-        android:clipToPadding="false">
+        android:gravity="center_vertical">
 
       <androidx.appcompat.widget.SwitchCompat
           android:id="@+id/switch_button_5"

catalog/java/io/material/catalog/slider/res/layout/cat_slider_fragment.xml

@@ -20,8 +20,6 @@
     android:paddingTop="16dp"
     android:paddingLeft="16dp"
     android:paddingRight="16dp"
-    android:clipChildren="false"
-    android:clipToPadding="false"
     android:orientation="vertical">
 
   <com.google.android.material.slider.Slider

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

@@ -29,6 +29,8 @@
 import android.graphics.Paint.Style;
 import android.graphics.PorterDuff.Mode;
 import android.graphics.PorterDuffXfermode;
+import android.graphics.Rect;
+import android.graphics.Region.Op;
 import android.graphics.drawable.Drawable;
 import android.graphics.drawable.RippleDrawable;
 import android.os.Build.VERSION;
@@ -49,7 +51,9 @@
 import android.view.MotionEvent;
 import android.view.View;
 import com.google.android.material.drawable.DrawableUtils;
+import com.google.android.material.internal.DescendantOffsetUtils;
 import com.google.android.material.internal.ThemeEnforcement;
+import com.google.android.material.internal.ViewUtils;
 import com.google.android.material.resources.MaterialResources;
 import com.google.android.material.shape.CornerFamily;
 import com.google.android.material.shape.MaterialShapeDrawable;
@@ -279,6 +283,9 @@ public Slider(@NonNull Context context, @Nullable AttributeSet attrs, int defSty
         ((RippleDrawable) background).setColor(haloColor);
         DrawableUtils.setRippleDrawableRadius(background, haloRadius);
       }
+      // Because the RippleDrawable can draw outside the bounds of the view, we can set the layer
+      // type to hardware so we can use PorterDuffXfermode when drawing.
+      setLayerType(LAYER_TYPE_HARDWARE, null);
     }
 
     super.setOnFocusChangeListener(
@@ -300,8 +307,11 @@ public void setEnabled(boolean enabled) {
     super.setEnabled(enabled);
     // When we're disabled, set the layer type to hardware so we can clear the track out from behind
     // the thumb. When enabled set the layer type to none so that the halo can be drawn outside the
-    // bounds of the slider.
-    setLayerType(enabled ? LAYER_TYPE_NONE : LAYER_TYPE_HARDWARE, null);
+    // bounds of the slider. After Lollipop we use Ripple for the halo, and an Overlay for the
+    // marker so we don't need to worry about drawing outside the bounds.
+    if (VERSION.SDK_INT < VERSION_CODES.LOLLIPOP) {
+      setLayerType(enabled ? LAYER_TYPE_NONE : LAYER_TYPE_HARDWARE, null);
+    }
   }
 
   @Override
@@ -360,16 +370,25 @@ private void processAttributes(Context context, AttributeSet attrs, int defStyle
 
   @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 TooltipDrawable.createFromAttributes(
+        context,
+        null,
+        0,
+        a.getResourceId(R.styleable.Slider_labelStyle, R.style.Widget_MaterialComponents_Tooltip));
+  }
 
-    return label;
+  @Override
+  protected void onAttachedToWindow() {
+    super.onAttachedToWindow();
+    // The label is attached on the Overlay relative to the content.
+    label.setRelativeToView(ViewUtils.getContentView(this));
+  }
+
+  @Override
+  protected void onDetachedFromWindow() {
+    super.onDetachedFromWindow();
+    ViewUtils.getContentViewOverlay(this).remove(label);
+    label.detachView(ViewUtils.getContentView(this));
   }
 
   private void validateValueFrom() {
@@ -679,7 +698,6 @@ protected void onDraw(@NonNull Canvas canvas) {
       }
 
       maybeDrawHalo(canvas, trackWidth, top);
-      drawLabel(canvas, trackWidth, top);
     }
 
     drawThumb(canvas, trackWidth, top);
@@ -701,13 +719,6 @@ private void drawTicks(@NonNull Canvas canvas) {
     canvas.drawPoints(ticksCoordinates, ticksPaint);
   }
 
-  private void drawLabel(@NonNull Canvas canvas, int width, int top) {
-    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 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.
@@ -725,7 +736,17 @@ private void drawThumb(@NonNull Canvas canvas, int width, int top) {
   private void maybeDrawHalo(@NonNull Canvas canvas, int width, int top) {
     // Only draw the halo for devices which don't support the ripple.
     if (forceDrawCompatShadow || VERSION.SDK_INT < VERSION_CODES.LOLLIPOP) {
-      canvas.drawCircle(trackSidePadding + thumbPosition * width, top, haloRadius, haloPaint);
+      int centerX = (int) (trackSidePadding + thumbPosition * width);
+      if (VERSION.SDK_INT < VERSION_CODES.LOLLIPOP) {
+        // In this case we can clip the rect to allow drawing outside the bounds.
+        canvas.clipRect(
+            centerX - haloRadius,
+            top - haloRadius,
+            centerX + haloRadius,
+            top + haloRadius,
+            Op.UNION);
+      }
+      canvas.drawCircle(centerX, top, haloRadius, haloPaint);
     }
   }
 
@@ -747,6 +768,8 @@ public boolean onTouchEvent(@NonNull MotionEvent event) {
         thumbPosition = position;
         snapThumbPosition();
         updateHaloHotSpot();
+        ensureLabel();
+        updateLabelPosition();
         invalidate();
         if (hasOnChangeListener()) {
           listener.onValueChange(this, getValue());
@@ -756,6 +779,8 @@ public boolean onTouchEvent(@NonNull MotionEvent event) {
         thumbPosition = position;
         snapThumbPosition();
         updateHaloHotSpot();
+        ensureLabel();
+        updateLabelPosition();
         invalidate();
         if (hasOnChangeListener()) {
           listener.onValueChange(this, getValue());
@@ -766,21 +791,25 @@ public boolean onTouchEvent(@NonNull MotionEvent event) {
         thumbIsPressed = false;
         thumbPosition = position;
         snapThumbPosition();
+        ViewUtils.getContentViewOverlay(this).remove(label);
         invalidate();
         break;
       default:
         // Nothing to do in this case.
     }
+
+    // Set if the thumb is pressed. This will cause the ripple to be drawn.
+    setPressed(thumbIsPressed);
+    return true;
+  }
+
+  private void ensureLabel() {
     float value = getValue();
     if (hasLabelFormatter()) {
       label.setText(formatter.getFormattedValue(value));
     } else {
       label.setText(String.format((int) value == value ? "%.0f" : "%.2f", value));
     }
-
-    // Set if the thumb is pressed. This will cause the ripple to be drawn.
-    setPressed(thumbIsPressed);
-    return true;
   }
 
   private void snapThumbPosition() {
@@ -790,6 +819,21 @@ private void snapThumbPosition() {
     }
   }
 
+  private void updateLabelPosition() {
+    int left =
+        trackSidePadding + (int) (thumbPosition * trackWidth) - label.getIntrinsicWidth() / 2;
+    int top = calculateTop() - (labelPadding + thumbRadius);
+    label.setBounds(left, top - label.getIntrinsicHeight(), left + label.getIntrinsicWidth(), top);
+
+    // Calculate the difference between the bounds of this view and the bounds of the root view to
+    // correctly position this view in the overlay layer.
+    Rect rect = new Rect(label.getBounds());
+    DescendantOffsetUtils.offsetDescendantRect(ViewUtils.getContentView(this), this, rect);
+    label.setBounds(rect);
+
+    ViewUtils.getContentViewOverlay(this).add(label);
+  }
+
   @Override
   protected void drawableStateChanged() {
     super.drawableStateChanged();

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

@@ -31,8 +31,6 @@
   <dimen name="mtrl_slider_halo_radius">24dp</dimen>
 
   <dimen name="mtrl_slider_label_square_side">26dp</dimen>
-  <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_padding">4dp</dimen>
 </resources>

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

@@ -74,7 +74,7 @@ public class TooltipDrawable extends MaterialShapeDrawable implements TextDrawab
       new TextDrawableHelper(/* delegate= */ this);
 
   @NonNull
-  private final OnLayoutChangeListener attachedViewLayoutChaneListener =
+  private final OnLayoutChangeListener attachedViewLayoutChangeListener =
       new OnLayoutChangeListener() {
         @Override
         public void onLayoutChange(
@@ -331,11 +331,22 @@ public void setLayoutMargin(@Px int layoutMargin) {
   /**
    * Should be called to allow this drawable to calculate its position within the current display
    * frame. This allows it to apply to specified window padding.
+   *
+   * @see #detachView(View)
    */
   public void setRelativeToView(@NonNull View view) {
     updateLocationOnScreen(view);
     // Listen for changes that indicate the view has moved so the location can be updated
-    view.addOnLayoutChangeListener(attachedViewLayoutChaneListener);
+    view.addOnLayoutChangeListener(attachedViewLayoutChangeListener);
+  }
+
+  /**
+   * Should be called when the view is detached from the screen.
+   *
+   * @see #setRelativeToView(View)
+   */
+  public void detachView(@NonNull View view) {
+    view.removeOnLayoutChangeListener(attachedViewLayoutChangeListener);
   }
 
   @Override