How to change the color of a SwitchCompat from AppCompat library

Question

I have a few switch controls with different colors in my application and to change their colors I used multiple custom drawable selectors   A new android support v7 widget SwitchCompat control was introduced with the release of the AppCompat v21 library   Is it possible to change the color of a SwitchCompat programmatically without customer drawable selector  but with XML or code

User · Answer

My working example of using style and android theme simultaneously  API    21    lt android support v7 widget SwitchCompat     android id    id wan enable nat switch      style   style Switch      app layout constraintBaseline toBaselineOf   id wan enable nat label      app layout constraintEnd toEndOf  parent    gt    lt style name  Switch  gt       lt item name  android layout width  gt wrap content lt  item gt       lt item name  android layout height  gt wrap content lt  item gt       lt item name  android paddingEnd  gt 16dp lt  item gt       lt item name  android focusableInTouchMode  gt true lt  item gt       lt item name  android theme  gt  style ThemeOverlay MySwitchCompat lt  item gt   lt  style gt    lt style name  ThemeOverlay MySwitchCompat  parent    gt       lt item name  colorControlActivated  gt  color colorPrimaryDark lt  item gt       lt item name  colorSwitchThumbNormal  gt  color text outline not active lt  item gt       lt item name  android colorForeground  gt  42221f1f lt  item gt   lt  style gt

User · Answer

I think the answer in the link below is better  How to change the track color of a SwitchCompat   lt style name  AppTheme  parent  Theme AppCompat Light NoActionBar  gt             lt  -- Active thumb color  amp  Active track color 30  transparency  -- gt      lt item name  colorControlActivated  gt  color theme lt  item gt      lt  -- Inactive thumb color -- gt      lt item name  colorSwitchThumbNormal  gt  color grey300 lt  item gt      lt  -- Inactive track color 30  transparency  -- gt      lt item name  android colorForeground  gt  color grey600 lt  item gt          lt  style gt

User · Answer

Just   android buttonTint   color primary

User · Answer

AppCompat tinting attributs   First  you should take a look to appCompat lib article there and to different attributs you can set    colorPrimary  The primary branding color for the app  By default  this is the color applied to the action bar background   colorPrimaryDark  Dark variant of the primary branding color  By default  this is the color applied to the status bar  via statusBarColor  and navigation bar  via navigationBarColor    colorAccent  Bright complement to the primary branding color  By default  this is the color applied to framework controls  via colorControlActivated    colorControlNormal  The color applied to framework controls in their normal state   colorControlActivated  The color applied to framework controls in their activated  ex  checked  switch on  state   colorControlHighlight  The color applied to framework control highlights  ex  ripples  list selectors    colorButtonNormal  The color applied to framework buttons in their normal state   colorSwitchThumbNormal  The color applied to framework switch thumbs in their normal state   switch off     If all custom switches are the same in a single activity   With previous attributes you can define your own theme for each activity    lt style name  Theme MyActivityTheme  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    and      lt manifest gt           lt activity         android name   MainActivity           android theme   style Theme MyActivityTheme  gt       lt  activity gt       lt  manifest gt      If you want to have differents custom switches in a single activity   As widget tinting in appcompat works by intercepting any layout inflation and inserting a special tint-aware version of the widget in its place  See Chris Banes post about it  you can not apply a custom style to each switch of your layout xml file  You have to set a custom Context that will tint switch with right colors   --  To do so for pre-5 0 you need to create a Context that overlays global theme with  customs attributs and then create your switches programmatically   ContextThemeWrapper ctw   ContextThemeWrapper getActivity    R style Color1SwitchStyle    SwitchCompat sc   new SwitchCompat ctw      As of AppCompat v22 1 you can use the following XML to apply a theme to the switch widget    lt RelativeLayout     xmlns app  http   schemas android com apk res-auto          gt        lt android support v7 widget SwitchCompat         android layout width  wrap content          android layout height  wrap content          app theme   style Color1SwitchStyle   gt    Your custom switch theme    lt style name  Color1SwitchStyle  gt       lt item name  colorControlActivated  gt  color my awesome color lt  item gt   lt  style gt    --  On Android 5 0 it looks like a new view attribut comes to life   android theme  same as one use for activity declaration in manifest   Based on another Chris Banes post  with the latter you should be able to define a custom theme directly on a view from your layout xml     lt android support v7 widget SwitchCompat     android layout width  wrap content      android layout height  wrap content      android theme   style Color1SwitchStyle   gt      To change the track color of a SwitchCompat  Thanks to vine th I complete my answer with a link to SO answer that explains how to specify the Foreground of the Track when Switch is Off  it s there

User · Answer

