Change on color of a Switch

Question

I m using a standard Switch control with the holo light theme in a ICS app   I want to change the highlighted or on state color of the Toggle Button from the standard light blue to green   This should be easy  but I can t seem to work out how to do it

User · Answer

While answer by SubChord is correct  is doesnt really answer the question of how to set the  on  color without also affecting other widgets  To do this  use a ThemeOverlay in styles xml    lt style name  ToggleSwitchTheme  parent  ThemeOverlay AppCompat Light  gt       lt item name  colorAccent  gt  color green bright lt  item gt   lt  style gt    And reference it in your switch    lt android support v7 widget SwitchCompat   android theme   style ToggleSwitchTheme        gt    In so doing it will ONLY affect the color of the views you want to apply it to

User · Answer

This is working for me  requires Android 4 1    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 needs to be added last as shown here   The only problem I see is that the  thumb  of the switch now appears larger than the background or  track  of the switch  I think that s because I m still using the default track image  which has some empty space around it  However  when I attempted to customize the track image using this technique  my switch appeared to have a height of 1 pixel with just a sliver of the on off text appearing  There must be a solution for that  but I haven t found it yet     Update for Android 5  In Android 5  the code above makes the switch disappear completely  We should be able to use the new setButtonTintList method  but this seems to be ignored for switches  But this works   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 getThumbDrawable   setTintList buttonStates   switchInput getTrackDrawable   setTintList buttonStates     Update for Android 6-7  As Cheruby stated in the comments  we can use the new setThumbTintList and that worked as expected for me  We can also use setTrackTintList  but that applies the color as a blend  with a result that s darker than expected in dark color themes and lighter than expected in light color themes  sometimes to the point of being invisible  In Android 7  I was able to minimize that change that by overriding the track tint mode  but I couldn t get decent results from that in Android 6  You might need to define extra colors that compensate for the blending   Do you ever get the feeling that Google doesn t want us to customize the appearance 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  gt   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

User · Answer

To change Switch style without using style xml or Java code  you can customize switch into layout XML     lt 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    gt    It s attribute android thumbTint and android trackTint that allowed you to customize color  This is the visual result for this XML

User · Answer

In xml   you can change the color as     lt androidx appcompat widget SwitchCompat     android id  quot   id notificationSwitch quot      android layout width  quot match parent quot      android layout height  quot wrap content quot      android checked  quot true quot      app thumbTint  quot  color darkBlue quot      app trackTint  quot  color colorGrey quot   gt   Dynamically you can change as   Switch thumbDrawable setColorFilter ContextCompat getColor requireActivity    R color darkBlue   PorterDuff Mode MULTIPLY

User · Answer

You can try this lib  easy to change color for the switch button  https   github com kyleduo SwitchButton

User · Answer

Late to party but this is how I did  Style    lt style name  SCBSwitch  parent  Theme AppCompat Light  gt           lt  -- active thumb  amp  track color  30  transparency  -- gt           lt item name  colorControlActivated  gt  46bdbf lt  item gt            lt  -- inactive thumb color -- gt           lt item name  colorSwitchThumbNormal  gt  f1f1f1          lt  item gt            lt  -- inactive track color  30  transparency  -- gt           lt item name  android colorForeground  gt  42221f1f          lt  item gt       lt  style gt    Colors    Layout   lt 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    gt    Result  See change of colors  for enables and disabled switch

User · Answer

This worked for me -  1 code in values styles xml -    lt style name  quot SwitchTheme quot  parent  quot Theme AppCompat Light quot  gt       lt item name  quot android colorControlActivated quot  gt  148E13 lt  item gt   lt  style gt   2 add following line of code in your switch in your layout file -  android theme  quot  style SwitchTheme quot

User · Answer

May be its a bit late  but for switch buttons  toogle button is not the answer  you must change the drawable in the xml parameter of the switch    android thumb  your drawable here

User · Answer

I solved it by updating the Color Filter when the Switch was state 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  gt   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

User · Answer

I dont know how to do it from java   But if you have a style defined for your app you can add this line in your style and you will have the desired color  for me i have used   3F51B5   lt color name  ascentColor  gt  3F51B5 lt  color gt

User · Answer

Based on a combination of a few of the answers here this is what worked for me   lt Switch     android trackTintMode  quot src over quot      android thumbTint  quot  color white quot      android trackTint  quot  color shadow quot      android checked  quot true quot      android layout width  quot wrap content quot      android layout height  quot wrap content quot   gt

User · Answer

make drawable  newthumb xml    lt selector xmlns android  http   schemas android com apk res android  gt       lt item android color   color Green  android state checked  true   gt       lt item android color   color Red  android state checked  false   gt   lt  selector gt    and make drawable  newtrack xml    lt selector xmlns android  http   schemas android com apk res android  gt           lt item android color   color black  android state checked  true   gt           lt item android color   color white  android state checked  false   gt       lt  selector gt    and add it in Switch     lt Switch         android trackTint   drawable newtrack          android thumbTint   drawable newthumb             gt

