How to have a Lollipop switch button

Question

I want to have the Lollipop style switch button for my app:

enter image description here

How could I implement this button so it looks like this also on older versions of android?

score 46 · Answer 1 · answered Aug 26 '15 at 11:48

46

To have the Lollipop style switch button on older versions of android you should use SwitchCompat in layout xml file

<android.support.v7.widget.SwitchCompat
        android:id="@+id/compatSwitch"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

and also in java file

SwitchCompat switchCompat = (SwitchCompat) findViewById(R.id.compatSwitch);

answered Aug 26 '15 at 11:48

dzikovskyy

5,027
3
32
43

3

In addition you can remove the ugly grey background that appear when you select the switch by using this piece of code : android:background="@null" – Tobliug Apr 05 '16 at 14:15

ch3tanz · Accepted Answer · 2015-08-04T13:01:30.957

At first set android:targetSdkVersion="22" in your manifest to make your app compatible to Lollipop.

NOTE: Color of your switch depends on this

<item name="android:colorAccent">@color/accent</item>

Create your own theme for your app in styles.xml in Folder values-v21

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="AppTheme" parent="AppTheme.Base">
        <item name="android:colorPrimary">@color/primary</item>
        <item name="android:colorPrimaryDark">@color/primary_dark</item>
        <item name="android:colorAccent">@color/accent</item>
        <item name="android:textColorPrimary">@color/text_primary</item>
        <item name="android:textColor">@color/text_secondary</item>
        <item name="android:navigationBarColor">@color/primary_dark</item>
        <item name="toolbarStyle">@style/Widget.AppCompat.Toolbar</item>
    </style>
</resources>

styles.xml in default Folder values or values-v14

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="AppTheme.Base">
        <!-- Customize your theme here. -->

        <item name="toolbarStyle">@style/Widget.AppCompat.Toolbar</item>
    </style>

    <style name="AppTheme.Base" parent="Theme.AppCompat">
        <!-- Customize your theme here. -->

        <!-- colorPrimary is used for the default action bar background -->
        <item name="colorPrimary">@color/primary</item>

        <!-- colorPrimaryDark is used for the status bar -->
        <item name="colorPrimaryDark">@color/primary_dark</item>

        <!-- colorAccent is used as the default value for colorControlActivated
             which is used to tint widgets -->
        <item name="colorAccent">@color/accent</item>

        <!-- You can also set colorControlNormal, colorControlActivated
             colorControlHighlight & colorSwitchThumbNormal. -->
    </style>

</resources>

Don't set `maxSdkVersion`. That will limit your installs up to lolipop. What you need is `targetSdkVersion` — Mircea Nistor, Aug 04 '15 at 12:55

score 10 · Answer 3 · edited Sep 09 '15 at 18:49

10

There is a great article on the Android Developers Blog that discusses how to use material design on pre-Lollipop devices: http://android-developers.blogspot.com/2014/10/appcompat-v21-material-design-for-pre.html

To more specifically answer your question, you can use the Lollipop style switch for older versions by using the SwitchCompat API: https://developer.android.com/reference/android/support/v7/widget/SwitchCompat.html

edited Sep 09 '15 at 18:49

Carl Manaster

39,912
17
102
155

answered Apr 20 '15 at 15:42

Willis

5,308
3
32
61

2

Great answer! For styling the SwitchCompat look here: http://stackoverflow.com/a/26715076/457059 – stoefln Apr 21 '15 at 15:13

score 5 · Answer 4 · edited Sep 09 '18 at 16:41

5

API 24 on off switch

<android.support.v7.widget.SwitchCompat
    android:id="@+id/switch1"
    android:layout_alignBottom="@+id/textView3"
    android:layout_alignEnd="@+id/input_layout_password"
    android:layout_alignRight="@+id/input_layout_password"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

edited Sep 09 '18 at 16:41

Amir133

2,372
2
18
34

answered Jul 18 '16 at 04:47

Thamays

2,978
26
31

Moubeen Farooq Khan · Answer 5 · 2015-04-20T15:48:26.057

0

I think what you need is in that library

what this library does is to allow you to create material design switch button like in andorid 5.0

https://github.com/kyleduo/SwitchButton

edited Apr 20 '15 at 15:48

answered Apr 20 '15 at 15:40

Moubeen Farooq Khan

2,875
1
11
26

1

Please add a bit more information's about the libary, rather than just posting a link. – JacksOnF1re Apr 20 '15 at 15:44
Thanks for posting this link. I didn't know about this library. And clicking the link provided more information! Go figure. – Marty Miller Aug 25 '15 at 18:47
@MartyMiller on The right bottom corner there is a download button from there you can download that library – Moubeen Farooq Khan Aug 26 '15 at 07:04

score 0 · Answer 6 · edited Sep 10 '18 at 00:12

0

We are using SwitchCompact in lollipop version or either you can use Updated lolliopop version its better

<android.support.v7.widget.SwitchCompat
    android:id="@+id/compatSwitch"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/switch2"
    android:layout_alignLeft="@+id/switch2"
    android:layout_alignStart="@+id/switch2"
    android:layout_marginTop="39dp" />

edited Sep 10 '18 at 00:12

Amir133

2,372
2
18
34

answered Jan 06 '17 at 05:29

nagaraja T

29
4

– nagaraja T Jan 06 '17 at 05:30

score 0 · Answer 7 · answered Jan 23 '19 at 05:23

In order to resolve old type switch

switch_old

update your minsdkversion and targetsdkversion to 19 and 28 respectively.
1. update gradle dependency to implementation 'com.android.support:appcompat-v7:28.0.0'
2. set base app theme in style.xml like

`

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorAccent">@color/colorAccent</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    </style>`

and it resolve switch with latest material design.

How to have a Lollipop switch button

7 Answers7

Linked