
We have already shown which styles to use in the “Choosing a style” section above. Theming 🎨īuttons can be themed in terms of the three Material Theming subsystems: color, typography and shape. This also, however, requires adjusting the minHeight to make up for the lack of insets. It is recommended to set the width to match_parent and to remove the top/bottom insets from the child buttons so as to have them sit flush against each other vertically. The interesting thing to note here is the extra attributes on the child MaterialButton(s). Toggle button with orientation set to vertical This can be set programmatically or in XML. However, seeing as MaterialButtonToggleGroup extends LinearLayout, it also supports vertical arrangement. The default arrangement of buttons within a toggle group is horizontal. Listeners can also be removed with the MaterialButtonToggleGroup#removeListener and MaterialButtonToggleGroup#clearListeners functions. We are also able to listen for checked changes by adding an OnButtonCheckedListener to a MaterialButtonToggleGroup: toggleGroup.addOnButtonCheckedListener button1) // Unchecks a specific button toggleGroup.clearChecked() // Unchecks all buttons button1) // Checks a specific button toggleGroup.uncheck(R.id. checkedButtonIds // Potentially an empty list toggleGroup.check(R.id. checkedButtonId // Will return View.NO_ID if singleSelection = false val checkedIds = toggleGroup. We are able to query for and adjust the current checked button(s) in a variety of ways: val checkedId = toggleGroup. checkedButton: The ID of the button that should be checked by default.The default value is false, meaning all buttons can be unchecked. selectionRequired: Determines whether or not at least one button in the group must be checked at a time.The default value is false, meaning multiple buttons can be checked/unchecked independently. singleSelection: Determines whether or not only a single button in the group can be checked at a time.Thus, there exists a couple of attributes for adjusting how MaterialButtonToggleGroup manages this:

The android:checkable attribute is set to true). When added to a MaterialButtonToggleGroup, child MaterialButtons automatically become “selectable” (i.e. It is advised to use a consistent style for all children and also recommended to use the outlined button type. The appearance of the MaterialButtons is determined by whichever style they each use. The MaterialButtonToggleGroup handles layout and adjusting of only the relevant shape corners in the row of MaterialButtons. GroupingĪlternatively, it can be done programmatically: toggleGroup.addView(button1, 0, layoutParams) toggleGroup.addView(button2, 1, layoutParams) toggleGroup.addView(button3, 2, layoutParams) Note: MaterialButtonToggleGroup was added in the 1.1.0-alpha05 release of Material Components for Android. In order to create a toggle button, we need to add MaterialButtons as child Views to a MaterialButtonToggleGroup (a custom ViewGroup). Grouping Buttons to create a Toggle Button 👨👩👧👦


The default value is 4dp for text buttons and 8dp for all other types.Īttributes related to icon tinting are discussed in the “Theming” section below. Typically you would not want to change this.

Text button: *.TextButton (main), *.TextButton.Icon, *.TextButton.Snackbar, *.TextButton.Dialog, *., *.These style variants inherit from, each with an optional style suffix:
BUTTONBAR BUTTONSTYLE ANDROID FULL
The full list of styles and their attributes can be found on GitHub. There also exists a variety of sub-styles for specific use cases, such as to adjust padding for an icon. These types map to styles that you can apply to a MaterialButton. A MaterialButton can be included in your layout like so: Choosing a style 🤔Īs discussed in the intro section above, a variety of button types exist.
