Skip to content

Instantly share code, notes, and snippets.

@smartherd
Created November 27, 2020 08:03
Show Gist options
  • Save smartherd/0803ba4e287d6aa0d441d0a221eeb013 to your computer and use it in GitHub Desktop.
Save smartherd/0803ba4e287d6aa0d441d0a221eeb013 to your computer and use it in GitHub Desktop.
Material Toggle Button (Material Design Component: MDC)
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.google.android.material.button.MaterialButtonToggleGroup
android:id="@+id/toggleButtonGroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:singleSelection="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<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/btnFlutter"
style="@style/Widget.MaterialComponents.Button.OutlinedButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Flutter" />
<Button
android:id="@+id/btnWeb"
style="@style/Widget.MaterialComponents.Button.OutlinedButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Web" />
</com.google.android.material.button.MaterialButtonToggleGroup>
</androidx.constraintlayout.widget.ConstraintLayout>
package com.sriyank.mdccomponents
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.Toast
import kotlinx.android.synthetic.main.activity_main.*
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
toggleButtonGroup.addOnButtonCheckedListener { toggleButtonGroup, checkedId, isChecked ->
if (isChecked) {
when (checkedId) {
R.id.btnAndroid -> showToast("Robot that looks like human.")
R.id.btnFlutter -> showToast("It's a Butterfly thing.")
R.id.btnWeb -> showToast("You still exist?")
}
} else {
if (toggleButtonGroup.checkedButtonId == View.NO_ID) {
showToast("Nothing Selected")
}
}
}
}
private fun showToast(str: String) {
Toast.makeText(this, str, Toast.LENGTH_SHORT).show()
}
}
@smartherd
Copy link
Author

Material ToggleButton belongs to Material Design Component or MDC library. Toggle Buttons can be used to select from a group of choices just like Radio Buttons present in a Radio Group. In this video you will learn:

  • How to create Toggle Button
  • Group them in "com.google.android.material.button.MaterialButtonToggleGroup"
  • Set addOnButtonCheckedListener on toggle button group
  • Purpose of using singleSelection attribute
  • Perform an action when the user deselects a button (when nothing is selected)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment