Skip to content

Instantly share code, notes, and snippets.

@smartherd

smartherd/MainActivity.kt

Created November 27, 2020 10:06
Show Gist options
  • Save smartherd/86d000ea08092d93863aae10c2c64dcf to your computer and use it in GitHub Desktop.
Save smartherd/86d000ea08092d93863aae10c2c64dcf to your computer and use it in GitHub Desktop.
Download ZIP
Material Toggle Button with Icon only
Raw
activity_main.xml
<?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/btnLeft"
style="@style/ToggleButtonWithIconOnly"
app:icon="@drawable/ic_baseline_format_align_left_24"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:layout_editor_absoluteX="168dp"
tools:layout_editor_absoluteY="153dp" />
<Button
android:id="@+id/btnCenter"
style="@style/ToggleButtonWithIconOnly"
app:icon="@drawable/ic_baseline_format_align_center_24"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:layout_editor_absoluteX="173dp"
tools:layout_editor_absoluteY="251dp" />
<Button
android:id="@+id/btnRight"
style="@style/ToggleButtonWithIconOnly"
app:icon="@drawable/ic_baseline_format_align_right_24"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:layout_editor_absoluteX="166dp"
tools:layout_editor_absoluteY="340dp" />
<Button
android:id="@+id/btnJustified"
style="@style/ToggleButtonWithIconOnly"
app:icon="@drawable/ic_baseline_format_align_justify_24"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:layout_editor_absoluteX="166dp"
tools:layout_editor_absoluteY="447dp" />
</com.google.android.material.button.MaterialButtonToggleGroup>
</androidx.constraintlayout.widget.ConstraintLayout>
Raw
ic_baseline_format_align_center_24.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24"
android:tint="?attr/colorControlNormal">
<path
android:fillColor="@android:color/white"
android:pathData="M7,15v2h10v-2L7,15zM3,21h18v-2L3,19v2zM3,13h18v-2L3,11v2zM7,7v2h10L17,7L7,7zM3,3v2h18L21,3L3,3z"/>
</vector>
Raw
ic_baseline_format_align_justify_24.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24"
android:tint="?attr/colorControlNormal">
<path
android:fillColor="@android:color/white"
android:pathData="M3,21h18v-2L3,19v2zM3,17h18v-2L3,15v2zM3,13h18v-2L3,11v2zM3,9h18L21,7L3,7v2zM3,3v2h18L21,3L3,3z"/>
</vector>
Raw
ic_baseline_format_align_left_24.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24"
android:tint="?attr/colorControlNormal">
<path
android:fillColor="@android:color/white"
android:pathData="M15,15L3,15v2h12v-2zM15,7L3,7v2h12L15,7zM3,13h18v-2L3,11v2zM3,21h18v-2L3,19v2zM3,3v2h18L21,3L3,3z"/>
</vector>
Raw
ic_baseline_format_align_right_24.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24"
android:tint="?attr/colorControlNormal">
<path
android:fillColor="@android:color/white"
android:pathData="M3,21h18v-2L3,19v2zM9,17h12v-2L9,15v2zM3,13h18v-2L3,11v2zM9,9h12L21,7L9,7v2zM3,3v2h18L21,3L3,3z"/>
</vector>
Raw
MainActivity.kt
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.btnLeft -> showToast("Left Align")
R.id.btnCenter -> showToast("Center Align")
R.id.btnRight -> showToast("Right Align")
R.id.btnJustified -> showToast("Justified Align")
}
} else {
if (toggleButtonGroup.checkedButtonId == View.NO_ID) {
showToast("No Alignment Selected")
}
}
}
}
private fun showToast(str: String) {
Toast.makeText(this, str, Toast.LENGTH_SHORT).show()
}
}
Raw
themes.xml
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.MDCComponents" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">@color/purple_500</item>
<item name="colorPrimaryVariant">@color/purple_700</item>
<item name="colorOnPrimary">@color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">@color/teal_200</item>
<item name="colorSecondaryVariant">@color/teal_700</item>
<item name="colorOnSecondary">@color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>
<style name="ToggleButtonWithIconOnly" parent="Widget.MaterialComponents.Button.OutlinedButton">
<item name="iconPadding">0dp</item>
<item name="android:insetTop">0dp</item>
<item name="android:insetBottom">0dp</item>
<item name="android:paddingLeft">12dp</item>
<item name="android:paddingRight">12dp</item>
<item name="android:minWidth">48dp</item>
<item name="android:minHeight">48dp</item>
</style>
</resources>
@smartherd
Copy link
Author

Material ToggleButton belongs to Material Design Component or MDC library. In this video you'll learn:

  • Toggle buttons with image or icons
  • Using MaterialButtonToggleGroup XML tag
  • singleSelection attribute to select one button at a time
  • Use addOnButtonCheckedListener on toggle button group with an icon
  • Perform an action when the user deselects a button (when nothing is selected)
    These toggle buttons can be used to select from a group of choices just like Radio Buttons present in a Radio Group.

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