Hi everyone! 🙋🏻‍♀️ I love colors and use them in my apps to direct different emotions to the user 🦄  Customizing Switch Button in Android can be tricky. Let&#8217;s see how it&#8217;s done. First, we&#8217;ll look at the methods to change the colors. ✨ After that, we will use this button to change app theme.
<h3>Add SwitchCompat to XML</h3>
You can see default view below the code of added SwitchCompat view in XML file 👇🏼
<pre data-label="activity_main.xml"><code class="language-xml">&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
&lt;androidx.constraintlayout.widget.ConstraintLayout xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;
 xmlns:app=&quot;http://schemas.android.com/apk/res-auto&quot;
 xmlns:tools=&quot;http://schemas.android.com/tools&quot;
 android:layout_width=&quot;match_parent&quot;
 android:layout_height=&quot;match_parent&quot;
 tools:context=&quot;.MainActivity&quot;&gt;

 &lt;androidx.appcompat.widget.SwitchCompat
 android:id=&quot;@+id/switchButton&quot;
 android:layout_width=&quot;wrap_content&quot;
 android:layout_height=&quot;wrap_content&quot;
 app:layout_constraintBottom_toBottomOf=&quot;parent&quot;
 app:layout_constraintEnd_toEndOf=&quot;parent&quot;
 app:layout_constraintHorizontal_bias=&quot;0.5&quot;
 app:layout_constraintStart_toStartOf=&quot;parent&quot;
 app:layout_constraintTop_toTopOf=&quot;parent&quot;
 app:showText=&quot;false&quot; /&gt;

&lt;/androidx.constraintlayout.widget.ConstraintLayout&gt;</code></pre>
<img class="aligncenter size-full wp-image-4491" src="https://ac.appcircle.io/wp-content/uploads/2022/10/AnyConv.com__1XcY5daGWwgyKyzMgQvZr1A-min-min.webp" alt="" width="1386" height="572" srcset="https://ac.appcircle.io/wp-content/uploads/2022/10/AnyConv.com__1XcY5daGWwgyKyzMgQvZr1A-min-min.webp 1386w, https://ac.appcircle.io/wp-content/uploads/2022/10/AnyConv.com__1XcY5daGWwgyKyzMgQvZr1A-min-min-300x124.webp 300w, https://ac.appcircle.io/wp-content/uploads/2022/10/AnyConv.com__1XcY5daGWwgyKyzMgQvZr1A-min-min-1030x425.webp 1030w, https://ac.appcircle.io/wp-content/uploads/2022/10/AnyConv.com__1XcY5daGWwgyKyzMgQvZr1A-min-min-768x317.webp 768w, https://ac.appcircle.io/wp-content/uploads/2022/10/AnyConv.com__1XcY5daGWwgyKyzMgQvZr1A-min-min-705x291.webp 705w" sizes="(max-width: 1386px) 100vw, 1386px" />
🔥 The switch button consists of 2 parts. These are Thumb and Track. We can customize each part with some attributes.<img class="aligncenter size-full wp-image-4493" src="https://ac.appcircle.io/wp-content/uploads/2022/10/AnyConv.com__1i0kKEmMSTQkhJ3EhDOhkdA-min-min.webp" alt="" width="1312" height="818" srcset="https://ac.appcircle.io/wp-content/uploads/2022/10/AnyConv.com__1i0kKEmMSTQkhJ3EhDOhkdA-min-min.webp 1312w, https://ac.appcircle.io/wp-content/uploads/2022/10/AnyConv.com__1i0kKEmMSTQkhJ3EhDOhkdA-min-min-300x187.webp 300w, https://ac.appcircle.io/wp-content/uploads/2022/10/AnyConv.com__1i0kKEmMSTQkhJ3EhDOhkdA-min-min-1030x642.webp 1030w, https://ac.appcircle.io/wp-content/uploads/2022/10/AnyConv.com__1i0kKEmMSTQkhJ3EhDOhkdA-min-min-768x479.webp 768w, https://ac.appcircle.io/wp-content/uploads/2022/10/AnyConv.com__1i0kKEmMSTQkhJ3EhDOhkdA-min-min-705x440.webp 705w" sizes="(max-width: 1312px) 100vw, 1312px" />
&nbsp;
Final version of XML will be:
<pre data-label="activity_main.xml"><code class="language-xml">&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
&lt;androidx.constraintlayout.widget.ConstraintLayout xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;
 xmlns:app=&quot;http://schemas.android.com/apk/res-auto&quot;
 xmlns:tools=&quot;http://schemas.android.com/tools&quot;
 android:layout_width=&quot;match_parent&quot;
 android:layout_height=&quot;match_parent&quot;
 tools:context=&quot;.MainActivity&quot;&gt;

 &lt;androidx.appcompat.widget.SwitchCompat
 android:id=&quot;@+id/switchButton&quot;
 android:layout_width=&quot;wrap_content&quot;
 android:layout_height=&quot;wrap_content&quot;
 android:thumb=&quot;@drawable/thumb_layerlist&quot;
 app:layout_constraintBottom_toBottomOf=&quot;parent&quot;
 app:layout_constraintEnd_toEndOf=&quot;parent&quot;
 app:layout_constraintHorizontal_bias=&quot;0.5&quot;
 app:layout_constraintStart_toStartOf=&quot;parent&quot;
 app:layout_constraintTop_toTopOf=&quot;parent&quot;
 app:showText=&quot;false&quot;
 app:track=&quot;@drawable/track_backgrounds&quot; /&gt;

