Android Toggle Button - Material Design

Question

How do I implement the Toggle Buttons as specified in Material Design guidelines here?

Is it available out of the box from Android Design Support Library or is there any third party library available?

Thorley

Answer 1

UPDATE: There is official support now! See the other answers below for links/usage.

Original post:

Current Library Support: No.

As of the Support Library v23.2 the current ToggleButton implementation does not behave nor is it styled as outlined in the referenced Material Design Guidelines.

Material guidelines:

Current support library styling:

Note that the buttons don't meet up together in groups surrounded by rounded borders, text is used instead of icons, and the accent color is used as an underline instead of a darkened background to indicate an 'on' status.

Is there an external library: Not yet.

I'm not aware of any defacto standard library to implement a Material ToggleButton, but there are probably a few small, barely tested ones out there, I hope? Unfortunately, Stackoverflow discourages Answers that are just links to external third-party libraries. So you'll need to search on your own, or create a custom view yourself to implement the current Material design guidelines.

Overhand

Again, not encouraging linking to various third-party libraries, but the closest third-party library I've found so far is github.com/jlhonora/multistatetogglebutton – Overhand

Answer 2

I am also looking for something like a ToggleButtonBar for quite some time.

Material guidelines:

I was able to achieve it abusing RadioButtons:

To achieve this single selection ButtonBar, I created a ToggleButton style for the radio buttons and created a RadioGroup.

Add this to your res/values/styles.xml:

<style name="ToggleButton" parent="@android:style/Widget.CompoundButton.RadioButton">
    <item name="android:foreground">?android:attr/selectableItemBackground</item>
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">32dp</item>
    <item name="android:background">@drawable/toggle_background</item>
    <item name="android:button">@null</item>
    <item name="android:paddingLeft">8dp</item>
    <item name="android:textAllCaps">true</item>
    <item name="android:paddingRight">8dp</item>
</style>

For the background ColorStateList create a res/drawable/toogle_background.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:state_window_focused="false">
        <color android:color="@color/toggle_hover" />
    </item>
    <item android:state_checked="false" android:state_window_focused="false">
        <color android:color="@color/toggle_normal" />
    </item>
    <item android:state_checked="true" android:state_pressed="true">
        <color android:color="@color/toggle_active" />
    </item>
    <item android:state_checked="false" android:state_pressed="true">
        <color android:color="@color/toggle_active" />
    </item>
    <item android:state_checked="true" android:state_focused="true">
        <color android:color="@color/toggle_hover" />
    </item>
    <item android:state_checked="false" android:state_focused="true">
        <color android:color="@color/toggle_normal_off" />
    </item>
    <item android:state_checked="false">
        <color android:color="@color/toggle_normal" />
    </item>
    <item android:state_checked="true">
        <color android:color="@color/toggle_hover" />
    </item>
</selector>

The append your res/values/colors.xml by:

<color name="toggle_hover">@color/gray</color>
<color name="toggle_normal">@color/gainsboro</color>
<color name="toggle_active">@color/silver</color>
<color name="toggle_normal_off">@color/darkgray</color>

<color name="gainsboro">#DCdCdC</color>
<color name="silver">#C0C0C0</color>
<color name="darkgray">#a9a9a9</color>
<color name="gray">#808080</color>

In your layout file use this code snippet, to create a material toggle button group. In my case it's the activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <android.support.v7.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:cardCornerRadius="2dp"
        app:cardElevation="2dp">

        <RadioGroup
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <RadioButton
                style="@style/ToggleButton"
                android:text="First" />

            <RadioButton
                style="@style/ToggleButton"
                android:text="Second" />

            <RadioButton
                style="@style/ToggleButton"
                android:text="Third" />

        </RadioGroup>

    </android.support.v7.widget.CardView>
</LinearLayout>

I used a CardView as a wrapper for the group to achieve the rounded corners. Unfortunately on Android versions lower than Lollipop the rounded corners will result in a Padding of the CardView. You can for sure apply your own styling here with other colors or icons instead of text or both. Just create your own StateLists for those cases.

Toggle button requirements:

• Have at least three toggle buttons in a group
• Label buttons with text, an icon, or both

The following combinations are recommended:

• Multiple and unselected
• Exclusive and unselected
• Exclusive only

NOTE: for using CardView, you need to add it's dependency to your apps build.gradle file:

compile 'com.android.support:cardview-v7:25.0.1'

Instancy

The following line in your styles.xml will not build: <item name="android:foreground">?attr/selectableItemBackground</item> Android Studio displays ?attr/selectableItemBackground in red. Says "Cannot resolve symbol" Know what's going on here? – Quinquepartite

Yea, some stuff changed, now need to use android namespace infront of attr/ => "?android:attr/selectableItemBackground" Updated the answer accordingly... – Instancy

Awesome! But I would use <item name="android:gravity">center</item> instead of paddings in theme – Garay

Answer 3

Google finally caught up with us and there's now an official toggle group in the Material library:

https://material.io/components/buttons#toggle-button

Older Post:

I've created a ToggleButton library that adheres to the Material Design guidelines:

https://github.com/rcketscientist/ToggleButtons

compile 'com.anthonymandra:ToggleButtons:2.0.0'

Lapidify

It just won't look right below 21. There's compat stuff that needs to be done. Check out CardView. ATM I'm using it in a 21+ app so I haven't ported the compat code, but it's not terribly hard although it is ugly spaghetti code. – Lapidify

I've ported it down to API 9 in version 2.0. – Lapidify

material.io/develop/android/components/… Page doesn't exist anymore... :( – Nabila

Answer 4

I hope this can help you!

http://takeoffandroid.com/android-views/material-toggle-switch-using-appcompat-v7/

import:

import android.support.v7.widget.SwitchCompat;
import android.widget.CompoundButton;

swt = (SwitchCompat)findViewById(R.id.Switch);
swt.setOnCheckedChangeListener (this);
swt.setChecked (true);

Listener:

@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
    switch (buttonView.getId()) {

        case R.id.Switch:

            if(!isChecked){

                Toast.makeText (SwitchActivity.this,"Err Switch is off!!",Toast.LENGTH_SHORT).show ();
            }else{
                Toast.makeText (SwitchActivity.this,"Yes Switch is on!!",Toast.LENGTH_SHORT).show ();

            }
            break;

        default:
            break;
    }
}

xml:

<android.support.v7.widget.SwitchCompat
    android:id="@+id/Switch"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textOff=""
    android:text="Toggle Switch"
    android:background="@android:color/transparent"
    android:textColor="@color/secondary_text"
    android:textOn=""
    android:button="@null"
    android:padding="20dp"/>

Hypothermia

Answer 5

With the Material Components Library you can use the MaterialButtonToggleGroup.

Something like:

 <com.google.android.material.button.MaterialButtonToggleGroup
        android:id="@+id/toggleButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="A"
            style="?attr/materialButtonOutlinedStyle"
            />
        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="B"
            style="?attr/materialButtonOutlinedStyle"
            />
        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="C"
            style="?attr/materialButtonOutlinedStyle"
            />
    </com.google.android.material.button.MaterialButtonToggleGroup>

Ashjian

is there any way to adjust the spacing between buttons? – Possibly

Answer 6

You can use SwitchCompat if your activity has backwards compatibility.See below example.

<android.support.v7.widget.SwitchCompat
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"/>

Happy coding :D

Quag