Android: How to create slide (on/off) button

Question

I'd like to create a slide button (= something as switch ) with two states: on and off so user will have to press the button and slide it to change the state (something similar as unlock slider but not cross whole screen). Do you have any idea how to do it? I really tried to find the answer but I haven't been successful.

Thanks a lot!

Sounds like the [`Switch` control](http://developer.android.com/reference/android/widget/Switch.html). That's new in Ice Cream Sandwich *(Android 4.0)*, so you are not able to use it in older versions. But since the source was released yesterday or so afaik you can have a look into it and see how it's done. Apart from that have a look at [custom components](http://developer.android.com/guide/topics/ui/custom-components.html). — , Nov 16 '11 at 11:05
4sat- but Toggle button doesn't support move I think. Or am I wrong? — obrien, Nov 16 '11 at 13:49
I have put a version of the Switch widget that works on Android 2.2 here: https://github.com/BoD/android-switch-backport — BoD, Jun 12 '12 at 01:02

score 11 · Answer 1 · answered Nov 16 '11 at 11:55

//in your layout design the below line

<RelativeLayout android:layout_width="wrap_content" android:id="@+id/rl_onoff"
    android:layout_height="wrap_content">
<ImageView android:id="@+id/on_btn" android:layout_width="80dp"  android:layout_height="40dp" android:src="@drawable/on_btn" android:visibility="visible"></ImageView>
<ImageView android:id="@+id/off_btn" android:layout_width="80dp"  android:layout_height="40dp" android:src="@drawable/off_btn" android:visibility="invisible"></ImageView>
   </RelativeLayout>

// in your activity call this

ImageView mNotification_on_btn=(ImageView)findViewById(R.id.on_btn);
ImageView mNotification_off_btn=(ImageView)findViewById(R.id.off_btn);

    mNotification_on_btn.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                mNotification_on_btn.setVisibility(View.GONE);
                mNotification_off_btn.setVisibility(View.VISIBLE);
            }
        });
    mNotification_off_btn.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                mNotification_off_btn.setVisibility(View.GONE);
                mNotification_on_btn.setVisibility(View.VISIBLE);
            }
        });

// this will switch like iphone style on off toggle button enter image description here

this will not have the "transition", it doesn't slide between two states. Besides, it's a good option! — ArcDare, Nov 16 '11 at 12:14
Thank you very much but as has been noticed I need the transition between two states. I found some video on [youtube](http://www.youtube.com/watch?feature=player_detailpage&v=ImHe4N4mvE4#t=8s3) but I cannot find the code :( — obrien, Nov 16 '11 at 12:31
I guess, its better to use Toggle Button then using two ImageViews and showing / hiding them in code. Anyways both don't have sliding transition. — Umair, Oct 08 '12 at 03:10

score 11 · Accepted Answer · edited Dec 14 '12 at 15:40

11

Well it seems that Switch component is the best solution if your target SDK is higher than 4.0 (Ice Cream Sandwich). So for the others who will face the same problem look at it. :)

edited Dec 14 '12 at 15:40

Mario Kutlev

4,897
7
44
62

answered Dec 14 '11 at 15:35

obrien

496
1
7
15

score 1 · Answer 3 · edited Jul 23 '14 at 07:47

You can achieve this by use check box or ToggleButton. Below is an example

xml file

 <CheckBox
        android:id="@+id/check_on_of"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:button="@drawable/chec_box_on_off"
       />

drawable chec_box_on_off file is

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

you will get like on off button and also you can check whether checkbox is on or off.

the java code is

 CheckBox check = (CheckBox)findViewById(R.id.check_on_of);
 check.isChecked();

Similarly, you can also achieve this using ToggleButton.

Android: How to create slide (on/off) button

3 Answers3

Linked

Related