title: Define a custom style (theme) on an Android Switch component
body: <p>I'm new to Android development and also on Android theming/customization that looks to be a wide subject...</p>
  
  <p>I'm trying to give my Switch component a special look &amp; feel, but I don't manage to achieve what I want, avan after looking many resources on internet.</p>
  
  <p><strong>This is driving me crazy!!</strong><br>
  Thanks in advance for your help, Android masters !</p>
  
  <h1>The context</h1>
  
  <p>I work on an existing android application (v1) that was minSdkVersion="8".  </p>
  
  <p>Because of this, the application used 3rd-party libraries to get actionbar (<a href="https://github.com/JakeWharton/ActionBarSherlock" rel="noreferrer">ActionBar Sherlock</a>) and switches (<a href="https://github.com/ankri/SwitchCompatLibrary" rel="noreferrer">SwitchCompatLibrary</a>) : </p>
  
  <p>Today, we are making the v2 version, with minSdkVersion="14".  </p>
  
  <p>Our customer also ask us to change the default switch look and feel.</p>
  
  <p>The target is to have thiese switches :<br>
  <a href="https://i.stack.imgur.com/MkqPO.png" rel="noreferrer"><img src="https://i.stack.imgur.com/MkqPO.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/9C2mh.png" rel="noreferrer"><img src="https://i.stack.imgur.com/9C2mh.png" alt="enter image description here"></a></p>
  
  <p>This really looks like the latest material design switches, but with the orange color instead of the "green-blue" color, like <a href="https://www.google.com/design/spec/components/selection-controls.html#selection-controls-switch" rel="noreferrer">here</a>.</p>
  
  <h1>The constraints</h1>
  
  <p>As we are now minSdk 14, we could remove the 2 libraries "ActionBarSherlock" and "SwitchCompatLibrary", but <strong>this is NOT an option.</strong> Indeed, we do not have time for that...</p>
  
  <p>Indeed, I tried to add in dependencies in my project's gradle file the <strong>appcompat-v7</strong>, in order to try using the native switch component with material theme inside (<a href="http://developer.android.com/training/material/compatibility.html" rel="noreferrer">see here</a>) but this gives me errors because of duplicate attributes definitions with the 2 libs mentionned above. So I can't use it, and I'm not sure this should have work...</p>
  
  <pre><code>dependencies {
  (...)
  
  compile project(':actionbarsherlock')
  compile project(':switchCompatLibrary')
  compile files('libs/android-support-v4.jar')
  
  // incompatible avec actionbarsherlock and SwitchCompatLibrary...
  // compile "com.android.support:appcompat-v7:22.0.+" 
  
  (...)
  }
  </code></pre>
  
  <h1>Existing code</h1>
  
  <p>So here is the actuel code.</p>
  
  <p>In my layout.xml file, I use the SwitchCompatLibrary switch :</p>
  
  <pre><code>        &lt;de.ankri.views.Switch
              android:id="@+id/switchButtonNotification"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_alignParentRight="true" /&gt;
  </code></pre>
  
  <p>In my themes.xml file :</p>
  
  <pre><code>&lt;style name="Theme.Orange" parent="@style/Theme.Sherlock"&gt;
      ...
      &lt;!-- Theme switch with SwitchCompatLibrary --&gt;
      &lt;item name="switchStyle"&gt;@style/switch_light&lt;/item&gt;
      &lt;item name="textAppearance"&gt;@style/TextAppearance&lt;/item&gt;
  &lt;/style&gt;
  </code></pre>
  
  <p>with styling informations defined in the SwitchCompatLibrary itself like this</p>
  
  <p>styles.xml :</p>
  
  <pre><code>&lt;resources xmlns:android="http://schemas.android.com/apk/res/android"&gt;
  
      &lt;style name="switch_light"&gt;
          &lt;item name="track"&gt;@drawable/switch_track_holo_light&lt;/item&gt;
          &lt;item name="thumb"&gt;@drawable/switch_inner_holo_light&lt;/item&gt;
          &lt;item name="textOn"&gt;@string/textOn&lt;/item&gt;
          &lt;item name="textOff"&gt;@string/textOff&lt;/item&gt;
          &lt;item name="thumbTextPadding"&gt;12dip&lt;/item&gt;
          &lt;item name="switchMinWidth"&gt;96dip&lt;/item&gt;
          &lt;item name="switchPadding"&gt;16dip&lt;/item&gt;
          &lt;item name="switchTextAppearance"&gt;@style/TextAppearance&lt;/item&gt;
      &lt;/style&gt;    
  
      &lt;style name="TextAppearance"&gt;
          &lt;item name="textColor"&gt;?android:attr/textColorPrimary&lt;/item&gt;
          &lt;item name="textColorHighlight"&gt;?android:attr/textColorHighlight&lt;/item&gt;
          &lt;item name="textColorHint"&gt;?android:attr/textColorHint&lt;/item&gt;
          &lt;item name="textColorLink"&gt;?android:attr/textColorLink&lt;/item&gt;
          &lt;item name="textSize"&gt;16sp&lt;/item&gt;
      &lt;/style&gt;
  &lt;/resources&gt;
  </code></pre>
  
  <p>switch_inner_holo_light.xml</p>
  
  <pre><code>&lt;selector xmlns:android="http://schemas.android.com/apk/res/android"&gt;
      &lt;item android:state_enabled="false" android:drawable="@drawable/switch_thumb_disabled_holo_light" /&gt;
      &lt;item android:state_pressed="true"  android:drawable="@drawable/switch_thumb_pressed_holo_light" /&gt;
      &lt;item android:state_checked="true"  android:drawable="@drawable/switch_thumb_activated_holo_light" /&gt;
      &lt;item                               android:drawable="@drawable/switch_thumb_holo_light" /&gt;
  &lt;/selector&gt;
  </code></pre>
  
  <p>switch_track_holo_light.xml</p>
  
  <pre><code>&lt;selector xmlns:android="http://schemas.android.com/apk/res/android"&gt;
      &lt;item android:state_focused="true"  android:drawable="@drawable/switch_bg_focused_holo_light" /&gt;
      &lt;item                               android:drawable="@drawable/switch_bg_holo_light" /&gt;
  &lt;/selector&gt;
  </code></pre>
  
  <p>And the result is this:<br>
  <a href="https://i.stack.imgur.com/2IjbL.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/2IjbL.jpg" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/vRgOd.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/vRgOd.jpg" alt="enter image description here"></a></p>
  
  <h1>What I tried</h1>
  
  <h3>Use the native switch</h3>
  
  <p>As I'm now API 14 minimum, I first tried to replace the "de.ankri.views.Switch" with "android.widget.Switch" in my layout.xml, but the styling was not applying anymore (blue activated switch instead or orange)...<br>
  <a href="https://i.stack.imgur.com/qaPpy.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/qaPpy.jpg" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/MVeC2.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/MVeC2.jpg" alt="enter image description here"></a></p>
  
  <p>However, defining directly in each switch the theme (<a href="https://stackoverflow.com/questions/10118050/how-can-i-style-an-android-switch">as described here</a>) seems to work better as I have an orange switch back :  </p>
  
  <pre><code>    &lt;Switch
          android:id="@+id/switchButtonNotification"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          tools:checked="true"
          android:thumb="@drawable/switch_inner_holo_light"
          android:track="@drawable/switch_track_holo_light"
          android:layout_alignParentRight="true" /&gt;
  </code></pre>
  
  <p>Strange... I don't know why, so I will not do that and keep "de.ankri.views.Switch" component.</p>
  
  <h3>Use the SwitchCompatLibrary switch and do my own styling</h3>
  
  <p>Then I tried to keep "de.ankri.views.Switch" component and do the same thing than SwitchCompatLibrary, but overriding the "@style/switch_light" style with my own one, using new drawables for track and thumb</p>
  
  <p>themes.xml :</p>
  
  <pre><code>&lt;style name="Theme.Orange" parent="@style/Theme.Sherlock"&gt;
      ...
      &lt;!-- Theme switch with SwitchCompatLibrary --&gt;
      &lt;item name="switchStyle"&gt;@style/Switch.Orange&lt;/item&gt;
      &lt;item name="textAppearance"&gt;@style/TextAppearance&lt;/item&gt;
  &lt;/style&gt;
  </code></pre>
  
  <p>styles.xml :</p>
  
  <pre><code>&lt;style name="Switch.Orange" parent="@style/switch_light"&gt;
      &lt;item name="track"&gt;@drawable/switch_track_orange&lt;/item&gt;
      &lt;item name="thumb"&gt;@drawable/switch_thumb_orange&lt;/item&gt;
      &lt;item name="textOn"&gt;@string/textOn&lt;/item&gt;
      &lt;item name="textOff"&gt;@string/textOff&lt;/item&gt;
      &lt;item name="thumbTextPadding"&gt;12dip&lt;/item&gt;
      &lt;item name="switchMinWidth"&gt;96dip&lt;/item&gt;
      &lt;item name="switchPadding"&gt;16dip&lt;/item&gt;
      &lt;item name="switchTextAppearance"&gt;@style/TextAppearance&lt;/item&gt;
  &lt;/style&gt;
  </code></pre>
  
  <p>switch_thumb_orange.xml</p>
  
  <pre><code>&lt;selector xmlns:android="http://schemas.android.com/apk/res/android"&gt;
      &lt;item android:state_enabled="false" android:drawable="@drawable/switch_thumb_normal_orange" /&gt;
      &lt;item android:state_pressed="true"  android:drawable="@drawable/switch_thumb_activated_orange" /&gt;
      &lt;item android:state_checked="true"  android:drawable="@drawable/switch_thumb_activated_orange" /&gt;
      &lt;item                               android:drawable="@drawable/switch_thumb_normal_orange" /&gt;
  &lt;/selector&gt;
  </code></pre>
  
  <p>switch_thumb_activated_orange.9.png
  <a href="https://i.stack.imgur.com/BYSxK.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/BYSxK.jpg" alt="enter image description here"></a></p>
  
  <p>switch_thumb_normal_orange.9.png
  <a href="https://i.stack.imgur.com/6EUUp.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/6EUUp.jpg" alt="enter image description here"></a></p>
  
  <p>switch_track_orange.xml</p>
  
  <pre><code>&lt;selector xmlns:android="http://schemas.android.com/apk/res/android"&gt;
      &lt;item android:state_enabled="false" android:drawable="@drawable/switch_track_normal_orange" /&gt;
      &lt;item android:state_checked="true" android:drawable="@drawable/switch_track_activated_orange" /&gt;
      &lt;item android:state_focused="true"  android:drawable="@drawable/switch_track_activated_orange" /&gt;
      &lt;item                               android:drawable="@drawable/switch_track_normal_orange" /&gt;
  &lt;/selector&gt;
  </code></pre>
  
  <p>switch_track_activated_orange.9.png
  <a href="https://i.stack.imgur.com/aoBDf.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/aoBDf.jpg" alt="enter image description here"></a></p>
  
  <p>switch_track_normal_orange.9.png
  <a href="https://i.stack.imgur.com/wPUQV.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/wPUQV.jpg" alt="enter image description here"></a></p>
  
  <h3>Results :</h3>
  
  <p>And the result is just AWFUL !! :<br>
  <a href="https://i.stack.imgur.com/LTXJh.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/LTXJh.jpg" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/7sya3.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/7sya3.jpg" alt="enter image description here"></a></p>
  
  <p>Where am I wrong ? 
  I tried to change the "thumbTextPadding", "switchMinWidth" and "switchPadding" in styles.xml, but without good results.</p>
  
  <p>Perhaps my 9-patch files are wrong?</p>