Use Android 4.0 styled toggle-button

Question

What I'm trying to do

---

I'm trying to use in my Layout the Android 4.0 styled togglebutton. For this I selected the Theme = Theme.Holo.Light . When I take the togglebutton from there its that square with the green line, if the button is enabled.

But I'd like to use the togglebutton like they got in there config on top (take a look at the printscreen).

Question

---

How can I use thise togglebutton? Some Codesnippets or a quick tutorial would be great!

Best Regards

safari

Picture

---

Freethinker

you can create custom layout for toggle button. – Furnace

so this is a cutomlayout or what? – Freethinker

Answer 1

New Edit: I now did a full backport of the Switch back to API Level 8 and put in on github: https://github.com/ankri/SwitchCompatLibrary

---

The old post with my custom implementation of the Switch:

I'm a bit late to the party but I had the same problem. I took the source code from the other post in this thred and made my own version of the switch.

You can find the source code and documentation on my website

This is what it looks like:

edit: Updated link and picture

Kamerad

hey anri, super arbeit hast da geleistet! Echt respekt! Gruss aus der Schweiz! – Freethinker

his is very usefull, but I have one question: how I can make the switch disabled. setEnabled(false) doesn’t work. Thanks – Accelerant

Cant get it to work with parent=android:Theme.Wallpaper – Negotiant

Answer 2

UPDATE: New images work on both light and dark backgrounds. Original images still available.

Also, as someone points out in the comments, make sure to save them as "*.9.png", i.e. "switch_on_on_db.9.png", etc.

---

Ankri's answer is great, but alittle heavy. Also, he uses the 4.2 style switches as opposed to the older (and in my opinion, prettier) 4.1 style buttons. For a quick fix, I made a drawable so that you can style your togglebutton to look like a switch.

First, here is the button style:

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/switch_on_on_db" android:state_checked="true" android:state_pressed="true"/>
<item android:drawable="@drawable/switch_on_on_db" android:state_checked="true" android:state_focused="false"/>
<item android:drawable="@drawable/switch_off_off_db" android:state_checked="false" android:state_pressed="true"/>
<item android:drawable="@drawable/switch_off_off_db" android:state_checked="false" android:state_focused="false"/>
</selector>

which refer to these images:

Download the original images from here:

Old Off

Old On

Finally, you can style the togglebutton like so:

<ToggleButton 
    android:id="@+id/ParamToggleButton"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/toggletoswitch"
    android:textOff=""
    android:textOn=""/>

UPDATE:

Jelly Bean versions (though not identical) are now available:

Old Off

Old On

Unbeknown

be sure to save the images as 9-patch, i.e. "switch_off.9.png" – Geber

Answer 3

If your app targeting api level 14 or higher. Use Switch widget and make sure your application's theme is "Theme.Holo" or "Theme.Holo.Light"

However, if you want to target api level under 2.3 you have to make custom layout. I think It's quite messy to explain about that, I'll give you an example.

You can find the "Switch" button's real implementaion in here.

Well, You can just get that source and put in your project. You'll have some error but it's not that difficult to resolve it.

Molli

did you managed to make it work ? can you share your solution with us please ? thanks – Accelerant

Actually, the simplest solution is to use a togglebutton stylized to look like a switch. I will post a solution later. EDIT: Solution added. – Unbeknown

Answer 4

Great solution above...thanks! (no name given?) I thought someone might be able to use my xml that worked for me to make the togglebutton look like a switch:

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="right|center_vertical"
            android:orientation="horizontal" >

            <TextView
                android:id="@+id/tv_switchToggle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginRight="10dip"
                android:layout_marginTop="0dip"
                android:text="@string/shake_to_add"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textColor="#ffffff" />

            <ToggleButton
                android:id="@+id/switchToggle"
                android:layout_width="75dp"
                android:layout_height="20dp"
                android:layout_margin="5dip"
                android:background="@drawable/togglebutton"
                android:textOff=""
                android:textOn="" />
       </LinearLayout>

@drawable/togglebutton refers to the selector described above. Thanks again!

Massenet