Android toggle button custom look

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

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

I think you need to define a custom background for your button.Take a look at the Developer Guide on customizing a Button's background.

However, in step Three, Create a new XML file in the res/drawable/ directory Use this Xml:

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

The element android:state_checked="true" is what defines that state as the checked background.

Let me know if this works for you.