Toggle button using two image on different state

Question

I need to make a toggle button using two image instead of ON/OFF state.

At off state i set a background image.But the OFF text can not removed while i use background image.

And i can not set another image on ON state by clicking the toggle button :( I am new in android. I hope you guys help me get out of this problem

Answer 1

Do this:

<ToggleButton          android:id="@+id/toggle"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:background="@drawable/check"   <!--check.xml-->         android:layout_margin="10dp"         android:textOn=""         android:textOff=""         android:focusable="false"         android:focusableInTouchMode="false"         android:layout_centerVertical="true"/> 

create check.xml in drawable folder

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android">     <!-- When selected, use grey -->     <item android:drawable="@drawable/selected_image"           android:state_checked="true" />     <!-- When not selected, use white-->     <item android:drawable="@drawable/unselected_image"         android:state_checked="false"/>   </selector> 

Answer 2

AkashG's solution don't work for me. When I set up check.xml to background it's just stratched in vertical direction. To solve this problem you should set up check.xml to "android:button" property:

<ToggleButton      android:id="@+id/toggle"     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:button="@drawable/check"   //check.xml     android:background="@null"/> 

check.xml:

<?xml version="1.0" encoding="utf-8"?>     <selector xmlns:android="http://schemas.android.com/apk/res/android">     <!-- When selected, use grey -->     <item android:drawable="@drawable/selected_image"           android:state_checked="true" />     <!-- When not selected, use white-->     <item android:drawable="@drawable/unselected_image"           android:state_checked="false"/>     </selector>