5

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.

Gabriele Mariotti
  • 320,139
  • 94
  • 887
  • 841
smdufb
  • 555
  • 4
  • 19
  • 1
    The style is defined by the `chipStyle` attribute. It works. How do you define the Chip in the layout? – Gabriele Mariotti Dec 02 '19 at 21:43
  • 1
    I'm guessing you suspected something like this. I had ```style="@style/Widget.MaterialComponents.Chip.Choice"``` set on the chips... I feel silly. Thank you for getting me there. – smdufb Dec 03 '19 at 08:21

2 Answers2

3

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.

Gabriele Mariotti
  • 320,139
  • 94
  • 887
  • 841
1

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

rmakiyama
  • 11
  • 1