<p>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.</p>
<h3>Add SwitchCompat to XML</h3>
<p>You can see default view below the code of added <strong>SwitchCompat</strong> view in XML file 👇🏼</p>
<pre><code class="language-git">&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>
<p><img class="aligncenter wp-image-4491 size-full" src="https://ac.appcircle.io/wp-content/uploads/2022/10/AnyConv.com__1XcY5daGWwgyKyzMgQvZr1A-min-min.webp" alt="android switch button" 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" /></p>
<p>🔥 The switch button consists of <strong>2</strong> parts. These are <strong>Thumb</strong> and <strong>Track</strong>. We can customize each part with some attributes.<img class="aligncenter wp-image-4493 size-full" src="https://ac.appcircle.io/wp-content/uploads/2022/10/AnyConv.com__1i0kKEmMSTQkhJ3EhDOhkdA-min-min.webp" alt="Thumb and Track example" 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" /></p>
<p>&nbsp;</p>
<p>Final version of XML will be:</p>
<pre><code class="language-git">&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>
<p>We can create drawable files and add them for shaping track and thumb with <strong>app:track</strong> and <strong>android:thumb</strong> attributes.</p>
<div class="dynamic_cta">
                <img src="/images/icon-left.svg" alt="Left Icon" 
                     class="cta_icon cta_icon_left">
                <h2>Experience Automated Mobile DevOps for Android Now!</h2>
                <img src="/images/icon-right.svg" alt="Right Icon" 
                     class="cta_icon cta_icon_right">
                <a href="/contact" 
                   class="dynamic_cta_button">Contact Us</a>
            </div>
<h3>Customize Track</h3>
<p>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" /></p>
<pre><code class="language-git">&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>
<p>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 <strong>app:track</strong> and pass <strong>track_backgrounds.xml </strong>file.</p>
<h3>Customize Thumb</h3>
<p>If you want to add cute icons to thumb as mine 🤭, firstly we can create these icons with <strong>Vector Asset</strong>. You can select any icon and customize its color and size.<img class="aligncenter wp-image-4494 size-full" src="https://ac.appcircle.io/wp-content/uploads/2022/10/AnyConv.com__17EWtjX8YNRjSxOidYdbBeQ-min-min.webp" alt="Customize Thumb vector asset" 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" /></p>
<p>Our moon icon XML will be:</p>
<pre><code class="language-git">&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>
<p>And our Sun Icon:</p>
<pre><code class="language-git">&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>
<p>Now, we should define which icon will be shown in selected state and unselected state. Let’s create another drawable resource called <strong>thum_icons.xml</strong> like below.</p>
<pre><code class="language-git">&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>
<p>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.</p>
<pre><code class="language-git">&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>
<p>Drawable files have created for both layers. So how do we combine these files? 🤔 Of course with <strong>layer-list</strong>!</p>
<pre><code class="language-git">&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>
<p>Finally, drawable file can pass with <strong>android:thumb</strong> attribute.</p>
<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" /><p id="caption-attachment-3795" class="wp-caption-text">Switch Button in Android, Final Result</p></div>
<p>🫶🏼 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.</p>
<pre><code class="language-git">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>
<p>And that&#8217;s it! Customizing Switch Button in Android may seem tricky, but it&#8217;s fairly easy once you know the tricks.</p>
<h2>🦄 Sources</h2>
<p>🪁 🛼 You can access source code from <a href="https://github.com/yagmurerdogan/customize-switch-button" target="_blank" rel="noopener">Github </a> 🎈</p>


Streamline your Android Development Process Now!

Customizing Switch Button in Android can be tricky. Let's see how it's done. First, we'll look at the methods to change the colors

Customizing the Switch Button in Android

Related Posts

How to Build and Deploy Apps to Google Play Console Testing and Apple TestFlight

Automate Your Mobile Code Reviews with Danger CI

Deploy iOS and Android Apps to AWS Device Farm and Run Tests

Re-Signing App Binaries Made Easy with Appcircle