Custom Android switch track 'animation'

Question

I've created a basic custom Switch, as defined below.

<Switch
        android:id="@+id/availSwitch"
        android:layout_width="wrap_content"
        android:switchMinWidth="110dp"
        android:layout_height="wrap_content"
        android:track="@drawable/switch_track"
        android:thumb="@drawable/thumb"/>

The @drawable/thumb is a simple PNG which works fine.

The @drawable/switch_track is defined below. @drawable/trackon and @drawable/trackoff are PNG's.

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="false" android:drawable="@drawable/trackoff" />
    <item android:state_checked="true"  android:drawable="@drawable/trackon" />
    <item                               android:drawable="@drawable/trackoff" />

</selector>

This switch looks and works as intended for the most part, but is there some way to 'animate' the track as the thumb travels over it on user drag? Either fade between checked and unchecked, or preferably change 'behind' the thumb.

The current behaviour is shown below.

http://stackoverflow.com/questions/9752760/slide-toggle-for-android — IntelliJ Amiya, Jan 13 '16 at 11:56
@Lakhan, that's an interesting idea, setting the max value to 1 and setting an onClickListener. https://github.com/pellucide/Android-Switch-Demo-pre-4.0 did the job without too much trouble though, but nice idea. — BlitzKraig, Jan 13 '16 at 14:58

score 5 · Accepted Answer · answered Jan 13 '16 at 11:55

5

There was a time I was also looking for the same when I needed a toggle button functionality similar to native iOS which can be dragged to on/off for one of my projects. At that time I searched hard and I found this library.

https://github.com/pellucide/Android-Switch-Demo-pre-4.0

So hope this is what you are looking for too.

answered Jan 13 '16 at 11:55

Mukesh Rana

4,051
3
27
39

This looks like the kind of thing I'm after, amazed how difficult it's been to search for anything to do with Switches for android... Thanks, I'll check this out! – BlitzKraig Jan 13 '16 at 13:17
Played around with the library and managed to get a decent effect. It's a bit fiddly, especially when working with a newer API version, had to add some hacky code to get it to sit nice. Does the job nicely though, thanks very much for your help. – BlitzKraig Jan 13 '16 at 14:41
Yeah its bit tricky to customize but glad that it worked for you :) – Mukesh Rana Jan 13 '16 at 16:31

score 1 · Answer 2 · edited May 23 '17 at 12:32

A Switch is a two-state toggle switch widget that can select between two options. The user may drag the "thumb" back and forth to choose the selected option, or simply tap to toggle as if it were a checkbox. The text property controls the text displayed in the label for the switch, whereas the off and on text controls the text on the thumb .

For this requirement you need to customize your Switch Button Functionality

You can visit for demo

You need to understand below two lines .

        android:thumb="@drawable/customswitchselector"
        android:track="@drawable/custom_track"

It has two tag: android:thumb and android:track.Thumb will draw the actual look when we swipe or change the status .

score 0 · Answer 3 · answered Jan 13 '16 at 12:07

You need to make Toggle Button custom

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/darkGray"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context="com.gisinc.androidexamples.myapplication.MyActivity">

    <com.gisinc.androidexamples.androidtogglebutton.SettingsToggle
        xmlns:widget="http://schemas.android.com/apk/res-auto"
        android:id="@+id/settings1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        widget:prefName="useMyLocation"
        widget:text="Use My Location" />

</RelativeLayout>

See this

Custom Android switch track 'animation'

3 Answers3

Linked