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?
I am also looking for something like a ToggleButtonBar
for quite some time.
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'