[Slider] Add centered configuration

- add attr `centered` to enable the new centered configuration, see https://m3.material.io/components/sliders/overview#227dd2d1-8be6-4646-b8e6-f05bbac583e5
- prevent drawing the ticks in the gap spaces around the thumb and under it for better visuals

PiperOrigin-RevId: 741161174

Author: paulfthomas

catalog/java/io/material/catalog/slider/SliderCenteredDemoFragment.java

@@ -0,0 +1,44 @@
+/*
+ * Copyright 2019 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
+ *
+ *     https://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.
+ */
+
+package io.material.catalog.slider;
+
+import io.material.catalog.R;
+
+import android.os.Bundle;
+import android.view.LayoutInflater;
+import android.view.View;
+import android.view.ViewGroup;
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+import com.google.android.material.slider.Slider;
+import io.material.catalog.feature.DemoFragment;
+
+/**
+ * Fragment to display a few basic uses of the centered {@link Slider} widget for the Catalog app.
+ */
+public class SliderCenteredDemoFragment extends DemoFragment {
+
+  @Nullable
+  @Override
+  public View onCreateDemoView(
+      @NonNull LayoutInflater layoutInflater,
+      @Nullable ViewGroup viewGroup,
+      @Nullable Bundle bundle) {
+    return layoutInflater.inflate(
+        R.layout.cat_slider_demo_centered, viewGroup, false /* attachToRoot */);
+  }
+}

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

@@ -70,6 +70,13 @@ public Fragment createFragment() {
             return new SliderDiscreteDemoFragment();
           }
         });
