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

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

Answer 2

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 3

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 4

Create MaterialButton programatically

    MaterialButtonToggleGroup grupo = new MaterialButtonToggleGroup(this, null, com.google.android.material.R.attr.materialButtonOutlinedStyle);
    MaterialButton btn1 = new MaterialButton(this, null, com.google.android.material.R.attr.materialButtonOutlinedStyle);
    btn1.setText("Ejemplo 1");
    //here 
    btn1.setBackgroundTintList(ColorStateList.valueOf(Color.GREEN));
    btn1.style
    grupo.addView(btn1);