Ok  so I m sorry but most of these answers are incomplete or have some minor bug in them   The very complete answer from  austyn-mahoney is correct and the source for this answer  but it s complicated and you probably just want to style a switch    Styling  controls across different versions of Android is an epic pain in the ass   After pulling my hair out for days on a project with very tight design constraints I finally broke down and wrote a test app and then really dug in and tested the various solutions out there for styling switches and check-boxes  since when a design has one it frequently has the other   Here s what I found     First  You can t actually style either of them  but you can apply a theme to all of them  or just one of them   Second  You can do it all from XML and you don t need a second values-v21 styles xml   Third  when it comes to switches you have two basic choices if you want to support older versions of Android  like I m sure you do       You can use a SwitchCompat and you will be able to make it look the same across platforms  You can use a Switch and you will be able to theme it with the rest of your theme  or just that particular switch and on older versions of Android you ll just see an unstyled older square switch    Ok now for the simple reference code   Again if you create a simple Hello World  and drop this code in you can play to your hearts content   All of that is boiler plate here so I m just going to include the XML for the activity and the style     activity main xml      lt  xml version  1 0  encoding  utf-8   gt       lt RelativeLayout     android layout width  match parent      android layout height  wrap content      android paddingBottom   dimen activity vertical margin      android paddingLeft   dimen activity horizontal margin      android paddingRight   dimen activity horizontal margin      android paddingTop   dimen activity vertical margin      tools context  com kunai switchtest MainActivity  gt        lt TextView         android layout width  wrap content          android layout height  wrap content          android text   Styled  SwitchCompat    gt        lt android support v7 widget SwitchCompat         android id    id switch item          android layout width  wrap content          android layout height  46dp          android layout alignParentEnd  true          android layout marginEnd  16dp          android checked  true          android longClickable  false          android textOff  OFF          android textOn  ON          app switchTextAppearance   style BrandedSwitch text          app theme   style BrandedSwitch control          app showText  true    gt    lt  RelativeLayout gt    lt RelativeLayout     android layout width  match parent      android layout height  wrap content      android paddingBottom   dimen activity vertical margin      android paddingLeft   dimen activity horizontal margin      android paddingRight   dimen activity horizontal margin      android paddingTop   dimen activity vertical margin      tools context  com kunai switchtest MainActivity  gt        lt TextView         android layout width  wrap content          android layout height  wrap content          android text  Themed SwitchCompat    gt        lt android support v7 widget SwitchCompat         android id    id switch item2          android layout width  wrap content          android layout height  46dp          android layout alignParentEnd  true          android layout marginEnd  16dp          android checked  true          android longClickable  false    gt    lt  RelativeLayout gt    lt RelativeLayout     android layout width  match parent      android layout height  wrap content      android paddingBottom   dimen activity vertical margin      android paddingLeft   dimen activity horizontal margin      android paddingRight   dimen activity horizontal margin      android paddingTop   dimen activity vertical margin      tools context  com kunai switchtest MainActivity  gt        lt TextView         android layout width  wrap content          android layout height  wrap content          android text  Themed Switch    gt        lt Switch         android id    id switch item3          android layout width  wrap content          android layout height  46dp          android layout alignParentEnd  true          android layout marginEnd  16dp          android checked  true          android longClickable  false          android textOff  OFF          android textOn  ON   gt    lt  RelativeLayout gt    lt RelativeLayout     android layout width  match parent      android layout height  wrap content      android paddingBottom   dimen activity vertical margin      android paddingLeft   dimen activity horizontal margin      android paddingRight   dimen activity horizontal margin      android paddingTop   dimen activity vertical margin      tools context  com kunai switchtest MainActivity  gt        lt TextView         android layout width  wrap content          android layout height  wrap content          android text   Styled  Switch    gt        lt Switch         android id    id switch item4          android layout width  wrap content          android layout height  46dp          android layout alignParentEnd  true          android layout marginEnd  16dp          android checked  true          android longClickable  false          android textOff  OFF          android textOn  ON          android theme   style BrandedSwitch   gt    lt  RelativeLayout gt    lt RelativeLayout     android layout width  match parent      android layout height  wrap content      android paddingBottom   dimen activity vertical margin      android paddingLeft   dimen activity horizontal margin      android paddingRight   dimen activity horizontal margin      android paddingTop   dimen activity vertical margin      tools context  com kunai switchtest MainActivity  gt        lt TextView         android layout width  wrap content          android layout height  wrap content          android text   Styled  CheckBox    gt        lt CheckBox         android id    id checkbox          android layout width  wrap content          android layout height  46dp          android layout alignParentEnd  true          android layout marginEnd  16dp          android checked  true          android longClickable  false          android theme   style BrandedCheckBox   gt    lt  RelativeLayout gt    lt RelativeLayout     android layout width  match parent      android layout height  wrap content      android paddingBottom   dimen activity vertical margin      android paddingLeft   dimen activity horizontal margin      android paddingRight   dimen activity horizontal margin      android paddingTop   dimen activity vertical margin      tools context  com kunai switchtest MainActivity  gt        lt TextView         android layout width  wrap content          android layout height  wrap content          android text  Themed CheckBox    gt        lt CheckBox         android id    id checkbox2          android layout width  wrap content          android layout height  46dp          android layout alignParentEnd  true          android layout marginEnd  16dp          android checked  true          android longClickable  false   gt    lt  RelativeLayout gt      styles xml      lt resources gt    lt  -- Base application theme  -- gt   lt style name  AppTheme  parent  Theme AppCompat Light DarkActionBar  gt       lt  -- Customize your theme here  -- gt       lt item name  colorPrimary  gt  3F51B5 lt  item gt       lt item name  colorPrimaryDark  gt  303F9F lt  item gt       lt item name  colorAccent  gt  FF4081 lt  item gt   lt  style gt    lt style name  BrandedSwitch control  parent  Theme AppCompat Light  gt       lt  -- active thumb  amp  track color  30  transparency  -- gt       lt item name  colorControlActivated  gt  e6e600 lt  item gt       lt item name  colorSwitchThumbNormal  gt  cc0000 lt  item gt   lt  style gt    lt style name  BrandedSwitch text  parent  Theme AppCompat Light  gt       lt item name  android textColor  gt  ffa000 lt  item gt       lt item name  android textSize  gt 9dp lt  item gt   lt  style gt    lt style name  BrandedCheckBox  parent  AppTheme  gt       lt item name  colorAccent  gt  aaf000 lt  item gt       lt item name  colorControlNormal  gt  ff0000 lt  item gt   lt  style gt    lt style name  BrandedSwitch  parent  AppTheme  gt       lt item name  colorAccent  gt  39ac39 lt  item gt   lt  style gt      I know  I know  you are too lazy to build this  you just want to get your code written and check it in so you can close this pain in the ass Android compatibility nightmare bug so that the designer on your team will finally be happy   I get it   Here s what it looks like when you run it     API 21     API 18