&lt;/androidx.constraintlayout.widget.ConstraintLayout&gt;</code></pre>
We can create drawable files and add them for shaping track and thumb with app:track and android:thumb attributes.
<h3>Customize Track</h3>
We need to create new Drawable Resource File for track backgrounds in each state.<img class="aligncenter size-full wp-image-4492" src="https://ac.appcircle.io/wp-content/uploads/2022/10/AnyConv.com__1CUFIwomJ-le8UCNb7HjmNQ-min-min.webp" alt="" width="1400" height="388" srcset="https://ac.appcircle.io/wp-content/uploads/2022/10/AnyConv.com__1CUFIwomJ-le8UCNb7HjmNQ-min-min.webp 1400w, https://ac.appcircle.io/wp-content/uploads/2022/10/AnyConv.com__1CUFIwomJ-le8UCNb7HjmNQ-min-min-300x83.webp 300w, https://ac.appcircle.io/wp-content/uploads/2022/10/AnyConv.com__1CUFIwomJ-le8UCNb7HjmNQ-min-min-1030x285.webp 1030w, https://ac.appcircle.io/wp-content/uploads/2022/10/AnyConv.com__1CUFIwomJ-le8UCNb7HjmNQ-min-min-768x213.webp 768w, https://ac.appcircle.io/wp-content/uploads/2022/10/AnyConv.com__1CUFIwomJ-le8UCNb7HjmNQ-min-min-705x195.webp 705w" sizes="(max-width: 1400px) 100vw, 1400px" />
<pre data-label="track_backgrounds.xml"><code class="language-xml">&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
&lt;selector xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;&gt;

 &lt;item android:state_checked=&quot;true&quot;&gt;
 &lt;shape android:shape=&quot;rectangle&quot;&gt;
 &lt;solid android:color=&quot;@color/blue_soft&quot; /&gt;
 &lt;corners android:radius=&quot;100dp&quot; /&gt;
 &lt;stroke android:width=&quot;2dp&quot; android:color=&quot;@color/blue_moon&quot; /&gt;
 &lt;size android:height=&quot;20dp&quot; /&gt;
 &lt;/shape&gt;
 &lt;/item&gt;

 &lt;item android:state_checked=&quot;false&quot;&gt;
 &lt;shape android:shape=&quot;rectangle&quot;&gt;
 &lt;solid android:color=&quot;@color/yellow_soft&quot; /&gt;
 &lt;corners android:radius=&quot;100dp&quot; /&gt;
 &lt;stroke android:width=&quot;2dp&quot; android:color=&quot;@color/gray&quot; /&gt;
 &lt;size android:height=&quot;20dp&quot; /&gt;
 &lt;/shape&gt;
 &lt;/item&gt;
