Skip to content

Commit 1b06835

Browse files
rnikefacebook-github-bot
authored andcommitted
Android: Fix switch ripple color (#30685)
Summary: fix #22370 Use `RippleDrawable` to change ripple color. According to the [document](https://developer.android.com/reference/android/graphics/drawable/RippleDrawable?hl=en), `RippleDrawable` is added in API 21, so warped the code in the `if` statement for version checking. ## Changelog <!-- Help reviewers and the release process by writing your own changelog entry. For an example, see: https://github.com/facebook/react-native/wiki/Changelog --> [Android] [Fixed] - Fix wrong ripple color on Switch component Pull Request resolved: #30685 Test Plan: 1. Create an empty app with react-native 0.63.4, copy&paste the App.js from issue #22370 2. Apply the code for fixing to `node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/views/switchview/ReactSwitch.java` 3. Configure the project to let it Build from ReactAndroid 4. Check if ripple color has changed correctly 5. Use different color on each state and check if it is working Test device: Android emulator, Pixel 4, API 30 ## Screenshot ### Before Ripple is always in default color https://user-images.githubusercontent.com/48589760/103573532-5b4cec80-4f09-11eb-96d7-f75efa6779d9.mov ### After Ripple color has changed with thumb color https://user-images.githubusercontent.com/48589760/103573216-d95cc380-4f08-11eb-98fb-494e28c12a9f.mov Check different color on each state https://user-images.githubusercontent.com/48589760/103573227-de217780-4f08-11eb-8992-ede5d1dd89c1.mov Reviewed By: mdvacca Differential Revision: D27636802 Pulled By: lunaleaps fbshipit-source-id: fa23cc8b51c642e5e5d9c73371c8ccef3741fd14
1 parent a17e3cf commit 1b06835

File tree

1 file changed

+13
-0
lines changed

1 file changed

+13
-0
lines changed

ReactAndroid/src/main/java/com/facebook/react/views/switchview/ReactSwitch.java

+13
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,11 @@
88
package com.facebook.react.views.switchview;
99

1010
import android.content.Context;
11+
import android.content.res.ColorStateList;
1112
import android.graphics.PorterDuff;
1213
import android.graphics.drawable.Drawable;
14+
import android.graphics.drawable.RippleDrawable;
15+
import android.os.Build;
1316
import androidx.annotation.Nullable;
1417
import androidx.appcompat.widget.SwitchCompat;
1518

@@ -59,6 +62,16 @@ public void setTrackColor(@Nullable Integer color) {
5962

6063
public void setThumbColor(@Nullable Integer color) {
6164
setColor(super.getThumbDrawable(), color);
65+
66+
// Set the ripple color with thumb color if >= LOLLIPOP
67+
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
68+
RippleDrawable ripple = (RippleDrawable) super.getBackground();
69+
ColorStateList customColorState =
70+
new ColorStateList(
71+
new int[][] {new int[] {android.R.attr.state_pressed}}, new int[] {color});
72+
73+
ripple.setColor(customColorState);
74+
}
6275
}
6376

6477
/*package*/ void setOn(boolean on) {

0 commit comments

Comments
 (0)