In this tutorial, we’ll be focusing on MaterialButtonToggleGroup, newly introduced with Android Material Components.
Table of Contents
Also known as ToggleButton, this used to host buttons with checkable behavior. It resembles SegmentedControl in iOS. Users can select one or multiple choices from the group.
In order to use Material Components, we need to import the following:
implementation 'com.google.android.material:material:1.0.0'
MaterialComponent
theme in your Activity.Here’s how we define a MaterialButtonToggleGroup in XML:
<com.google.android.material.button.MaterialButtonToggleGroup
android:id="@+id/toggleGroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:checkedButton="@id/btnB"
app:singleSelection="true"
>
<Button
...
/>
<Button
android:id="@+id/btnB"
...
/>
</com.google.android.material.button.MaterialButtonToggleGroup>
app:singleSelection
attribute is much like the RadioGroup.
Material Components lets us style the following things on our UI:
- Colors
- Shapes
- Typography
In the next section, we’ll customize our MaterialButtonToggleGroup with various shapes, color, and fonts!
Let’s get started with a fresh new Android Studio Project.
Project Structure

Android Material Button Toggle Group Project
In the next sections, we’ll deal with different styles of MaterialButtonToggleGroups.
Basic Usage
<com.google.android.material.button.MaterialButtonToggleGroup
android:id="@+id/toggleGroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:checkedButton="@id/btnAndroid"
app:singleSelection="true">
<Button
android:id="@+id/btnAndroid"
style="@style/Widget.MaterialComponents.Button.OutlinedButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Android" />
<Button
android:id="@+id/btniOS"
style="@style/Widget.MaterialComponents.Button.OutlinedButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="iOS" />
</com.google.android.material.button.MaterialButtonToggleGroup>

Android Material Toggle Basic
The recommended style for Button in a MaterialButton is Widget.MaterialComponents.Button.OutlinedButton
.
With Icon and Text
To use icons in Buttons, we’ll use MaterialButton:
<com.google.android.material.button.MaterialButtonToggleGroup
android:id="@+id/toggleGroup2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:checkedButton="@id/btnA"
app:singleSelection="true">
<com.google.android.material.button.MaterialButton
android:id="@+id/btnA"
style="@style/Widget.MaterialComponents.Button.OutlinedButton.Icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Android"
app:icon="@drawable/ic_android" />
<com.google.android.material.button.MaterialButton
android:id="@+id/btnS"
style="@style/Widget.MaterialComponents.Button.OutlinedButton.Icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sunny"
app:icon="@drawable/ic_wb_sunny" />
</com.google.android.material.button.MaterialButtonToggleGroup>

Android Material Toggle Icon Text
With Icon only
If we need to use only icons and no text we need to set our custom style. Otherwise, there would be extra padding for text.
Add the following in styles.xml:
<style name="IconOnlyButton" parent="Widget.MaterialComponents.Button.OutlinedButton">
<item name="iconPadding">0dp</item>
<item name="iconGravity">textStart</item>
</style>
The code for the Material Button Toggle Group icon only is:
<com.google.android.material.button.MaterialButtonToggleGroup
android:id="@+id/toggleGroup3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:singleSelection="false">
<com.google.android.material.button.MaterialButton
style="@style/IconOnlyButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:icon="@drawable/ic_signal_wifi_off"
app:iconTint="@android:color/holo_red_light" />
<com.google.android.material.button.MaterialButton
style="@style/IconOnlyButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:icon="@drawable/ic_signal_wifi_3_bar_lock" />
<com.google.android.material.button.MaterialButton
style="@style/IconOnlyButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:icon="@drawable/ic_wifi" />
</com.google.android.material.button.MaterialButtonToggleGroup>