&lt;/selector&gt;</code></pre>
Two different item created with same shape but different states and colors. All the dimension, color information to be added for this background can be defined here. After that we can use app:track and pass track_backgrounds.xml file.
<h3>Customize Thumb</h3>
If you want to add cute icons to thumb as mine 🤭, firstly we can create these icons with Vector Asset. You can select any icon and customize its color and size.<img class="aligncenter size-full wp-image-4494" src="https://ac.appcircle.io/wp-content/uploads/2022/10/AnyConv.com__17EWtjX8YNRjSxOidYdbBeQ-min-min.webp" alt="" width="1400" height="520" srcset="https://ac.appcircle.io/wp-content/uploads/2022/10/AnyConv.com__17EWtjX8YNRjSxOidYdbBeQ-min-min.webp 1400w, https://ac.appcircle.io/wp-content/uploads/2022/10/AnyConv.com__17EWtjX8YNRjSxOidYdbBeQ-min-min-300x111.webp 300w, https://ac.appcircle.io/wp-content/uploads/2022/10/AnyConv.com__17EWtjX8YNRjSxOidYdbBeQ-min-min-1030x383.webp 1030w, https://ac.appcircle.io/wp-content/uploads/2022/10/AnyConv.com__17EWtjX8YNRjSxOidYdbBeQ-min-min-768x285.webp 768w, https://ac.appcircle.io/wp-content/uploads/2022/10/AnyConv.com__17EWtjX8YNRjSxOidYdbBeQ-min-min-705x262.webp 705w" sizes="(max-width: 1400px) 100vw, 1400px" />
Our moon icon XML will be:
<pre data-label="ic_moon.xml"><code class="language-xml">&lt;vector xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;
 android:width=&quot;56dp&quot;
 android:height=&quot;56dp&quot;
 android:tint=&quot;@color/blue_moon&quot;
 android:viewportWidth=&quot;24&quot;
 android:viewportHeight=&quot;24&quot;&gt;

 &lt;path
 android:fillColor=&quot;@android:color/white&quot;
 android:pathData=&quot;M12.34,2.02C6.59,1.82 2,6.42 2,12c0,5.52 4.48,10 10,10c3.71,0 6.93,-2.02 8.66,-5.02C13.15,16.73 8.57,8.55 12.34,2.02z&quot; /&gt;
&lt;/vector&gt;</code></pre>
And our Sun Icon:
<pre data-label=""><code class="language-xml">&lt;vector xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;
 android:width=&quot;56dp&quot;
 android:height=&quot;56dp&quot;
 android:tint=&quot;@color/orange_sun&quot;
 android:viewportWidth=&quot;24&quot;
 android:viewportHeight=&quot;24&quot;&gt;
 &lt;path
 android:fillColor=&quot;@android:color/white&quot;
 android:pathData=&quot;M6.76,4.84l-1.8,-1.79 -1.41,1.41 1.79,1.79 1.42,-1.41zM4,10.5L1,10.5v2h3v-2zM13,0.55h-2L11,3.5h2L13,0.55zM20.45,4.46l-1.41,-1.41 -1.79,1.79 1.41,1.41 1.79,-1.79zM17.24,18.16l1.79,1.8 1.41,-1.41 -1.8,-1.79 -1.4,1.4zM20,10.5v2h3v-2h-3zM12,5.5c-3.31,0 -6,2.69 -6,6s2.69,6 6,6 6,-2.69 6,-6 -2.69,-6 -6,-6zM11,22.45h2L13,19.5h-2v2.95zM3.55,18.54l1.41,1.41 1.79,-1.8 -1.41,-1.41 -1.79,1.8z&quot; /&gt;
&lt;/vector&gt;</code></pre>
Now, we should define which icon will be shown in selected state and unselected state. Let’s create another drawable resource called thum_icons.xml like below.
<pre data-label="thum_icons.xml"><code class="language-xml">&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
&lt;selector xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;&gt;
 &lt;item android:drawable=&quot;@drawable/ic_moon&quot; android:state_checked=&quot;true&quot; /&gt;
 &lt;item android:drawable=&quot;@drawable/ic_sunny&quot; android:state_checked=&quot;false&quot; /&gt;
&lt;/selector&gt;</code></pre>
But as you can see, there is also background layer in thumb under the icon. And this background layer can also change for each state. For example if check state is true, thumb’s stroke color is dark blue. But when check state is false, stroke color is gray. Background colors can also changeable but I chose to use white for both selection.
<pre data-label="thumb_background.xml"><code class="language-xml">&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
&lt;selector xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;&gt;

 &lt;item android:state_checked=&quot;true&quot;&gt;
 &lt;shape android:shape=&quot;oval&quot;&gt;
 &lt;solid android:color=&quot;@color/white&quot; /&gt;
 &lt;stroke android:width=&quot;2dp&quot; android:color=&quot;@color/blue_moon&quot; /&gt;
 &lt;size android:width=&quot;100dp&quot; android:height=&quot;100dp&quot; /&gt;
 &lt;/shape&gt;
 &lt;/item&gt;

 &lt;item android:state_checked=&quot;false&quot;&gt;
 &lt;shape android:shape=&quot;oval&quot;&gt;
 &lt;solid android:color=&quot;@color/white&quot; /&gt;
 &lt;stroke android:width=&quot;2dp&quot; android:color=&quot;@color/gray&quot; /&gt;
 &lt;size android:width=&quot;100dp&quot; android:height=&quot;100dp&quot; /&gt;
 &lt;/shape&gt;
 &lt;/item&gt;

