Android MaterialButton doesn't update icon to its tintColor when parent is invisible

Question

I use MaterialButton as an style toggle for rich editor. I noticed that on some devices icon drawable is not updated when panel with buttons was invisible (or not added to view) during inflation.

I use selector as icontTint toggle_fg_selector :

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_checked="true"
        android:color="?attr/colorPrimaryLight" />

    <item
        android:state_activated="true"
        android:color="?attr/colorPrimaryLight" />

    <item
        android:color="?attr/colorSecondaryTint" />
</selector>

My buttons:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="@dimen/note_bar_size"
    android:background="?colorPrimaryLight">

    <com.google.android.material.button.MaterialButton
        android:id="@+id/note_bold_button"
        style="@style/AcTheme.IconOnlyButton"
        android:layout_width="@dimen/actionbar_buttons_size"
        android:layout_height="@dimen/actionbar_buttons_size"
        android:layout_marginStart="@dimen/actionbar_buttons_gat"
        android:focusable="false"
        android:focusableInTouchMode="false"
        android:checkable="true"
        android:gravity="center"
        android:layout_gravity="center"
        android:background="@drawable/toggle_bg_selector"
        app:backgroundTint="@null"
        app:icon="@drawable/icbf_bold"
        app:iconTint="@drawable/toggle_fg_selector" />

    <com.google.android.material.button.MaterialButton
        android:id="@+id/note_italic_button"
        style="@style/AcTheme.IconOnlyButton"
        android:layout_width="@dimen/actionbar_buttons_size"
        android:layout_height="@dimen/actionbar_buttons_size"
        android:layout_marginStart="@dimen/actionbar_buttons_gat"
        android:focusable="false"
        android:focusableInTouchMode="false"
        android:checkable="true"
        android:gravity="center"
        android:layout_gravity="center"
        android:background="@drawable/toggle_bg_selector"
        app:backgroundTint="@null"
        app:icon="@drawable/icbf_italic"
        app:iconTint="@drawable/toggle_fg_selector" />

    <com.google.android.material.button.MaterialButton
        android:id="@+id/note_strike_button"
        style="@style/AcTheme.IconOnlyButton"
        android:layout_width="@dimen/actionbar_buttons_size"
        android:layout_height="@dimen/actionbar_buttons_size"
        android:layout_marginStart="@dimen/actionbar_buttons_gat"
        android:focusable="false"
        android:focusableInTouchMode="false"
        android:checkable="true"
        android:gravity="center"
        android:layout_gravity="center"
        android:background="@drawable/toggle_bg_selector"
        app:backgroundTint="@null"
        app:icon="@drawable/icbf_strike"
        app:iconTint="@drawable/toggle_fg_selector" />
        .....

But when I uncheck and check the button again, drawable is tinted correctly based on its checked state:

This bug is reproduced when firstly button.isChecked = true|false was set when panel with toggle buttons was invisible. How can I achieve desired tinting on every device in spite of whether isChecked is set with visible or invisible parent?

Answer 1

Try removing BackgroundTint from xml.

Answer 2

I guess the problem is that you didn't provide the default (unchecked) state color for the iconTint.

Try this:

<selector 
    xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:state_checked="true"
        android:color="?attr/colorPrimaryLight" />     //checked state color

    <item
        android:state_checked="false"                  //here!! Unchecked state color
        android:color="@android:color/transparent" />  //"@null" doesn't work!!

</selector>