+    additionalDemos.add(
+        new Demo(R.string.cat_slider_demo_centered_title) {
+          @Override
+          public Fragment createFragment() {
+            return new SliderCenteredDemoFragment();
+          }
+        });
     additionalDemos.add(
         new Demo(R.string.cat_slider_demo_scroll_container_title) {
           @Override

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

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="utf-8"?><!--
+  Copyright 2025 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.
+  -->
+<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
+  xmlns:app="http://schemas.android.com/apk/res-auto"
+  android:layout_width="match_parent"
+  android:layout_height="match_parent">
+
+  <LinearLayout
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:paddingTop="16dp"
+    android:paddingLeft="16dp"
+    android:paddingRight="16dp"
+    android:orientation="vertical">
+
+    <com.google.android.material.slider.Slider
+      android:layout_width="match_parent"
+      android:layout_height="wrap_content"
+      android:layout_gravity="center"
+      android:stepSize="1"
+      android:valueFrom="-5"
+      android:valueTo="5"
+      app:centered="true"
+      app:tickVisible="false" />
+  </LinearLayout>
+</ScrollView>

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

@@ -18,6 +18,7 @@
   <string name="cat_slider_title" description="Title for the screen that showcases demonstrative usages of the Slider widget [CHAR LIMIT=NONE]">Slider</string>
   <string name="cat_slider_demo_continuous_title" description="Title for the continuous Slider widget demo [CHAR LIMIT=NONE]">Continuous Slider demo</string>
   <string name="cat_slider_demo_discrete_title" description="Title for the discrete Slider widget demo [CHAR LIMIT=NONE]">Discrete Slider demo</string>
+  <string name="cat_slider_demo_centered_title" description="Title for the centered Slider widget demo [CHAR LIMIT=NONE]">Centered Slider demo</string>
   <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>
   <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>
   <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>

docs/components/Slider.md

@@ -295,6 +295,7 @@ slider also has tick marks.
 | Element                                    | Attribute                    | Related method(s)                                           | Default value                        |
 |--------------------------------------------|------------------------------|-------------------------------------------------------------|--------------------------------------|
 | **Orientation**                            | `android:orientation`        | `setOrientation`<br/>`isVertical`                           | `horizontal`                         |
+| **Centered**                               | `android:centered`           | `setCentered`<br/>`isCentered`                              | `false`                              |
 | **Min value**                              | `android:valueFrom`          | `setValueFrom`<br/>`getValueFrom`                           | N/A                                  |
 | **Max value**                              | `android:valueTo`            | `setValueTo`<br/>`getValueTo`                               | N/A                                  |
 | **Step size (discrete)**                   | `android:stepSize`           | `setStepSize`<br/>`getStepSize`                             | N/A                                  |

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

@@ -343,6 +343,7 @@ abstract class BaseSlider<
   private int trackStopIndicatorSize;
   private int trackCornerSize;
   private int trackInsideCornerSize;
+  private boolean centered = false;
   @Nullable private Drawable trackIconActiveStart;
   private boolean trackIconActiveStartMutated = false;
   @Nullable private Drawable trackIconActiveEnd;
@@ -542,6 +543,7 @@ 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);
 
     float defaultMinTouchTargetSize =
@@ -2396,6 +2398,30 @@ public void setOrientation(@Orientation int orientation) {
     updateWidgetLayout(true);
   }
 
+  /**
+   * Sets the slider to be in centered configuration, meaning the starting value is positioned in
+   * the middle of the slider.
+   *
+   * @param isCentered boolean to use for the slider's centered configuration.
+   * @attr ref com.google.android.material.R.styleable#Slider_centered
+   * @see #isCentered()
+   */
+  public void setCentered(boolean isCentered) {
+    if (this.centered == isCentered) {
+      return;
+    }
+    this.centered = isCentered;
+
+    // if centered, the default value is at the center
+    if (isCentered) {
+      setValues((valueFrom + valueTo) / 2f);
+    } else {
+      setValues(valueFrom);
+    }
+
+    updateWidgetLayout(true);
+  }
+
   @Override
   protected void onAttachedToWindow() {
     super.onAttachedToWindow();
@@ -2562,7 +2588,9 @@ protected void onDraw(@NonNull Canvas canvas) {
     int yCenter = calculateTrackCenter();
 
     drawInactiveTracks(canvas, trackWidth, yCenter);
-    drawActiveTracks(canvas, trackWidth, yCenter);
+    if (!isCentered()) {
+      drawActiveTracks(canvas, trackWidth, yCenter);
+    }
 
     if (isRtl() || isVertical()) {
       drawTrackIcons(canvas, activeTrackRect, inactiveTrackLeftRect);
@@ -2592,55 +2620,53 @@ private float[] getActiveRange() {
     float left = normalizeValue(values.size() == 1 ? valueFrom : min);
     float right = normalizeValue(max);
 
+    // When centered, there is no active range, left == right in order to draw the inactive track on
+    // both sides of the thumb leaving space for it, covering the entirety of the track.
+    if (isCentered()) {
+      left = right;
+    }
+
     // In RTL we draw things in reverse, so swap the left and right range values
     return isRtl() || isVertical() ? new float[] {right, left} : new float[] {left, right};
   }
 
   private void drawInactiveTracks(@NonNull Canvas canvas, int width, int yCenter) {
-    populateInactiveTrackRightRect(width, yCenter);
-    updateTrack(
-        canvas,
-        inactiveTrackPaint,
-        inactiveTrackRightRect,
-        getTrackCornerSize(),
-        FullCornerDirection.RIGHT);
-
-    // Also draw inactive track to the left if there is any
-    populateInactiveTrackLeftRect(width, yCenter);
-    updateTrack(
+    float[] activeRange = getActiveRange();
+    float top = yCenter - trackThickness / 2f;
+    float bottom = yCenter + trackThickness / 2f;
+
+    drawInactiveTrackSection(
+        trackSidePadding - getTrackCornerSize(),
+        trackSidePadding + activeRange[0] * width - thumbTrackGapSize,
+        top,
+        bottom,
         canvas,
-        inactiveTrackPaint,
         inactiveTrackLeftRect,
-        getTrackCornerSize(),
         FullCornerDirection.LEFT);
+    drawInactiveTrackSection(
+        trackSidePadding + activeRange[1] * width + thumbTrackGapSize,
+        trackSidePadding + width + getTrackCornerSize(),
+        top,
+        bottom,
+        canvas,
+        inactiveTrackRightRect,
+        FullCornerDirection.RIGHT);
   }
 
-  private void populateInactiveTrackRightRect(int width, int yCenter) {
-    float[] activeRange = getActiveRange();
-    float right = trackSidePadding + activeRange[1] * width;
-    if (right < trackSidePadding + width) {
-      inactiveTrackRightRect.set(
-          right + thumbTrackGapSize,
-          yCenter - trackThickness / 2f,
-          trackSidePadding + width + getTrackCornerSize(),
-          yCenter + trackThickness / 2f);
-    } else {
-      inactiveTrackRightRect.setEmpty();
-    }
-  }
-
-  private void populateInactiveTrackLeftRect(int width, int yCenter) {
-    float[] activeRange = getActiveRange();
-    float left = trackSidePadding + activeRange[0] * width;
-    if (left > trackSidePadding) {
-      inactiveTrackLeftRect.set(
-          trackSidePadding - getTrackCornerSize(),
-          yCenter - trackThickness / 2f,
-          left - thumbTrackGapSize,
-          yCenter + trackThickness / 2f);
+  private void drawInactiveTrackSection(
+      float from,
+      float to,
+      float top,
+      float bottom,
+      @NonNull Canvas canvas,
+      RectF rect,
+      FullCornerDirection direction) {
+    if (to - from > getTrackCornerSize() - thumbTrackGapSize) {
+      rect.set(from, top, to, bottom);
     } else {
-      inactiveTrackLeftRect.setEmpty();
+      rect.setEmpty();
     }
+    updateTrack(canvas, inactiveTrackPaint, rect, getTrackCornerSize(), direction);
   }
 
   /**
@@ -2923,26 +2949,41 @@ private void maybeDrawTicks(@NonNull Canvas canvas) {
 
     // Draw ticks on the left inactive track (if any).
     if (leftActiveTickIndex > 0) {
-      canvas.drawPoints(ticksCoordinates, 0, leftActiveTickIndex * 2, inactiveTicksPaint);
+      drawTicks(0, leftActiveTickIndex * 2, canvas, inactiveTicksPaint);
     }
 
     // Draw ticks on the active track (if any).
     if (leftActiveTickIndex <= rightActiveTickIndex) {
-      canvas.drawPoints(
-          ticksCoordinates,
+      drawTicks(
           leftActiveTickIndex * 2,
-          (rightActiveTickIndex - leftActiveTickIndex + 1) * 2,
-          activeTicksPaint);
+          (rightActiveTickIndex + 1) * 2,
+          canvas,
+          isCentered() ? inactiveTicksPaint : activeTicksPaint); // centered uses inactive color.
     }
 
     // Draw ticks on the right inactive track (if any).
     if ((rightActiveTickIndex + 1) * 2 < ticksCoordinates.length) {
-      canvas.drawPoints(
-          ticksCoordinates,
-          (rightActiveTickIndex + 1) * 2,
-          ticksCoordinates.length - (rightActiveTickIndex + 1) * 2,
-          inactiveTicksPaint);
+      drawTicks(
+          (rightActiveTickIndex + 1) * 2, ticksCoordinates.length, canvas, inactiveTicksPaint);
+    }
+  }
+
+  private void drawTicks(int from, int to, Canvas canvas, Paint paint) {
+    for (int i = from; i < to; i += 2) {
+      if (isOverlappingThumb(ticksCoordinates[i])) {
+        continue;
+      }
+      canvas.drawPoint(ticksCoordinates[i], ticksCoordinates[i + 1], paint);
+    }
+  }
+
+  private boolean isOverlappingThumb(float tickCoordinate) {
+    float threshold = thumbTrackGapSize + thumbWidth / 2f;
+    for (float value : values) {
+      float valueToX = valueToX(value);
+      return tickCoordinate >= valueToX - threshold && tickCoordinate <= valueToX + threshold;
     }
+    return false;
   }
 
   private void maybeDrawStopIndicator(@NonNull Canvas canvas, int yCenter) {
@@ -2954,13 +2995,25 @@ private void maybeDrawStopIndicator(@NonNull Canvas canvas, int yCenter) {
     if (values.get(values.size() - 1) < valueTo) {
       drawStopIndicator(canvas, valueToX(valueTo), yCenter);
     }
-    // Multiple thumbs, inactive track may be visible at the start.
-    if (values.size() > 1 && values.get(0) > valueFrom) {
+    // Centered, multiple thumbs, inactive track may be visible at the start.
+    if (isCentered() || (values.size() > 1 && values.get(0) > valueFrom)) {
       drawStopIndicator(canvas, valueToX(valueFrom), yCenter);
     }
+    // Centered, draw indicator in the middle of the track.
+    if (isCentered()) {
+      drawStopIndicator(canvas, (valueToX(valueTo) + valueToX(valueFrom)) / 2f, yCenter);
+    }
   }
 
   private void drawStopIndicator(@NonNull Canvas canvas, float x, float y) {
+    // Prevent drawing indicator on the thumbs.
+    for (float value : values) {
+      float valueToX = valueToX(value);
+      float threshold = thumbTrackGapSize + thumbWidth / 2f;
+      if (x >= valueToX - threshold && x <= valueToX + threshold) {
+        return;
+      }
+    }
     if (isVertical()) {
       canvas.drawPoint(y, x, stopIndicatorPaint);
     } else {
@@ -3751,10 +3804,14 @@ final boolean isRtl() {
     return getLayoutDirection() == View.LAYOUT_DIRECTION_RTL;
   }
 
-  final boolean isVertical() {
+  public boolean isVertical() {
     return widgetOrientation == VERTICAL;
   }
 
+  public boolean isCentered() {
+    return centered;
+  }
+
   /**
    * Attempts to move focus to next or previous thumb <i>independent of layout direction</i> and
    * returns whether the focused thumb changed. If focused thumb didn't change, we're at the view

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

@@ -17,6 +17,7 @@
 <resources>
   <public name="sliderStyle" type="attr"/>
 
+  <public name="centered" type="attr" />
   <public name="haloColor" type="attr" />
   <public name="haloRadius" type="attr" />
   <public name="labelBehavior" type="attr" />

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

@@ -23,6 +23,7 @@
     <!-- Whether the Slider is enabled. -->
     <attr name="android:enabled" />
     <attr name="android:orientation" />
+    <attr name="centered" format="boolean" />
     <!-- The color of the slider's halo. -->
     <attr name="haloColor" format="color" />
     <!-- The radius of the halo. -->