Change the background color of MaterialButtonToggleGroup

Question

I'm using MaterialButtonToggleGroup to create selector buttons. I want to change the background color of MaterialButton buttons. Its default color is light blue, and I want to change it to light green. Currently, I'm using drawable sectors to change the background color, but it is not working.

Default color ,

Want this color,

Here is my layout,

<com.google.android.material.button.MaterialButtonToggleGroup
    android:id="@+id/toggleContent"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:checkedButton="@id/btnOutline"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    android:visibility="visible"
    app:layout_constraintRight_toRightOf="parent"
    app:singleSelection="true">

    <com.google.android.material.button.MaterialButton
        android:id="@+id/btnOutline"
        style="@style/Widget.MaterialComponents.Button.OutlinedButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/button_selector"
        android:text="@string/outline"
        android:textAllCaps="false" />

    <com.google.android.material.button.MaterialButton
        android:id="@+id/btnMain"
        style="@style/Widget.MaterialComponents.Button.OutlinedButton"
        android:background="@drawable/button_selector"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/main"
        android:textAllCaps="false" />

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

Here is my drawable file "button_selector",

    <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_selected="true" android:drawable="@drawable/selector_color"/>

</selector>

Here is the "selector_color" file,

  <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <solid android:color="#93cdcb"/>
</shape>

Answer 1

For material button you should use app:backgroundTint instead of android:background Android documentation also mentions it here: https://developer.android.com/reference/com/google/android/material/button/MaterialButton

Do not use the android:background attribute. MaterialButton manages its own background drawable, and setting a new background means MaterialButton can no longer guarantee that the new attributes it introduces will function properly

For filled buttons, this class uses your theme's?attr/colorPrimary for the background tint color and?attr/colorOnPrimary for the text color. For unfilled buttons, this class uses?attr/colorPrimary for the text color and transparent for the background tint.

Answer 2

Instead of setting it to ' android:background ' you could try setting the selector on the ' android:backgroundTint ' property. If you want to update the border-color consider updating and ' app:strokeColor '

Answer 3

The background color of the MaterialButton is defined by the backgroundTint attribute.

The default value is:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:color="?attr/colorPrimary" android:state_enabled="true"/>
  <item android:alpha="0.12" android:color="?attr/colorOnSurface"/>
</selector>

You can change it in the xml layout or you can define a custom style:

<com.google.android.material.button.MaterialButton
           style="@style/ButtonStyle"
           .. />

with:

<style name="ButtonStyle" parent="Widget.MaterialComponents.Button">
    <item name="backgroundTint">@color/your_button_background_selector</item>
    ...
</style>

Answer 4

I had the same issue and solved it by using android:state_checked="true" instead of android:state_selected="true" in the selector.