&lt;/selector&gt;</code></pre>
Drawable files have created for both layers. So how do we combine these files? 🤔 Of course with layer-list!
<pre data-label="thumb_layerlist.xml"><code class="language-xml">&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
&lt;layer-list xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;&gt;

 &lt;item android:gravity=&quot;fill&quot;
 android:drawable=&quot;@drawable/thumb_backgrouds&quot;/&gt;

 &lt;item android:gravity=&quot;center&quot;
 android:drawable=&quot;@drawable/thumb_icons&quot;
 android:top=&quot;20dp&quot;
 android:bottom=&quot;20dp&quot;
 android:left=&quot;20dp&quot;
 android:right=&quot;20dp&quot;/&gt;
&lt;/layer-list&gt;</code></pre>
Finally, drawable file can pass with android:thumb attribute.
<div id="attachment_3795" style="width: 226px" class="wp-caption aligncenter"><img aria-describedby="caption-attachment-3795" class="size-full wp-image-3795" src="https://ac.appcircle.io/wp-content/uploads/2022/10/1_vI9HM1Sh6aDOGEE20VeCA.gif" alt="Switch Button in Android, Final Result, Animated" width="216" height="480" />Switch Button in Android, Final Result</div>
🫶🏼 I used Shared Preferences to save the final state of the button in the MainActivity.kt file. So when the user reopen it, the app will be shown in the last selected theme.
<pre data-label="MainActivity.kt"><code class="language-kotlin">package com.yagmurerdogan.customswitch

import android.content.SharedPreferences
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.appcompat.app.AppCompatDelegate
import com.yagmurerdogan.customswitch.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

 private lateinit var binding: ActivityMainBinding

 override fun onCreate(savedInstanceState: Bundle?) {
 super.onCreate(savedInstanceState)
 binding = ActivityMainBinding.inflate(layoutInflater)
 setContentView(binding.root)

 val sharedPreferences = getSharedPreferences(PREF_KEY, MODE_PRIVATE)
 val editor = sharedPreferences.edit()

 updateUI(sharedPreferences)

 binding.switchButton.setOnCheckedChangeListener { _, isChecked -&gt;
 if (isChecked) {
 editor.putBoolean(SWITCH_BUTTON_KEY, true).apply()
 updateUI(sharedPreferences)
 } else {
 editor.putBoolean(SWITCH_BUTTON_KEY, false).apply()
 updateUI(sharedPreferences)
 }
 }
 }

 private fun updateUI(sharedPreferences: SharedPreferences) {
 binding.switchButton.apply {
 isChecked = sharedPreferences.getBoolean(SWITCH_BUTTON_KEY, false)
 if (isChecked) {
 AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)

 } else {
 AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO)
 }
 }
 }

 companion object {
 const val SWITCH_BUTTON_KEY = &quot;switch&quot;
 const val PREF_KEY = &quot;pref&quot;
 }

}</code></pre>
And that&#8217;s it! Customizing Switch Button in Android may seem tricky, but it&#8217;s fairly easy once you know the tricks.
<h2>🦄 Sources</h2>
🪁 🛼 You can access source code from <a href="https://github.com/yagmurerdogan/customize-switch-button" target="_blank" rel="noopener">Github </a> 🎈

Customizing the Switch Button in Android

Related Posts

Speed Up your Release Process with Appcircle’s Azure Bot for SwiftLint and Detekt

Using Azure Boards for Mobile App Development

Streamline Project Integration and Test Automation with Repeato and Appcircle

Multi-Layered Team Management in Mobile DevOps

Customizing the Switch Button in Android

Related Posts

Speed Up your Release Process with Appcircle’s Azure Bot for SwiftLint and Detekt

Using Azure Boards for Mobile App Development

Streamline Project Integration and Test Automation with Repeato and Appcircle

Multi-Layered Team Management in Mobile DevOps

Subscribe to Appcircle Circle