Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Slider] Add API to set thumb ripple effect color #4503

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 15 additions & 12 deletions docs/components/Slider.md
Original file line number Diff line number Diff line change
Expand Up @@ -329,21 +329,24 @@ thickness.

#### Thumb attributes

| Element | Attribute | Related method(s) | Default value |
|------------------|-------------------------|-----------------------------------------------------------------------------------|------------------------------|
| **Color** | `app:thumbColor` | `setThumbTintList`<br/>`getThumbTintList` | `?attr/colorPrimary` |
| **Width** | `app:thumbWidth` | `setThumbWidth`<br/>`setThumbWidthResource`<br/>`getThumbWidth` | `4dp` |
| **Height** | `app:thumbHeight` | `setThumbHeight`<br/>`setThumbHeightResource`<br/>`getThumbHeight` | `44dp` |
| **Radius** | `app:thumbRadius` | `setThumbRadiusResource`<br/>`setThumbRadius`<br/>`getThumbRadius` | N/A |
| **Elevation** | `app:thumbElevation` | `setThumbElevationResource`<br/>`setThumbElevation`<br/>`getThumbElevation` | `2dp` |
| **Halo color** | `app:haloColor` | `setHaloTintList`<br/>`getHaloTintList` | `@android:color/transparent` |
| **Halo radius** | `app:haloRadius` | `setHaloRadiusResource`<br/>`setHaloRadius`<br/>`getHaloRadius` | N/A |
| **Stroke color** | `app:thumbStrokeColor` | `setThumbStrokeColor`<br/>`setThumbStrokeColorResource`<br/>`getThumbStrokeColor` | `null` |
| **Stroke width** | `app:thumbStrokeWidth` | `setThumbStrokeWidth`<br/>`setThumbStrokeWidthResource`<br/>`getThumbStrokeWidth` | `0dp` |
| **Gap size** | `app:thumbTrackGapSize` | `setThumbTrackGapSize`<br/>`getThumbTrackGapSize` | `6dp` |
| Element | Attribute | Related method(s) | Default value |
|-----------------------|-------------------------|-----------------------------------------------------------------------------------|------------------------------|
| **Color** | `app:thumbColor` | `setThumbTintList`<br/>`getThumbTintList` | `?attr/colorPrimary` |
| **Width** | `app:thumbWidth` | `setThumbWidth`<br/>`setThumbWidthResource`<br/>`getThumbWidth` | `4dp` |
| **Height** | `app:thumbHeight` | `setThumbHeight`<br/>`setThumbHeightResource`<br/>`getThumbHeight` | `44dp` |
| **Radius** | `app:thumbRadius` | `setThumbRadiusResource`<br/>`setThumbRadius`<br/>`getThumbRadius` | N/A |
| **Elevation** | `app:thumbElevation` | `setThumbElevationResource`<br/>`setThumbElevation`<br/>`getThumbElevation` | `2dp` |
| **Halo color** | `app:haloColor` | `setHaloTintList`<br/>`getHaloTintList` | `@android:color/transparent` |
| **Halo effect color** | `app:haloEffectColor` | `setHaloEffectTintList`<br/>`getHaloEffectTintList` | `@android:color/transparent` |
| **Halo radius** | `app:haloRadius` | `setHaloRadiusResource`<br/>`setHaloRadius`<br/>`getHaloRadius` | N/A |
| **Stroke color** | `app:thumbStrokeColor` | `setThumbStrokeColor`<br/>`setThumbStrokeColorResource`<br/>`getThumbStrokeColor` | `null` |
| **Stroke width** | `app:thumbStrokeWidth` | `setThumbStrokeWidth`<br/>`setThumbStrokeWidthResource`<br/>`getThumbStrokeWidth` | `0dp` |
| **Gap size** | `app:thumbTrackGapSize` | `setThumbTrackGapSize`<br/>`getThumbTrackGapSize` | `6dp` |

**Note:** `app:thumbWidth` and `app:thumbHeight` take precedence over `app:thumbRadius`.

**Note:** `app:haloEffectColor` only has an effect on API 31 and above.

#### Value label attributes

