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:
Mike
2021-04-12 13:57:27 -07:00
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) {