CODEWITHSUNDEEP
androidmaterial-designmaterial-componentsmaterial-components-androidandroid-chips
smdufb
smdufb

Reputation: 565

Android Material Chip Theme overriding

I want to customize a Material chip.

I would think this is how to do it:

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

    .... lots more theme stuff here

    <item name="chipStyle">@style/MaterialChips</item>
    <item name="chipGroupStyle">@style/MaterialChips</item>
    <item name="chipStandaloneStyle">@style/MaterialChips</item>
</style>

<style name="MaterialChips" parent="Widget.MaterialComponents.Chip.Choice">
    <item name="chipBackgroundColor">@color/chips</item>
</style>

None of the tags like chipStyle affect the chips. But if I set app:chipBackgroundColor="@color/chips" in xml it works.

It also works fine like this for other things like say <item name="materialAlertDialogTheme">@style/AlertDialogTheme</item>.

The material documentation (if you can call it that) is really not helping.

Upvotes: 6

Views: 2671

Answers (2)

Gabriele Mariotti
Gabriele Mariotti

Reputation: 363677

Your app theme is correct.

The default style used by Chip component is defined in the app theme by the chipStyle attribute.

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
  <!-- Default style for chip component -->
  <item name="chipStyle">@style/Widget.MaterialComponents.Chip.Action</item>  
</style>

You can customize this style using for example:

<style name="AppTheme" parent="Theme.MaterialComponents.*">
  <!-- Default value for chipStyle -->
  <item name="chipStyle">@style/MaterialChips</item>  
</style>

<style name="MaterialChips" parent="@style/Widget.MaterialComponents.Chip.Choice">
    <!-- ... -->
    <item name="chipBackgroundColor">@color/chips</item>
</style>

If you specify the style attribute in your layout, this style overrides the default value.

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Entry"
            .../>

In this case the Chip uses the Widget.MaterialComponents.Chip.Entry style.

Upvotes: 3

rmakiyama
rmakiyama

Reputation: 11

if you define chip style in layout xml, chip override your theme. It may work if you clear chip style in layout xml.

Upvotes: 1

Related Questions