Change the color "on" to the color of the switch

Question

I am using standard Switch control using the holo.light theme in the ICS application.

I want to change the highlighted color or state color of the Toggle button from standard blue to green.

It should be easy, but I can’t figure out how to do it.

Answer 1

Currently, it is better to use SwitchCompat from the AppCompat.v7 library. You can then use a simple style to change the color of your components.

values/themes.xml: <style name="Theme.MyTheme" parent="Theme.AppCompat.Light"> <!-- colorPrimary is used for the default action bar background --> <item name="colorPrimary">@color/my_awesome_color</item> <!-- colorPrimaryDark is used for the status bar --> <item name="colorPrimaryDark">@color/my_awesome_darker_color</item> <!-- colorAccent is used as the default value for colorControlActivated, which is used to tint widgets --> <item name="colorAccent">@color/accent</item> <!-- You can also set colorControlNormal, colorControlActivated colorControlHighlight, and colorSwitchThumbNormal. --> </style> 

ref: Android Developer Blog

Answer 2

Late to the party, but so I did

Style

  <style name="SCBSwitch" parent="Theme.AppCompat.Light"> <!-- active thumb & track color (30% transparency) --> <item name="colorControlActivated">#46bdbf</item> <!-- inactive thumb color --> <item name="colorSwitchThumbNormal">#f1f1f1 </item> <!-- inactive track color (30% transparency) --> <item name="android:colorForeground">#42221f1f </item> </style> 

Colors

Markup

 <android.support.v7.widget.SwitchCompat android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:checked="false" android:theme="@style/SCBSwitch" /> 

Result

See changing colors to turn the switch on and off.

Answer 3

This works for me (Android 4.1 required):

 Switch switchInput = new Switch(this); int colorOn = 0xFF323E46; int colorOff = 0xFF666666; int colorDisabled = 0xFF333333; StateListDrawable thumbStates = new StateListDrawable(); thumbStates.addState(new int[]{android.R.attr.state_checked}, new ColorDrawable(colorOn)); thumbStates.addState(new int[]{-android.R.attr.state_enabled}, new ColorDrawable(colorDisabled)); thumbStates.addState(new int[]{}, new ColorDrawable(colorOff)); // this one has to come last switchInput.setThumbDrawable(thumbStates); 

Note that the default state must be added last, as shown here.

The only problem I see is that the thumb of the switch is now larger than the background or track of the switch. I think because I am still using the default track image, which has empty space around it. However, when I tried to adjust the image of the track using this technique, my switch apparently had a height of 1 pixel, and only text text on / off. There must be a solution for this, but I have not found it yet ...

Update for Android 5.1

In Android 5.1, the code above disables the switch completely. We should use the new setButtonTintList method, but this had no effect when I tried it. Now I use this code:

 switchInput.getThumbDrawable().setColorFilter(Color.RED, PorterDuff.Mode.MULTIPLY); switchInput.getTrackDrawable().setColorFilter(Color.RED, PorterDuff.Mode.MULTIPLY); 

The only drawback is that there is no way to set the color for the disabled state. The track becomes paler, but the thumb remains the same color, so the change is more subtle than we would like.

Update for Android 5.1.1

Apparently, the setButtonTintList () method had an error in 5.1, which was fixed in 5.1.1. This code now works as expected, without any flaws that I see:

 ColorStateList buttonStates = new ColorStateList( new int[][]{ new int[]{-android.R.attr.state_enabled}, new int[]{android.R.attr.state_checked}, new int[]{} }, new int[]{ Color.BLUE, Color.RED, Color.GREEN } ); switchInput.setButtonTintList(buttonStates); 

Update for Android 6-7

In Android 6-7, setButtonTintList ignored on switches. As stated in the comments on Cheruby, we can use the new setThumbTintList and worked as expected for me. We can also use setTrackTintList , but this refers to the color as a mixture, making it darker than expected in dark colors and lighter than expected in light colors, sometimes invisible. In Android 7, I managed to minimize these changes by overriding the tint mode track, but I couldn’t get decent results from Android 6. You may need to define additional colors that compensate for the mix. (Do you ever get the feeling that Google doesn't want us to customize the look of our apps?)

 ColorStateList thumbStates = new ColorStateList( new int[][]{ new int[]{-android.R.attr.state_enabled}, new int[]{android.R.attr.state_checked}, new int[]{} }, new int[]{ Color.BLUE, Color.RED, Color.GREEN } ); switchInput.setThumbTintList(thumbStates); if (Build.VERSION.SDK_INT >= 24) { ColorStateList trackStates = new ColorStateList( new int[][]{ new int[]{-android.R.attr.state_enabled}, new int[]{} }, new int[]{ Color.GRAY, Color.LTGRAY } ); switchInput.setTrackTintList(trackStates); switchInput.setTrackTintMode(PorterDuff.Mode.OVERLAY); } 

Answer 4

Create a custom switch and override setChecked to change the color:

  public class SwitchPlus extends Switch { public SwitchPlus(Context context) { super(context); } public SwitchPlus(Context context, AttributeSet attrs) { super(context, attrs); } public SwitchPlus(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } @Override public void setChecked(boolean checked) { super.setChecked(checked); changeColor(checked); } private void changeColor(boolean isChecked) { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) { int thumbColor; int trackColor; if(isChecked) { thumbColor = Color.argb(255, 253, 153, 0); trackColor = thumbColor; } else { thumbColor = Color.argb(255, 236, 236, 236); trackColor = Color.argb(255, 0, 0, 0); } try { getThumbDrawable().setColorFilter(thumbColor, PorterDuff.Mode.MULTIPLY); getTrackDrawable().setColorFilter(trackColor, PorterDuff.Mode.MULTIPLY); } catch (NullPointerException e) { e.printStackTrace(); } } } } 

