Chip materialThemeOverlay is not working

Description: The implementation with Chip in Material 3 is not working after following the documentation

Expected behavior: Should apply the styling based on what was stated in the documentation.

Source code:

Not working, incorrect color.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Chip style on both light and night mode -->
    <style name="AppChip" parent="Widget.Material3.Chip.Input">
        <item name="closeIconVisible">false</item>
        <item name="checkedIconVisible">false</item>
        <item name="materialThemeOverlay">@style/ThemeOverlay.App.Chip</item>
        <item name="shapeAppearanceOverlay">@style/ShapeAppearance.App.SmallComponent</item>
    </style>
    <style name="ThemeOverlay.App.Chip" parent="">
        <item name="colorOnSurfaceVariant">@color/chip_state_list</item>
        <item name="colorOnSurface">@color/background_color_chip_state_list</item>
    </style>
</resources>

Working correct color

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Chip style on both light and night mode -->
    <style name="AppChip" parent="Widget.Material3.Chip.Input">
        <item name="closeIconVisible">false</item>
        <item name="checkedIconVisible">false</item>
        <item name="android:textColor">@color/chip_state_list</item>
        <item name="chipStrokeColor">@android:color/transparent</item>
        <item name="chipBackgroundColor">@color/background_color_chip_state_list</item>
        <item name="shapeAppearanceOverlay">@style/ShapeAppearance.App.SmallComponent</item>
    </style>
    <!--TODO theme overlay-->
</resources>

Usage in main theme <item name="chipStyle">@style/AppChip</item>

Android API version: SDK 21

Material Library version: 1.6.0-beta-01

Device: Samsung J1

Is it just me or the Material 3 components and its documentations are not yet finish or finalize? I keep having this issue where the documentation and the behavior is not correct.

[drchen]

I think it’s using colorOnSecondaryContainer (selected) and colorOnSurfaceVariant (unselected.)

[ArcherEmiya05]

I doesn’t work because chipBackgroundColor doesn’t directly point to colorSurface.

The default value is a CSL which switches its color between colorSurface and colorSecondaryContainer. To make it work with materialThemeOverlay, you will need to override colorSurface and colorSecondaryContainer separately, instead of overriding colorSurface with an CSL.

It works! Thanks. How about for its text color?