Android Material Toggle Icon Only
In the above code, we’ve also added iconTint
and multi selections.
Setting Shapes
To set custom shapes we need to set cornerFamily
attribute in a custom style as shown below:
<style name="Cut" parent="ShapeAppearance.MaterialComponents.MediumComponent">
<item name="cornerFamily">cut</item>
<item name="cornerSize">12dp</item>
</style>
The above style is then set in the shapeAppearance
attribute of MaterialButton:
<com.google.android.material.button.MaterialButtonToggleGroup
android:id="@+id/toggleGroup4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:singleSelection="false">
<com.google.android.material.button.MaterialButton
style="@style/IconOnlyButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:icon="@drawable/ic_signal_wifi_off"
app:strokeWidth="2dp"
app:shapeAppearance="@style/Cut" />
<com.google.android.material.button.MaterialButton
style="@style/IconOnlyButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:strokeWidth="2dp"
app:icon="@drawable/ic_signal_wifi_3_bar_lock" />
<com.google.android.material.button.MaterialButton
style="@style/IconOnlyButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:icon="@drawable/ic_wifi"
app:strokeWidth="2dp"
app:shapeAppearance="@style/Cut" />
</com.google.android.material.button.MaterialButtonToggleGroup>
In the above code, we’ve also set a strokeWidth
on the outline button.

Android Material Toggle Button Shape Cut
Shape Rounded
We can set a custom rounded shape with corner radius defined as shown below:
<style name="Rounded" parent="ShapeAppearance.MaterialComponents.SmallComponent">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">16dp</item>
</style>
<com.google.android.material.button.MaterialButtonToggleGroup
android:id="@+id/toggleGroup5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:singleSelection="false">
<com.google.android.material.button.MaterialButton
style="@style/IconOnlyButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:icon="@drawable/ic_signal_wifi_off"
app:shapeAppearance="@style/Rounded"
app:strokeColor="@android:color/black"
app:strokeWidth="4dp" />
<com.google.android.material.button.MaterialButton
style="@style/IconOnlyButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:icon="@drawable/ic_signal_wifi_3_bar_lock"
app:strokeColor="@android:color/black"
app:strokeWidth="4dp" />
<com.google.android.material.button.MaterialButton
style="@style/IconOnlyButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:icon="@drawable/ic_wifi"
app:shapeAppearance="@style/Rounded"
app:strokeColor="@android:color/black"
app:strokeWidth="4dp" />
</com.google.android.material.button.MaterialButtonToggleGroup>

Android Material Toggle Button Shape Rounded
With Typography
The following style adds a font family on the text of the MaterialButtons:
<style name="CustomFont" parent="TextAppearance.MaterialComponents.Headline4">
<item name="fontFamily">@font/amatic</item>
<item name="android:textAllCaps">false</item>
</style>
<com.google.android.material.button.MaterialButtonToggleGroup
android:id="@+id/toggleGroup6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:singleSelection="false">
<com.google.android.material.button.MaterialButton
style="@style/Widget.MaterialComponents.Button.OutlinedButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Java"
android:textAppearance="@style/CustomFont"
app:strokeColor="@android:color/black" />
<com.google.android.material.button.MaterialButton
style="@style/Widget.MaterialComponents.Button.OutlinedButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Python"
android:textAppearance="@style/CustomFont"
app:strokeColor="@android:color/black" />
<com.google.android.material.button.MaterialButton
style="@style/Widget.MaterialComponents.Button.OutlinedButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="C++"
android:textAppearance="@style/CustomFont"
app:strokeColor="@android:color/black" />
</com.google.android.material.button.MaterialButtonToggleGroup>
We’ve already added a custom font file in the font
folder under res.
MaterialButtonToggleGroup has an addOnButtonCheckedListener
callback which gets triggered when a button is checked.
That brings an end to this tutorial. You can download the source code containing all the above customizations from the links below:
Hi when add change listenr for material button toggle group it duplicates selection
telecomButtonToggleGroup.addOnButtonCheckedListener { group, checkedId, isChecked ->
when (checkedId) {
}
}
if i check a its okay when i check b it invoke both code for a ,b and if i check c it inoke code for b, c and so on.
how can i fix this
Great job mate !!!