Answer 5

To change the Switch style without using the style.xml style or Java code, you can configure the switch in the XML layout:

 <Switch android:id="@+id/checkbox" android:layout_width="wrap_content" android:thumbTint="@color/blue" android:trackTint="@color/white" android:checked="true" android:layout_height="wrap_content" /> 

This is the android: thumbTint and android: trackTint attribute that allowed you to customize the color

This is the visual result for this XML:

Answer 6

While SubChord's answer is correct, it doesn't really answer the question of how to set the color to “on” without affecting other widgets. To do this, use ThemeOverlay in styles.xml:

 <style name="ToggleSwitchTheme" parent="ThemeOverlay.AppCompat.Light"> <item name="colorAccent">@color/green_bright</item> </style> 

And refer to it in your switch:

 <android.support.v7.widget.SwitchCompat android:theme="@style/ToggleSwitchTheme" ... /> 

However, it will ONLY affect the color of the species to which you want to apply it.

Answer 7

I solved it by updating the color filter when the state of the switch was changed ...

 public void bind(DetailItem item) { switchColor(item.toggle); listSwitch.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() { @Override public void onCheckedChanged(CompoundButton compoundButton, boolean b) { switchColor(b); } }); } private void switchColor(boolean checked) { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) { listSwitch.getThumbDrawable().setColorFilter(checked ? Color.BLACK : Color.WHITE, PorterDuff.Mode.MULTIPLY); listSwitch.getTrackDrawable().setColorFilter(!checked ? Color.BLACK : Color.WHITE, PorterDuff.Mode.MULTIPLY); } } 

Answer 8

Maybe he was a little late, but for the toggle buttons, the Google button is not the answer, you should change the selection in the switch xml parameter:

  android:thumb="your drawable here" 

Answer 9

Create your own image with 9 patches and set it as the background of the toggle button.

http://radleymarx.com/2011/simple-guide-to-9-patch/

Answer 10

In Android Lollipop and above, define it in your style:

 <style name="BaseAppTheme" parent="Material.Theme"> ... <item name="android:colorControlActivated">@color/color_switch</item> </style> 

Answer 11

The solution proposed by arlomedia worked for me. About his extraspace problem, I decided to remove all the gaskets to the switch.

EDIT

As requested, here is what I have.

In the layout file, my switch is inside the line layout and after the TextView.

 <LinearLayout android:id="@+id/myLinearLayout" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="50dp" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:layout_gravity="center_horizontal|center" android:gravity="right" android:padding="10dp" android:layout_marginTop="0dp" android:background="@drawable/bkg_myLinearLayout" android:layout_marginBottom="0dp"> <TextView android:id="@+id/myTextForTheSwitch" android:layout_height="wrap_content" android:text="@string/TextForTheSwitch" android:textSize="18sp" android:layout_centerHorizontal="true" android:layout_gravity="center_horizontal|center" android:gravity="right" android:layout_width="wrap_content" android:paddingRight="20dp" android:textColor="@color/text_white" /> <Switch android:id="@+id/mySwitch" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textOn="@string/On" android:textOff="@string/Off" android:layout_centerHorizontal="true" android:layout_gravity="center_horizontal" android:layout_toRightOf="@id/myTextForTheSwitch" android:layout_alignBaseline="@id/myTextForTheSwitch" android:gravity="right" /> </LinearLayout> 

Since I am working with Xamarin / Monodroid (min. Android 4.1), my code is:

 Android.Graphics.Color colorOn = Android.Graphics.Color.Green; Android.Graphics.Color colorOff = Android.Graphics.Color.Gray; Android.Graphics.Color colorDisabled = Android.Graphics.Color.Green; StateListDrawable drawable = new StateListDrawable(); drawable.AddState(new int[] { Android.Resource.Attribute.StateChecked }, new ColorDrawable(colorOn)); drawable.AddState(new int[] { -Android.Resource.Attribute.StateEnabled }, new ColorDrawable(colorDisabled)); drawable.AddState(new int[] { }, new ColorDrawable(colorOff)); swtch_EnableEdit.ThumbDrawable = drawable; 

swtch_EnableEdit is predefined as follows (Xamarin):

 Switch swtch_EnableEdit = view.FindViewById<Switch>(Resource.Id.mySwitch); 

I do not install on all paddings and I do not call .setPadding (0, 0, 0, 0).

Answer 12

you can create your own style for the switch widget that use color accent as the default when the custom style for it

 <style name="switchStyle" parent="Theme.AppCompat.Light"> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorPrimary</item> <!-- set your color --> </style> 

Answer 13

Try to find the correct answer here: Selector on the background color of the TextView . In a nutshell, you have to create a Shape in XML with color, and then assign it a state of "checked" in your selector.

Answer 14

I do not know how to do this from java. But if you have a style specific to your application, you can add this line to your style and you will have the necessary color for me. I used # 3F51B5

 <color name="ascentColor">#3F51B5</color>