Create a Toggle Button with Material Design 3

Toggle Button

A common container for a set of related, toggleable MaterialButtons. The MaterialButtons in this group will be shown on a single line.

This layout currently only supports child views of type MaterialButton.

Steps

1. Create a New Project.

In xml Layout

Buttons can be added to this view group via XML, as follows:

        <?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".MainActivity">
    <com.google.android.material.button.MaterialButtonToggleGroup
        android:id="@+id/materialButtonToggleGroup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:singleSelection="true">

        <com.google.android.material.button.MaterialButton
            android:id="@+id/btnAndroid"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:backgroundTint="@drawable/color_state"
            android:checkable="true"
            android:text="@string/android"/>

        <com.google.android.material.button.MaterialButton
            android:id="@+id/btnJava"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:backgroundTint="@drawable/color_state"
            android:checkable="true"
            android:text="@string/java" />

        <com.google.android.material.button.MaterialButton
            android:id="@+id/btnKotlin"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:backgroundTint="@drawable/color_state"
            android:text="@string/kotlin" />

        <com.google.android.material.button.MaterialButton
            android:id="@+id/btnPhp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:backgroundTint="@drawable/color_state"
            android:text="@string/php" />
    </com.google.android.material.button.MaterialButtonToggleGroup>
    <com.google.android.material.textview.MaterialTextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="32sp"
        android:gravity="center"
        android:text="Toggle Button"
        app:layout_constraintTop_toBottomOf="@+id/materialButtonToggleGroup"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

2. Create a Drawable Resource File
 named as color_state 
this will change the background 
of our Button.
Right Click on drawable >
 New > Drawable Resource File

 <?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android=

"http://schemas.android.com/apk/res/android">

        <item

        android:state_enabled="false"

        android:color="#848482"/>
    <item
        android:state_checked="true"
        android:color="#E91E63"
        />
    <item
        android:state_checked="false"
        android:color="#89CFF0"/>
    <item
        android:state_enabled="true"
        android:color="#F0FFFF"/>

    </selector>

3. As we are not implementing any onclick

 method for our  buttons 

If we click on button the background color 

will only change so there is no 

code for MainActivity

package com.example.androidappcodingblog

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

class ToggleButton : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}

Output

Thanks for reading!😊😊😊😊😊😊
If you enjoyed reading , Show some Love by
clapping 👏 on this post!
If you have any suggestion share with me.