Android MaterialButtonToggleGroup

In this tutorial, we’ll be focusing on MaterialButtonToggleGroup, newly introduced with Android Material Components.

Android MaterialButtonToggleGroup

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'

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: