{"id":4218,"date":"2020-06-25T22:49:19","date_gmt":"2020-06-25T12:49:19","guid":{"rendered":"https:\/\/learntodroid.com\/?p=4218"},"modified":"2020-08-14T16:17:40","modified_gmt":"2020-08-14T06:17:40","slug":"how-to-create-a-button-group-with-materialbuttontogglegroup","status":"publish","type":"post","link":"http:\/\/10.0.0.14:32769\/how-to-create-a-button-group-with-materialbuttontogglegroup\/","title":{"rendered":"How to Create a Button Group with MaterialButtonToggleGroup"},"content":{"rendered":"\n<p>The material design library for Android offers two components MaterialButtonToggleGroup and MaterialButton that can be used to create a group of buttons can toggled on or off while having only a single button being selected at any time.<\/p>\n\n\n\n<p>See an example of the MaterialButtonToggleGroup and MaterialButton widgets used below to select the period of data for stock prices to display in a chart in an Android app.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"375\" height=\"70\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/06\/Example-use-of-MaterialButtonToggleGroup-in-Android.gif\" alt=\"\" class=\"wp-image-4219\"\/><figcaption>Example usage of the MaterialButtonToggleGroup in Android<\/figcaption><\/figure><\/div>\n\n\n\n<p>In this post I will show you, with code samples written in Java (also available in <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/learntodroid\/MaterialButtonToggleGroupTutorial\" target=\"_blank\">GitHub<\/a>), how to use the MaterialButtonToggleGroup and MaterialButton widgets from the material design library for Android to create a group of buttons that can be toggled on and off. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to use the MaterialButtonToggleGroup and MaterialButton Widgets in Android<\/h2>\n\n\n\n<p>In this section of the tutorial on using the MaterialButtonToggleGroup and MaterialButton widgets I will show you code samples on how to create a set of buttons that can be toggled.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Retrieve the Android Material Design Dependencies using Gradle<\/h3>\n\n\n\n<p>First we will need to add the implementation dependency for the <a rel=\"noreferrer noopener\" href=\"https:\/\/material.io\/develop\/android\" target=\"_blank\">Android material design library<\/a> to our Android project in order to use the MaterialButtonToggleGroup and MaterialButton widgets.<\/p>\n\n\n\n<p>In your build.gradle file inside in the app directory in your Android project, add the following dependency to get access to the MaterialButtonToggleGroup and MaterialButton widgets.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/94bf192222fcbe13be3a4679aa9187b0.js\"><\/script><\/p>\n\n\n<h3 class=\"wp-block-heading\">Step 2: Setup the theme in the styles.xml file and the Android App Manifest<\/h3>\n\n\n\n<p>Next we will need to set up the them in the located in the styles.xml file to use with your Android app.<\/p>\n\n\n\n<p>For the style element used for as the theme for your Android app in your resource style.xml file, make sure you have a parent attribute set to &#8220;Theme.MaterialComponents&#8221; as per the code sample below.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/2e1efd0390729c1e44521fe3176e4f3c.js\"><\/script><\/p>\n\n\n<p>In the Android app&#8217;s manifest file, the application element will need to reference the theme we have created in the android:theme attribute as per the sample manifest file below.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/23fd949e3b1d26b8eb1ce4a36219757f.js\"><\/script><\/p>\n\n\n<h3 class=\"wp-block-heading\">Step 3: Add the MaterialButtonToggleGroup and MaterialButton Widgets to the Fragment or Activity Layout Resource File<\/h3>\n\n\n\n<p>Next we will update the layout resource we will use for our fragment or activity and add the MaterialButtonToggleGroup and the MaterialButton widgets.<\/p>\n\n\n\n<p>In the layout resource, we will first add a <a rel=\"noreferrer noopener\" href=\"https:\/\/developer.android.com\/reference\/com\/google\/android\/material\/button\/MaterialButtonToggleGroup\" target=\"_blank\">MaterialButtonToggleGroup<\/a> widget. In the MaterialButtonToggleGroup widget we will add the XML attribute &#8220;app:singleSelection&#8221; with the value &#8220;true&#8221; to enforce only a maximum of one button in the MaterialButtonToggleGroup to be selected at any at time.<\/p>\n\n\n\n<p>Inside the MaterialButtonToggleGroup widget we will add three MaterialButton widgets in the layout resource. On each of the MaterialButton widget we will add the following attributes.<\/p>\n\n\n\n<ul><li>A unique id as the value of the &#8220;android:id&#8221; attribute<\/li><li>An &#8220;android:text&#8221; attribute with the value set to the label of the button<\/li><li>A &#8220;style&#8221; attribute with the value &#8220;?attr\/materialButtonOutlinedStyle&#8221;<\/li><\/ul>\n\n\n\n<p>See a sample layout resource below for an activity containing the MaterialButtonToggleGroup widget with three MaterialButton widgets inside.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/1925d980a52c3eca1966b2d6e0253c93.js\"><\/script><\/p>\n\n\n<p>Now if you run your Android app you should see something like the following screen capture recording.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2020\/06\/MaterialButtonToggleGroup-MaterialButtons-Example-in-Android.gif\" alt=\"\" class=\"wp-image-4239\" width=\"307\" height=\"635\"\/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">How to Set the Selected MaterialButton in MaterialButtonToggleGroup<\/h2>\n\n\n\n<p>There are two ways you can set the button that is checked in the MaterialButtonToggleGroup.<\/p>\n\n\n\n<ul><li>Option 1: using the checkedButton XML attribute on the MaterialButtonToggleGroup<\/li><li>Option 2: using the check(int) method on the MaterialButtonToggleGroup<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Checked Button XML Attribute on MaterialButtonToggleGroup<\/h3>\n\n\n\n<p>The MaterialButtonToggleGroup widget has an XML attribute named &#8220;app:checkedButton&#8221; that can be used to load a button in the group as checked. To set a particular button inside the MaterialButtonToggleGroup to load as checked by default, pass the id of the button to be checked as the value to the &#8220;app:checkedButton&#8221; attribute.<\/p>\n\n\n\n<p>See the code sample below showing the second MaterialButton loading as checked in the MaterialButtonToggleGroup.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/8556fdf1854333babdddf3bf5fa239a4.js\"><\/script><\/p>\n\n\n<h3 class=\"wp-block-heading\">Check Method on MaterialButtonToggleGroup<\/h3>\n\n\n\n<p>The MaterialButtonToggleGroup widget has a method check(int) which can be used to check a MaterialButton programmatically by passing the id of the MaterialButton as a parameter.<\/p>\n\n\n\n<p>See the code sample below using the check(int) method on the MaterialButtonToggleGroup to check the third MaterialButton in the MaterialButtonToggleGroup.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/32b72547253507812912b5be27ff3f34.js\"><\/script><\/p>\n\n\n<h2 class=\"wp-block-heading\">How to Clear the Selected MaterialButton from MaterialButtonToggleGroup<\/h2>\n\n\n\n<p>There are two ways to clear a selected MaterialButton from a MaterialButtonToggleGroup programmatically in Android.<\/p>\n\n\n\n<p>The first way involves using the <a href=\"https:\/\/developer.android.com\/reference\/com\/google\/android\/material\/button\/MaterialButtonToggleGroup#uncheck\" target=\"_blank\" rel=\"noreferrer noopener\">uncheck(int) method<\/a> on the MaterialButtonToggleGroup passing the id of the MaterialButton to be unchecked as a parameter.<\/p>\n\n\n\n<p>The second approach is to use the <a href=\"https:\/\/developer.android.com\/reference\/com\/google\/android\/material\/button\/MaterialButtonToggleGroup#clearchecked\" target=\"_blank\" rel=\"noreferrer noopener\">clearChecked() method<\/a> on the MaterialButtonToggleGroup.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Get the Selected MaterialButton from a MaterialButtonToggleGroup<\/h2>\n\n\n\n<p>If the MaterialButtonToggleGroup is in single selection mode (which can be set using the &#8220;app:singleSelection&#8221; XML attribute or by invoking the setSingleSelection(boolean) method on the MaterialButtonToggleGroup) the id of the selected MaterialButton can be retrieved using the getCheckedButtonId() method on the MaterialButtonToggleGroup.<\/p>\n\n\n\n<p>If there is no selected MaterialButton the <a href=\"https:\/\/developer.android.com\/reference\/com\/google\/android\/material\/button\/MaterialButtonToggleGroup#getcheckedbuttonid\" target=\"_blank\" rel=\"noreferrer noopener\">getCheckedButtonId() method<\/a> will return the NO_ID value.<\/p>\n\n\n\n<p>See the code sample below showing how to get the selected MaterialButton from a single selection MaterialButtonToggleGroup using the getCheckedButtonId() then creating and showing a toast of the selected MaterialButton text.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/d271d0212611be094f358d023a500a15.js\"><\/script><\/p>\n\n\n<p>If the MaterialButtonToggleGroup has multi selection enabled, the <a href=\"https:\/\/developer.android.com\/reference\/com\/google\/android\/material\/button\/MaterialButtonToggleGroup#getcheckedbuttonids\" target=\"_blank\" rel=\"noreferrer noopener\">getCheckedButtonIds() method<\/a> on the MaterialButtonToggleGroup can be used to retrieved a list of ids of the MaterialButtons that are selected in the MaterialButtonToggleGroup.<\/p>\n\n\n\n<p>See the code sample below showing how to get the ids of each of the selected MaterialButtons in the MaterialButtonToggleGroup and showing a toast containing a concatenated string of each of the selected MaterialButton text labels.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/2b318396800b6048117b283529ba9906.js\"><\/script><\/p>\n\n\n<h2 class=\"wp-block-heading\">How to Mandate that a MaterialButton is Always Selected in a MaterialButtonToggleGroup<\/h2>\n\n\n\n<p>There are two ways to ensure a MaterialButton is always selected in a MaterialButtonToggleGroup.<\/p>\n\n\n\n<p>The first involves setting the &#8220;app:selectionRequired&#8221; XML attribute on the MaterialButtonToggleGroup to &#8220;true&#8221;.<\/p>\n\n\n\n<p>See an example of a layout resource using the &#8220;app:selectionRequired&#8221; XML attribute on the MaterialButtonToggleGroup to require at least one MaterialButton to be selected.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/dde69accfcc4577e2e4649b4d1d3b109.js\"><\/script><\/p>\n\n\n<p>Alternatively you can use the setSelectionRequired(boolean) method on the MaterialButtonToggleGroup passing true as the parameter.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Fix Error Inflating Class when using MaterialButton and MaterialButtonToggleGroup<\/h2>\n\n\n\n<p>You may experience an error when inflating a view containing a MaterialButton and MaterialButtonToggleGroup.<\/p>\n\n\n\n<p>See the logs below of an example of the error inflating a view containing a MaterialButton and MaterialButtonToggleGroup widgets.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/36bfc798beca185e7167f8e5d87118ac.js\"><\/script><\/p>\n\n\n<p>To fix this error make sure the style used in your Android application has the parent attribute value of &#8220;Theme.MaterialComponents&#8221; in the styles.xml file. <\/p>\n\n\n\n<p>See a sample styles.xml resource below.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/2e1efd0390729c1e44521fe3176e4f3c.js\"><\/script><\/p>\n\n\n<p>Also make sure this style is referenced correctly in your Android app&#8217;s manifest file in the android:theme attribute of the application element as per the sample manifest file below.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/23fd949e3b1d26b8eb1ce4a36219757f.js\"><\/script><\/p>","protected":false},"excerpt":{"rendered":"<p>The material design library for Android offers two components MaterialButtonToggleGroup and MaterialButton that can be used to create a group of buttons can toggled on or off while having only<\/p>\n","protected":false},"author":1,"featured_media":4464,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[12,27],"tags":[],"acf":[],"_links":{"self":[{"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/posts\/4218"}],"collection":[{"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/comments?post=4218"}],"version-history":[{"count":5,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/posts\/4218\/revisions"}],"predecessor-version":[{"id":4270,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/posts\/4218\/revisions\/4270"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/media\/4464"}],"wp:attachment":[{"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/media?parent=4218"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/categories?post=4218"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/tags?post=4218"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}