Android – Custom toggle button example
-
Paresh Mayani
- April 26, 2012
- 1 min read
- No Comments
Problem: How to customize toggle button with custom images in android?
Solution:
Step 1: Create 2 images for ON and OFF state of toggle button, place these 2 images inside the Drawable folder. FYI, i have used 9-patch tool to create images for the states.
Step 2: Now, create a selector file for your toggle button, which is used to get state of button and define drawable accordingly.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/bg_fbautoshare_selected" android:state_checked="true" android:state_pressed="true"/>
<item android:drawable="@drawable/bg_fbautoshare_selected" android:state_checked="true" android:state_focused="false"/>
<item android:drawable="@drawable/bg_fbautoshare_normal" android:state_checked="false" android:state_pressed="true"/>
<item android:drawable="@drawable/bg_fbautoshare_normal" android:state_checked="false" android:state_focused="false"/>
</selector>
Step 3: Now, create a XML layout and place ToggleButton on the layout file.
Step 4: Define the android:background attribute of ToggleButton with the selector file created above.
Step 5: Also define the android:textOff and android:textOn attributes of a ToggleButton inside the XML layout file.
Main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:orientation="vertical"
android:padding="10dp" >
<ToggleButton
android:id="@+id/toggleFBAutoShare"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/btntoggle_selector"
android:textColor="@android:color/white"
android:textOff="TechnoTalkative OFF"
android:textOn="TechnoTalkative ON" />
</LinearLayout>
Download example code from here: Android Custom ToggleButton example