User · Answer

Be carreful of the know bug with SwitchCompat  It s a bug with corrupt file in drawable-hdpi on AppCompat https   code google com p android issues detail id 78262  To fix it  juste override it with this 2 files https   github com lopespm quick-fix-switchcompat-resources Add it on your directory drawable-hdpi  XML   lt android support v7 widget SwitchCompat android id    id dev switch show dev only  android layout width  wrap content  android layout height  wrap content    gt    And nothing was necessary on Java

User · Answer

So some days I lack brain cells and     lt android support v7 widget SwitchCompat         android layout width  match parent          android layout height  wrap content          style   style CustomSwitchStyle   gt    does not apply the theme because style is incorrect   I was supposed to use app theme  P    lt android support v7 widget SwitchCompat         android layout width  match parent          android layout height  wrap content          app theme   style CustomSwitchStyle   gt    Whoopsies   This post was what gave me insight into my mistake   hopefully if someone stumbles across this it will help them like it did me   Thank you Ga  tan Maisse for your answer

User · Answer

To have greater control of the track color  no API controlled alpha changes   I extended SwitchCompat and style the elements programmatically       public class CustomizedSwitch extends SwitchCompat        public CustomizedSwitch Context context            super context           initialize context              public CustomizedSwitch Context context  AttributeSet attrs            super context  attrs           initialize context              public CustomizedSwitch Context context  AttributeSet attrs  int defStyleAttr            super context  attrs  defStyleAttr           initialize context              public void initialize Context context               DisplayMeasurementConverter is just a utility to convert from dp to px and vice versa         DisplayMeasurementConverter displayMeasurementConverter   new DisplayMeasurementConverter context              Sets the width of the switch         this setSwitchMinWidth displayMeasurementConverter dpToPx  int  getResources   getDimension R dimen tp toggle width                Setting up my colors         int mediumGreen   ContextCompat getColor context  R color medium green           int mediumGrey   ContextCompat getColor context  R color medium grey           int alphaMediumGreen   Color argb 127  Color red mediumGreen   Color green mediumGreen   Color blue mediumGreen            int alphaMediumGrey   Color argb 127  Color red mediumGrey   Color green mediumGrey   Color blue mediumGrey               Sets the tints for the thumb in different states         DrawableCompat setTintList this getThumbDrawable    new ColorStateList                  new int                              new int   android R attr state checked                           new int                                        new int                            mediumGreen                          ContextCompat getColor getContext    R color light grey                                  Sets the tints for the track in different states         DrawableCompat setTintList this getTrackDrawable    new ColorStateList                  new int                              new int   android R attr state checked                           new int                                        new int                            alphaMediumGreen                          alphaMediumGrey                                Whenever I want to use the CustomizedSwitch  I just add one to my xml file

User · Answer

lt android support v7 widget SwitchCompat     xmlns android  http   schemas android com apk res android      xmlns tools  http   schemas android com tools      xmlns app  http   schemas android com apk res-auto      android layout width  wrap content      android layout height  wrap content      android id    id adamSwitch      android textColor   color top color      android textAppearance   color top color      android gravity  center      app showText  true      app theme   style Custom Widget SwitchCompat      app switchPadding  5dp        gt    in style xml   lt style name  Custom Widget SwitchCompat  parent  Widget AppCompat CompoundButton Switch   gt               lt item name  android textColorPrimary  gt  color blue lt  item gt    lt  --textColor on activated state -- gt         lt  style gt

[android] How to change the color of a SwitchCompat from AppCompat library

Examples related to android

Examples related to switchcompat