Android make check in or check out button with style

Question

I need to make a style like following screen shot

PLZ NEED HELP !!!!

I have tried using make custom style

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

But its not as I want

Please help me to make view same as screen shot

Answer 1

You have setted the same drawable when state_checked = true and state_checked = false.

You must have two differents drawables.

Answer 2

You can use a ToggleButton for this. In your xml file, set the text to an empty string, otherwise it will show 'on' and 'off'.

android:textOff=""
android:textOn=""

Then you have to add two drawables: one with the handle on the left side (so that 'check in' is visible, this is the unchecked state, name it for example 'check_in_unchecked'), and one with handle on the right side (so that 'check out' is visible, this is the checked state, name it for example 'check_in_checked'). After that, add a selector as background of your ToggleButton:

android:background="@drawable/selector_check_in"

selector_check_in will look like this:

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