Support customizing thumb, track and progress colors for slider on An…

…droid

Summary:
**Motivation**

Ability to customize slider colors is desirable to match the brand. Currently iOS allows using images for slider parts, but android doesn't have any customization options. This PR adds support for customizing `thumbTintColor`, `trackTintColor` and `progressTintColor`.

**Test plan (required)**

Run UIExplorer example with the changes and verify everything works fine.

![image](https://cloud.githubusercontent.com/assets/1174278/22020752/f32a6eec-dcdf-11e6-928d-481bb28bd0a3.png)

cc brentvatne
Closes #11946

Differential Revision: D4427474

fbshipit-source-id: ec3a38db600bac6108691a4cfa15e2409143b9f3

Examples/UIExplorer/js/SliderExample.js

@@ -132,16 +132,23 @@ exports.examples = [
   },
   {
     title: 'Custom min/max track tint color',
-    platform: 'ios',
     render(): React.Element<any> {
       return (
         <SliderExample
-          minimumTrackTintColor={'red'}
-          maximumTrackTintColor={'green'}
+          minimumTrackTintColor={'blue'}
+          maximumTrackTintColor={'red'}
+          value={0.5}
         />
       );
     }
   },
+  {
+    title: 'Custom thumb color',
+    platform: 'android',
+    render(): React.Element<any> {
+      return <SliderExample thumbTintColor={'blue'} />;
+    }
+  },
   {
     title: 'Custom thumb image',
     platform: 'ios',

Libraries/Components/Slider/Slider.js

@@ -12,6 +12,7 @@
 'use strict';
 
 var Image = require('Image');
+var ColorPropType = require('ColorPropType');
 var NativeMethodsMixin = require('NativeMethodsMixin');
 var ReactNativeViewAttributes = require('ReactNativeViewAttributes');
 var Platform = require('Platform');
@@ -68,18 +69,16 @@ var Slider = React.createClass({
     maximumValue: PropTypes.number,
 
     /**
-     * The color used for the track to the left of the button. Overrides the
-     * default blue gradient image.
-     * @platform ios
+     * The color used for the track to the left of the button.
+     * Overrides the default blue gradient image on iOS.
      */
-    minimumTrackTintColor: PropTypes.string,
+    minimumTrackTintColor: ColorPropType,
 
     /**
-     * The color used for the track to the right of the button. Overrides the
-     * default blue gradient image.
-     * @platform ios
+     * The color used for the track to the right of the button.
+     * Overrides the default blue gradient image on iOS.
      */
-    maximumTrackTintColor: PropTypes.string,
+    maximumTrackTintColor: ColorPropType,
 
     /**
      * If true the user won't be able to move the slider.
@@ -114,6 +113,12 @@ var Slider = React.createClass({
      */
     thumbImage: Image.propTypes.source,
 
+    /**
+     * Color of the foreground switch grip.
+     * @platform android
+     */
+    thumbTintColor: ColorPropType,
+
     /**
      * Callback continuously called while the user is dragging the slider.
      */

ReactAndroid/src/main/java/com/facebook/react/views/slider/ReactSliderManager.java

@@ -9,16 +9,16 @@
 
 package com.facebook.react.views.slider;
 
-import java.util.Map;
-
+import android.graphics.Color;
+import android.graphics.PorterDuff;
+import android.graphics.drawable.Drawable;
+import android.graphics.drawable.LayerDrawable;
+import android.util.TypedValue;
 import android.view.View;
 import android.view.ViewGroup;
 import android.widget.SeekBar;
 
-import com.facebook.yoga.YogaMeasureMode;
-import com.facebook.yoga.YogaMeasureFunction;
-import com.facebook.yoga.YogaNodeAPI;
-import com.facebook.yoga.YogaMeasureOutput;
+import com.facebook.react.R;
 import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.common.MapBuilder;
 import com.facebook.react.uimanager.LayoutShadowNode;
@@ -27,6 +27,12 @@
 import com.facebook.react.uimanager.UIManagerModule;
 import com.facebook.react.uimanager.ViewProps;
 import com.facebook.react.uimanager.annotations.ReactProp;
+import com.facebook.yoga.YogaMeasureFunction;
+import com.facebook.yoga.YogaMeasureMode;
+import com.facebook.yoga.YogaMeasureOutput;
+import com.facebook.yoga.YogaNodeAPI;
+
+import java.util.Map;
 
 /**
  * Manages instances of {@code ReactSlider}.
@@ -145,6 +151,37 @@ public void setStep(ReactSlider view, double value) {
     view.setStep(value);
   }
 
+  @ReactProp(name = "thumbTintColor", customType = "Color")
+  public void setThumbTintColor(ReactSlider view, Integer color) {
+    if (color == null) {
+      view.getThumb().clearColorFilter();
+    } else {
+      view.getThumb().setColorFilter(color, PorterDuff.Mode.SRC_IN);
+    }
+  }
+
+  @ReactProp(name = "minimumTrackTintColor", customType = "Color")
+  public void setMinimumTrackTintColor(ReactSlider view, Integer color) {
+    LayerDrawable drawable = (LayerDrawable) view.getProgressDrawable().getCurrent();
+    Drawable background = drawable.findDrawableByLayerId(android.R.id.background);
+    if (color == null) {
+      background.clearColorFilter();
+    } else {
+      background.setColorFilter(color, PorterDuff.Mode.SRC_IN);
+    }
+  }
+
+  @ReactProp(name = "maximumTrackTintColor", customType = "Color")
+  public void setMaximumTrackTintColor(ReactSlider view, Integer color) {
+    LayerDrawable drawable = (LayerDrawable) view.getProgressDrawable().getCurrent();
+    Drawable progress = drawable.findDrawableByLayerId(android.R.id.progress);
+    if (color == null) {
+      progress.clearColorFilter();
+    } else {
+      progress.setColorFilter(color, PorterDuff.Mode.SRC_IN);
+    }
+  }
+
   @Override
   protected void addEventEmitters(final ThemedReactContext reactContext, final ReactSlider view) {
     view.setOnSeekBarChangeListener(ON_CHANGE_LISTENER);