change drawable of selected MaterialButton using MaterialButtonToggleGroup

Question

I can not able to change the background of the selected MaterialButton.

<com.google.android.material.button.MaterialButtonToggleGroup
        android:id="@+id/toggleButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:singleSelection="true"
        app:selectionRequired="true"
        app:checkedButton="@+id/toggleButtonFolder">

        <com.google.android.material.button.MaterialButton
            android:id="@+id/toggleButtonFolder"
            style="?attr/materialButtonOutlinedStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:shapeAppearance="@style/ToggleButton.Rounded"

            android:text="Folders" />

        <com.google.android.material.button.MaterialButton
            android:id="@+id/toggleButtonRecent"
            style="?attr/materialButtonOutlinedStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:shapeAppearance="@style/ToggleButton.Rounded"

            android:text="Recent" />

    </com.google.android.material.button.MaterialButtonToggleGroup>

style ToggleButton.Rounded:

 <style name="ToggleButton.Rounded" parent="ShapeAppearance.MaterialComponents.SmallComponent">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">16dp</item>
</style>

result of the code is:

What I want to acheive:

Kind

Could you share code inside ToggleButton.Rounded style ? – Frida

Answer 1

You have to make custom drawable

make a drawable resorce file name coustom_btn_radio.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_checked="true" android:state_window_focused="false"
    android:drawable="@drawable/btn_radio_on" />
  <item android:state_checked="false" android:state_window_focused="false"
    android:drawable="@drawable/btn_radio_off" />

  <item android:state_checked="false" android:drawable="@drawable/btn_radio_on" />
  <item android:state_checked="true" android:drawable="@drawable/btn_radio_off" />
</selector>

then make btn_radio_on and btn_radio_off drawable files

btn_radio_on.xml

 <selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
     <shape android:shape="rectangle">
         <stroke android:color="#3b91d7" android:width="1dp"/>
         <corners android:topLeftRadius="20dp"
             android:topRightRadius="20dp"
             android:bottomLeftRadius="20dp"
             android:bottomRightRadius="20dp"/>
     </shape>
 </item>

btn_radio_off.xml

 <selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item>
     <shape android:shape="rectangle">
         <stroke android:color="#000000" android:width="1dp"/>
         <solid android:color="#82b1ff"/>

         <corners android:topLeftRadius="20dp"
             android:topRightRadius="20dp"
             android:bottomLeftRadius="20dp"
             android:bottomRightRadius="20dp"/>
     </shape>
 </item>

now set coustom_btn_radio.xml as a background of your MaterialButton

Supertanker

The problem is you should not use background property on material buttons as mentioned in the docs. – Kind

you can set drawable as a background but when you using color as a background then it will not working this code is working fine for me – Supertanker

setting the background to MaterialButton throws runtime exception – Kind

@HASSNAINNADEEM the code is not working Attempted to get ShapeAppearanceModel from a MaterialButton which has an overwritten background. am getting this error – Rolfston

@sanojlawrence can you shere your code – Supertanker

Did anyone find a solution? I am facing same issue. – Audie