User · Answer

Create your own 9-patch image and set it as the background of the toggle button   http   radleymarx com 2011 simple-guide-to-9-patch

User · Answer

you can make custom style for switch widget   that use color accent as a default when do custom style for it    lt style name  switchStyle  parent  Theme AppCompat Light  gt       lt item name  colorPrimary  gt  color colorPrimary lt  item gt       lt item name  colorPrimaryDark  gt  color colorPrimaryDark lt  item gt       lt item name  colorAccent  gt  color colorPrimary lt  item gt      lt  -- set your color -- gt   lt  style gt

User · Answer

As of now it is better to use SwitchCompat from the AppCompat v7 library  You can then use simple styling to change the color of your components   values themes xml    lt style name  Theme MyTheme  parent  Theme AppCompat Light  gt       lt  -- colorPrimary is used for the default action bar background -- gt       lt item name  colorPrimary  gt  color my awesome color lt  item gt        lt  -- colorPrimaryDark is used for the status bar -- gt       lt item name  colorPrimaryDark  gt  color my awesome darker color lt  item gt        lt  -- colorAccent is used as the default value for colorControlActivated           which is used to tint widgets -- gt       lt item name  colorAccent  gt  color accent lt  item gt        lt  -- You can also set colorControlNormal  colorControlActivated          colorControlHighlight  and colorSwitchThumbNormal  -- gt    lt  style gt    ref  Android Developers Blog  EDIT   The way in which it should be correctly applied is through android theme   style Theme MyTheme   and also this can be applied to parent styles such as EditTexts  RadioButtons  Switches  CheckBoxes and ProgressBars    lt style name  My Widget ProgressBar  parent  Widget AppCompat ProgressBar  gt    lt style name  My Widget Checkbox  parent  Widget AppCompat CompoundButton CheckBox  gt

User · Answer

Try to find out right answer here  Selector on background color of TextView  In two words you should create Shape in XML with color and then assign it to state  checked  in your selector

User · Answer

Solution for Android Studio 3 6   yourSwitch setTextColor getResources   getColor R color yourColor      Changes the text color of a in the color XML file defined value  yourColor

User · Answer

lt androidx appcompat widget SwitchCompat                 android layout width  wrap content                  android layout height  wrap content                  app thumbTint   color white                  app trackTint   drawable checker track   gt    And inside checker track xml    lt selector xmlns android  http   schemas android com apk res android  gt       lt item android color   color lightish blue  android state checked  true   gt       lt item android color   color hint  android state checked  false   gt   lt  selector gt

User · Answer

In Android Lollipop and above  define it in your theme style    lt style name  BaseAppTheme  parent  Material Theme  gt               lt item name  android colorControlActivated  gt  color color switch lt  item gt   lt  style gt

User · Answer

As an addition to existing answers  you can customize thumb and track using selectors in res color folder  for example   switch track selector   lt  xml version  1 0  encoding  utf-8   gt   lt selector     xmlns android  http   schemas android com apk res android  gt       lt item android color   color lightBlue          android state checked  true    gt       lt item android color   color grey   gt   lt  selector gt    switch thumb selector     lt selector     xmlns android  http   schemas android com apk res android  gt       lt item android color   color darkBlue          android state checked  true    gt       lt item android color   color white   gt   lt  selector gt    Use these selectors to customize track and thumb tints    lt androidx appcompat widget SwitchCompat     android layout width  wrap content      android layout height  wrap content      app trackTint   color switch track selector      app thumbTint   color switch thumb selector   gt    Keep in mind that if you use standart Switch and android namespace for these attributes  it will only work for API 23 and later  so use SwitchCompat with app namespace xmlns app  http   schemas android com apk res-auto  as universal solution    Result

User · Answer

The solution suggested from arlomedia worked for me  About his issue of extraspace I solved removing all the paddings to the switch   EDIT  As requested  here what I have   In the layout file  my switch is inside a linear layout and after a TextView    lt 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  gt           lt 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    gt           lt 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    gt       lt  LinearLayout gt    Since I m 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 previously defined like this  Xamarin    Switch swtch EnableEdit   view FindViewById lt Switch gt  Resource Id mySwitch     I don t set at all the paddings and I don t call  setPadding 0  0  0  0

User · Answer

Easiest way is defining track tint  and setting tint mode to src over to remove 30  transparency   android trackTint   drawable toggle style  android trackTintMode  src over    toggle style xml   lt selector xmlns android  http   schemas android com apk res android  gt       lt item android color   color informationDefault          android state checked  true            gt       lt item android color   color textDisabled  android state checked  false   gt   lt  selector gt

User · Answer

Create a custom Switch and override setChecked to change 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  gt   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

[android] Change "on" color of a Switch

Examples related to android

Examples related to togglebutton