Use Android 4.0 styled toggle-button

问题:

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

---

回答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

回答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

回答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.

回答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!