Android toggle button custom look

Question

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?

Answer 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="" 

Answer 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="" />