How to set chipBackgroundColor via "android:theme" attribute with an AppCompat app theme

Question

I have a ChipGroup that has one Chip item :

<com.google.android.material.chip.ChipGroup
            android:id="@+id/chip_group"
            android:layout_width="0dp"
            android:theme="@style/DarkThemeTag"
            android:layout_height="wrap_content">

            <com.google.android.material.chip.Chip
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="@dimen/tag_text_dimen"
                app:chipIcon="@null"
                app:chipIconEnabled="false"/>

As you can notice I set the DarkThemeTag theme on the ChipGroup.

<style name="DarkThemeTag" parent="Theme.MaterialComponents.Light.Bridge">
        <item name="chipBackgroundColor">@color/tag_chip_dark_checkable</item>
        <item name="android:textColor">@android:color/white</item>
    </style>

My app theme inherits from AppCompat, not from MaterialComponents:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
      ....
    </style> 

According to Chip official page it inherits from MaterialComponents. @Mikail Sharin says that app's theme should inherit from MaterialComponents. In this article is stated that if you can't change your app to inherit from MaterialComponents and you want to stick to AppCompat you should use one of the Bridge Themes, so that's what I did.

The problem is that the chipBackgroundColor attribute does not apply to ChipGroup's children. The android:textColor does however.

Do you guys have any ideea what can be wrong?

Note:If I apply the same style on the Chip element it works

Answer 1

You should use a Bridge theme in your app:

<style name="AppTheme" parent="Theme.MaterialComponents.NoActionBar.Bridge">

You can use the android:theme in a widget to override some attributes like colors not to apply a style:

      <com.google.android.material.chip.ChipGroup
            android:theme="@style/DarkThemeTag"
            ..>

with:

<style name="DarkThemeTag" parent="">
    <item name="android:textColor">@android:color/white</item>
</style>

Then you can apply a custom style in widget as:

        <com.google.android.material.chip.Chip
            style="@style/my_chip"
            ../>

with:

<style name="my_chip" parent="@style/Widget.MaterialComponents.Chip.Action">
   <item name="chipBackgroundColor">@color/tag_chip_dark_checkable</item>
</style>

or you can simply apply it in your layout:

        <com.google.android.material.chip.Chip
            app:chipBackgroundColor="....."
            ../>

If you want to override the chip background color using android:theme you should use:

        <com.google.android.material.chip.Chip
            android:theme="@style/custom_color"
            ../>

with:

<style name="custom_color" parent="">
    <item name="colorPrimary">....</item>
    <item name="colorOnSurface">....</item>
</style>

since the default selector in the chipBackgroundColor uses these colors.