mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Android: Fix switch ripple color (#30685)
Summary: fix https://github.com/facebook/react-native/issues/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: https://github.com/facebook/react-native/pull/30685 Test Plan: 1. Create an empty app with react-native 0.63.4, copy&paste the App.js from issue https://github.com/facebook/react-native/issues/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
This commit is contained in:
committed by
Facebook GitHub Bot
parent
a17e3cf893
commit
1b0683533a
@@ -8,8 +8,11 @@
|
||||
package com.facebook.react.views.switchview;
|
||||
|
||||
import android.content.Context;
|
||||
import android.content.res.ColorStateList;
|
||||
import android.graphics.PorterDuff;
|
||||
import android.graphics.drawable.Drawable;
|
||||
import android.graphics.drawable.RippleDrawable;
|
||||
import android.os.Build;
|
||||
import androidx.annotation.Nullable;
|
||||
import androidx.appcompat.widget.SwitchCompat;
|
||||
|
||||
@@ -59,6 +62,16 @@ import androidx.appcompat.widget.SwitchCompat;
|
||||
|
||||
public void setThumbColor(@Nullable Integer color) {
|
||||
setColor(super.getThumbDrawable(), color);
|
||||
|
||||
// Set the ripple color with thumb color if >= LOLLIPOP
|
||||
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
|
||||
RippleDrawable ripple = (RippleDrawable) super.getBackground();
|
||||
ColorStateList customColorState =
|
||||
new ColorStateList(
|
||||
new int[][] {new int[] {android.R.attr.state_pressed}}, new int[] {color});
|
||||
|
||||
ripple.setColor(customColorState);
|
||||
}
|
||||
}
|
||||
|
||||
/*package*/ void setOn(boolean on) {
|
||||
|
||||
Reference in New Issue
Block a user