Slide Toggle for Android

Question

Anyone know of any open source implementation of a slide toggle for android. The default android toggle(ToggleButton) is not pretty. I am looking for anything similar to iOS. I should be able to implement one from scratch. But if anything similar is already available, then i can build on it.

Thanks in advance to the wonderful stackoverflow community.

Edit1: What I meant by iOS Slide Toggle is UISwitch

ios Toggle Button

Edit2: Just want to summarize the answer. Commonsware provided the clue. I ended up back porting the Switch code from 4.0 to2.2.2. Thanks to the open-sourced code, back porting was not very difficult. The code is hosted on git hub. http://github.com/pellucide/Android-Switch-Demo-pre-4.0/tree/master/

A screenshot from that project
Screen shot

I ended up back-porting the 4.0 code to 2.2.2. I also added some new attributes to the widget to adapt to the project that I was working on. Though the look is not exactly same as iOS or Android, it can be easily changed with a drawable. The project is hosted on github https://github.com/pellucide/Android-Switch-Demo-pre-4.0/tree/master/android-switch-demo — pellucide, May 30 '12 at 09:40
I am sorry I did not see this before, as I just did the same: I backported the Switch class to work with 2.2. The result is here: https://github.com/BoD/android-switch-backport - I hope it can be useful, it is slightly different from your own port as it includes the ICS 'standard' drawables. — BoD, Jun 12 '12 at 01:16
Wow! Great job. I also wish I saw this before I skinned the togglebutton. http://stackoverflow.com/questions/9920709/use-android-4-0-styled-toggle-button/15640365#15640365 — dberm22, Mar 26 '13 at 17:08
sir, I am having issues with this project,meaning if i use the same resources and everything, the switch appears grey in xhdpi devices. What could i be missing? However if i run ur project in the same device things work well. I am using action sherlock bar too and several values folders . Please help thanks @pellucide — Rat-a-tat-a-tat Ratatouille, Jan 03 '14 at 05:54
@Ratatouille Please report the issue on github page. I will be glad to take a look at it. — pellucide, Feb 28 '14 at 20:54
this might help http://stackoverflow.com/questions/10118050/how-can-i-style-an-android-switch — Paul Alexander, Jun 06 '14 at 15:46
When application is in background and it's going to be resumed it crashed here (android switch demo) private Layout makeLayout(CharSequence text) { return new StaticLayout(text, mTextPaint, (int) android.util.FloatMath.ceil(Layout.getDesiredWidth(text, mTextPaint)), Layout.Alignment.ALIGN_NORMAL, 1.f, 0, true); } I guest it's because variables are static. What is the solution — fish40, Jun 26 '14 at 12:19

score 15 · Answer 1 · answered Mar 28 '12 at 19:57

you can use the sliding drawer widget in android to have a sliding toggle switch. you just have to "slice" the ios toggle images into3 parts, one for the handle, one for the sliding drawer background and one for the content part. then put an image on top of it like a frame to give you the "round edges"

here's what i've come up with: XML Layout

<?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:orientation="vertical" >
    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="100dp" >
        <SlidingDrawer
            android:id="@+id/slidingDrawer1"
            android:layout_width="154dp"
            android:layout_height="54dp"
            android:background="@drawable/ios_retina_toggle_on_full"
            android:content="@+id/content"
            android:handle="@+id/handle"
            android:orientation="horizontal" >
            <ImageButton
                android:id="@+id/handle"
                android:layout_width="54dp"
                android:layout_height="54dp"
                android:background="#00000000"
                android:src="@drawable/ios_retina_toggle_button" />
            <ImageView
                android:id="@+id/content"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ios_retina_toggle_off" />
        </SlidingDrawer>
        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ios_retina_toggle_frame" />
    </FrameLayout>
</LinearLayout>

ios_retina_toggle_on_full

ios_retina_toggle_button

ios_retina_toggle_off

ios_retina_toggle_frame

and finally a screenshot of how it looked on the emulator on a 3.7 WVGA screen running gingerbread: enter image description here

This is a clever way to do it. I will try that today. However I already took the code from android 4.0 "Switch" and adapted it to work on Android 2.2.x. I managed to add a few extra features like textOnButton, and textOutside. textOnButton- puts the text on the button(the circle) in addition to on the track. textOutside - puts the text outside the track. — pellucide, Apr 03 '12 at 17:15
Can you provide an example or source of that? It would be very useful as i'm trying to do the same.. — neteinstein, May 02 '12 at 17:01
@NeTeInStEiN you only need the xml layout for this to work plus the sliced images i already provided. then it's just a sliding drawer class, you can use it's isOpened() method as the "On" state if the value is true. — vinceville, May 14 '12 at 08:45
@user892771 you went all out, that's really cool, i've put your project as well as BoD's on my watch list. thanks guys! — vinceville, Sep 11 '12 at 10:13
couldn't you simply use **2** transparent PNGs, instead of using **4** images?! — Phantômaxx, Mar 26 '14 at 09:24
i guess so, but at the time i was answering this question i didn't have enough time to edit the iOS toggle button with transparency. ;) — vinceville, Apr 08 '14 at 13:23
Thanks, this works great. On some screens I get a 1-pixel vertical line to the right of the handle which appears in the "off" state. It's as if that graphic had a vertical line of transparent pixels on the right side but I don't see it in the graphic. Any ideas? Thanks again! — Bill, Jan 10 '15 at 01:23
@Bill it might need some adjustment on the PNGs, it would really help if you use transparent PNGs as Der Golem suggested. — vinceville, Jan 14 '15 at 08:49

score 13 · Accepted Answer · answered Mar 17 '12 at 18:56

13

iOS does not seem to have a "slide toggle", at least under that name, based on a Google search. And, you did not provide an image (or a link to an image) of what you want.

Android 4.0 added a Switch that you might be able to backport to earlier versions. You will see samples of it in the API Demos app on your emulator:

enter image description here

answered Mar 17 '12 at 18:56

CommonsWare

986,068
189
2,389
2,491

This is close. I will have to back port the Switch code. Thanks ! – pellucide Mar 19 '12 at 20:32
1

how did you back-ported it? – Mihai Bratulescu Aug 20 '13 at 13:15

score 1 · Answer 3 · answered May 28 '14 at 07:33

1

We can try using seekbar with custom drawables and thumb, setting the max value to 1 and min to 0. we can add animations for sliding effect

answered May 28 '14 at 07:33

Madhur Vyas

26
2

score 1 · Answer 4 · answered Mar 17 '12 at 18:53

1

You can try using ToggleButton specifying your own drawables for its states.

answered Mar 17 '12 at 18:53

Alexander Kulyakhtin

47,782
38
107
158

2

That could work. But I was looking for that sliding motion from one state to the other. It gives the feeling of physically sliding a switch. – pellucide Mar 22 '12 at 17:21
1

ToggleButtons don't have the **sliding **effect** – Phantômaxx Mar 26 '14 at 09:25

Slide Toggle for Android

4 Answers4

Linked