Element | Attribute | Related method(s) | Default value
Expand Down
45 changes: 45 additions & 0 deletions lib/java/com/google/android/material/slider/BaseSlider.java
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@
import android.os.Bundle;
import android.os.Parcel;
import android.os.Parcelable;
import androidx.annotation.RequiresApi;
import androidx.appcompat.content.res.AppCompatResources;
import android.util.AttributeSet;
import android.util.Log;
Expand Down Expand Up @@ -265,6 +266,7 @@ abstract class BaseSlider<
private static final double THRESHOLD = .0001;
private static final float THUMB_WIDTH_PRESSED_RATIO = .5f;
private static final int TRACK_CORNER_SIZE_UNSET = -1;
private static final int DEFAULT_HALO_EFFECT_COLOR = 0x8dffffff;

static final int DEF_STYLE_RES = R.style.Widget_MaterialComponents_Slider;
static final int UNIT_VALUE = 1;
Expand Down Expand Up @@ -361,6 +363,7 @@ abstract class BaseSlider<
private boolean dirtyConfig;

@NonNull private ColorStateList haloColor;
@NonNull private ColorStateList haloEffectColor;
@NonNull private ColorStateList tickColorActive;
@NonNull private ColorStateList tickColorInactive;
@NonNull private ColorStateList trackColorActive;
Expand Down Expand Up @@ -566,6 +569,15 @@ private void processAttributes(Context context, AttributeSet attrs, int defStyle
? haloColor
: AppCompatResources.getColorStateList(context, R.color.material_slider_halo_color));

if (VERSION.SDK_INT >= VERSION_CODES.S) {
ColorStateList haloEffectColor =
MaterialResources.getColorStateList(context, a, R.styleable.Slider_haloEffectColor);
setHaloEffectTintList(
haloEffectColor != null
? haloEffectColor
: ColorStateList.valueOf(DEFAULT_HALO_EFFECT_COLOR));
}

tickVisible = a.getBoolean(R.styleable.Slider_tickVisible, true);
boolean hasTickColor = a.hasValue(R.styleable.Slider_tickColor);
int tickColorInactiveRes =
Expand Down Expand Up @@ -1646,6 +1658,39 @@ public void setHaloTintList(@NonNull ColorStateList haloColor) {
invalidate();
}

/**
* Returns the effect color of the halo.
*
* @see #setHaloEffectTintList(ColorStateList)
* @attr ref com.google.android.material.R.styleable#Slider_haloEffectColor
*/
@RequiresApi(api = VERSION_CODES.S)
@NonNull
public ColorStateList getHaloEffectTintList() {
return haloEffectColor;
}

/**
* Sets the effect color of the halo.
*
* @see #getHaloEffectTintList()
* @attr ref com.google.android.material.R.styleable#Slider_haloEffectColor
*/
@RequiresApi(api = VERSION_CODES.S)
public void setHaloEffectTintList(@NonNull ColorStateList haloEffectColor) {
if (haloEffectColor.equals(this.haloEffectColor)) {
return;
}

this.haloEffectColor = haloEffectColor;

final Drawable background = getBackground();
if (!shouldDrawCompatHalo() && background instanceof RippleDrawable) {
((RippleDrawable) background).setEffectColor(haloEffectColor);
postInvalidate();
}
}

/**
* Returns the color of the thumb.
*
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
<public name="sliderStyle" type="attr"/>

<public name="haloColor" type="attr" />
<public name="haloEffectColor" type="attr" />
<public name="haloRadius" type="attr" />
<public name="labelBehavior" type="attr" />
<public name="labelStyle" type="attr" />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,9 @@
<attr name="android:orientation" />
<!-- The color of the slider's halo. -->
<attr name="haloColor" format="color" />
<!-- The color of the slider's halo effect. The attribute only has an effect on API 31
and above. -->
<attr name="haloEffectColor" format="color" />
<!-- The radius of the halo. -->
<attr name="haloRadius" format="dimension" />
<!-- Determines if Slider should increase its default height to include space for the label. -->
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@

<style name="Widget.Material3.Slider" parent="Widget.MaterialComponents.Slider">
<item name="haloColor">#00FFFFFF</item>
<item name="haloEffectColor">@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_active_tick_marks_color</item>
Expand Down