Android toggle button custom look

I've been trying to customize the toggle button look but with no success. Here is how I want it to look like:

Can someone give me a tutorial?

Solution 1:

create toggle_selector.xml in res/drawable

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:drawable="@drawable/toggle_on" android:state_checked="true"/>
  <item android:drawable="@drawable/toggle_off" android:state_checked="false"/>
</selector>

apply the selector to your toggle button

<ToggleButton
            android:id="@+id/chkState"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/toggle_selector"
            android:textOff=""
            android:textOn=""/>

Note: for removing the text i used following in above code

textOff=""
textOn=""

Solution 2:

I don't know if this is the best solution but it worked fine for me:

1.- Decide how big do you want the toggle button. In my case width 56dp and height 76dp.

2.- Create the icon set 56px-76px for mdpi, 84px-113px hdpi, same for xhdpi and xxhdpi

3.- Move the icons in the corresponding drawable folder. In my case 20 icons 5 in each folder, named ic_name1_on, ic_name1_off [...] ic_name5_off

4.- Create the following xml files in a new folder called drawable (if it does not exist yet):

• ic_name1_toggle.xml
• ic_name1_toggle_bg.xml
• ic_name2_toggle.xml
• (...)
• ic_name5_toggle_bg.xml

5.- In ic_name1_toggle.xml the code must be:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_checked="false"
        android:drawable="@drawable/ic_name1_off" />
    <item
        android:state_checked="true"
        android:drawable="@drawable/ic_name1_on" />
</selector>

6.- In ic_name1_toggle_bg.xml the code must be:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:id="@+android:id/background"
         android:drawable="@android:color/transparent" />
   <item android:id="@+android:id/toggle"
         android:drawable="@drawable/ic_name1_toggle" />
</layer-list>

7.- Finally in your layout.xml:

<ToggleButton
                android:id="@+id/toggleButton1"
                android:layout_width="56dp"
                android:layout_height="76dp"
                android:background="@android:color/transparent"
                android:button="@drawable/ic_name1_toggle_bg"
                android:textOff=""
                android:textOn="" />