feat(android): track color of the Ti.UI.Switch

android/modules/ui/src/java/ti/modules/titanium/ui/SwitchProxy.java

@@ -23,7 +23,11 @@
 		TiC.PROPERTY_COLOR,
 		TiC.PROPERTY_FONT,
 		TiC.PROPERTY_TEXT_ALIGN,
-		TiC.PROPERTY_VERTICAL_ALIGN
+		TiC.PROPERTY_TINT_COLOR,
+		TiC.PROPERTY_ON_TINT_COLOR,
+		TiC.PROPERTY_VERTICAL_ALIGN,
+		TiC.PROPERTY_ON_THUMB_COLOR,
+		TiC.PROPERTY_THUMB_COLOR
 })
 public class SwitchProxy extends TiViewProxy
 {

android/modules/ui/src/java/ti/modules/titanium/ui/widget/TiUISwitch.java

@@ -7,13 +7,17 @@
 package ti.modules.titanium.ui.widget;
 
 import android.app.Activity;
+import android.content.res.ColorStateList;
 import android.view.View;
 import android.widget.CompoundButton;
 import android.widget.CompoundButton.OnCheckedChangeListener;
+
 import androidx.appcompat.widget.AppCompatToggleButton;
+
 import com.google.android.material.checkbox.MaterialCheckBox;
 import com.google.android.material.chip.Chip;
 import com.google.android.material.switchmaterial.SwitchMaterial;
+
 import org.appcelerator.kroll.KrollDict;
 import org.appcelerator.kroll.KrollProxy;
 import org.appcelerator.kroll.common.Log;
@@ -23,21 +27,23 @@
 import org.appcelerator.titanium.util.TiConvert;
 import org.appcelerator.titanium.util.TiUIHelper;
 import org.appcelerator.titanium.view.TiUIView;
+
 import ti.modules.titanium.ui.UIModule;
 
 public class TiUISwitch extends TiUIView implements OnCheckedChangeListener
 {
 	private static final String TAG = "TiUISwitch";
 
-	private View.OnLayoutChangeListener layoutListener;
+	private final View.OnLayoutChangeListener layoutListener;
 	private boolean oldValue = false;
 
 	public TiUISwitch(TiViewProxy proxy)
 	{
 		super(proxy);
 		Log.d(TAG, "Creating a switch", Log.DEBUG_MODE);
 
-		this.layoutListener = new View.OnLayoutChangeListener() {
+		this.layoutListener = new View.OnLayoutChangeListener()
+		{
 			@Override
 			public void onLayoutChange(
 				View v, int left, int top, int right, int bottom, int oldLeft, int oldTop, int oldRight, int oldBottom)
@@ -58,6 +64,62 @@ public void processProperties(KrollDict d)
 			setStyle(TiConvert.toInt(d.get(TiC.PROPERTY_STYLE), UIModule.SWITCH_STYLE_SLIDER));
 		}
 
+		if (d.containsKeyAndNotNull(TiC.PROPERTY_THUMB_COLOR)
+			|| d.containsKeyAndNotNull(TiC.PROPERTY_ON_THUMB_COLOR)) {
+			CompoundButton currentButton = (CompoundButton) getNativeView();
+			if (currentButton instanceof SwitchMaterial) {
+
+				int colActive = d.containsKeyAndNotNull(TiC.PROPERTY_ON_THUMB_COLOR)
+					? TiConvert.toColor(d, TiC.PROPERTY_ON_THUMB_COLOR)
+					: TiConvert.toColor(d, TiC.PROPERTY_THUMB_COLOR);
+				int colNormal = d.containsKeyAndNotNull(TiC.PROPERTY_THUMB_COLOR)
+					? TiConvert.toColor(d, TiC.PROPERTY_THUMB_COLOR)
+					: TiConvert.toColor(d, TiC.PROPERTY_ON_THUMB_COLOR);
+
+				ColorStateList trackStates = new ColorStateList(
+					new int[][] {
+						new int[] { -android.R.attr.state_enabled },
+						new int[] { android.R.attr.state_checked },
+						new int[] {}
+					},
+					new int[] {
+						colNormal,
+						colActive,
+						colNormal
+					}
+				);
+				((SwitchMaterial) currentButton).setThumbTintList(trackStates);
+			}
+		}
+
+		if (d.containsKeyAndNotNull(TiC.PROPERTY_TINT_COLOR)
+			|| d.containsKeyAndNotNull(TiC.PROPERTY_ON_TINT_COLOR)) {
+			CompoundButton currentButton = (CompoundButton) getNativeView();
+			if (currentButton instanceof SwitchMaterial) {
+
+				int colActive = d.containsKeyAndNotNull(TiC.PROPERTY_ON_TINT_COLOR)
+					? TiConvert.toColor(d, TiC.PROPERTY_ON_TINT_COLOR)
+					: TiConvert.toColor(d, TiC.PROPERTY_TINT_COLOR);
+				int colNormal = d.containsKeyAndNotNull(TiC.PROPERTY_TINT_COLOR)
+					? TiConvert.toColor(d, TiC.PROPERTY_TINT_COLOR)
+					: TiConvert.toColor(d, TiC.PROPERTY_ON_TINT_COLOR);
+
+				ColorStateList trackStates = new ColorStateList(
+					new int[][] {
+						new int[] { -android.R.attr.state_enabled },
+						new int[] { android.R.attr.state_checked },
+						new int[] {}
+					},
+					new int[] {
+						colNormal,
+						colActive,
+						colNormal
+					}
+				);
+				((SwitchMaterial) currentButton).setTrackTintList(trackStates);
+			}
+		}
+
 		if (d.containsKey(TiC.PROPERTY_VALUE)) {
 			oldValue = TiConvert.toBoolean(d, TiC.PROPERTY_VALUE);
 		}
@@ -151,7 +213,7 @@ public void propertyChanged(String key, Object oldValue, Object newValue, KrollP
 		} else {
 			super.propertyChanged(key, oldValue, newValue, proxy);
 		}
- 	}
+	}
 
 	@Override
 	public void onCheckedChanged(CompoundButton btn, boolean value)

android/titanium/src/java/org/appcelerator/titanium/TiC.java

@@ -142,6 +142,8 @@ public class TiC
 	public static final String EVENT_PROPERTY_TAB = "tab";
 	public static final String EVENT_PROPERTY_THUMB_OFFSET = "thumbOffset";
 	public static final String EVENT_PROPERTY_THUMB_SIZE = "thumbSize";
+	public static final String PROPERTY_THUMB_COLOR = "thumbColor";
+	public static final String PROPERTY_ON_THUMB_COLOR = "onThumbColor";
 	public static final String EVENT_PROPERTY_TYPE = "type";
 	public static final String EVENT_PROPERTY_VELOCITY = "velocity";
 	public static final String EVENT_PROPERTY_X = "x";
@@ -608,6 +610,7 @@ public class TiC
 	public static final String PROPERTY_ON_RESTART = "onRestart";
 	public static final String PROPERTY_ON_PAUSE = "onPause";
 	public static final String PROPERTY_ON_STOP = "onStop";
+	public static final String PROPERTY_ON_TINT_COLOR = "onTintColor";
 	public static final String PROPERTY_TLS_VERSION = "tlsVersion";
 	public static final String PROPERTY_ON_DESTROY = "onDestroy";
 	public static final String PROPERTY_ON_CREATE_WINDOW = "onCreateWindow";

apidoc/Titanium/UI/Switch.yml

@@ -118,17 +118,41 @@ properties:
 
   - name: tintColor
     summary: The color used to tint the outline of the switch when it is turned off.
+    description: |
+        The color used to tint the outline of the switch when it is turned off.
+
+        Android: Track color of the Material Switch.
     type: [String, Titanium.UI.Color]
     default: undefined
-    platforms: [iphone, ipad, macos]
-    since: "3.3.0"
+    platforms: [android, iphone, ipad]
+    since: {android: 12.4.0, iphone: 3.3.0, ipad: 3.3.0}
+
+  - name: onThumbColor
+    description: |
+        The color used to tint the thumb icon of the switch when it is turned on.
+
+        Android: Active thumb color of the Material Switch.
+    type: [String, Titanium.UI.Color]
+    default: undefined
+    platforms: [android]
+    since: {android: 12.4.0}
+
+  - name: thumbColor
+    description: |
+        The color used to tint the thumb icon of the switch when it is turned off.
+
+        Android: Inactive thumb color of the Material Switch.
+    type: [String, Titanium.UI.Color]
+    default: undefined
+    platforms: [android]
+    since: {android: 12.4.0}
 
   - name: onTintColor
     summary: The color used to tint the appearance of the switch when it is turned on.
     type: [String, Titanium.UI.Color]
     default: undefined
-    platforms: [iphone, ipad, macos]
-    since: "3.3.0"
+    platforms: [android, iphone, ipad, macos]
+    since: {android: 12.4.0, iphone: 3.3.0, ipad: 3.3.0}
 
   - name: thumbTintColor
     summary: The color used to tint the appearance of the thumb.