Android Chip Custom Height Or Padding - Chipgroup spacing

Question

Is there a way to change default material Chip vertical padding or height? From the docs I see there surely is a way to set the minimal height, but I would like to make chips "thinner", like in this design:

Solution 1

There's a very straightforward way to achieve what I want: all I needed to do was to set the android:layout_height attribute on the ChipGroup enclosing my chips.

I guess it makes sense that it's not possible to achieve that on a single chip... :>

Solution 2

In the 1.1.0-alpha* versions extra spacing is added for the chip. After a lot of hit and trial I managed to remove that spacing using:

app:chipMinTouchTargetSize="0dp"

Looking at the class file for Chip, it seems that it's related to Android's minimum touch target size, so consider that before changing this.

Solution 3

Belows are the Chip Attributes for padding. Hopefully, It may help you

Paddings

app:chipStartPadding
app:iconStartPadding
app:iconEndPadding
app:textStartPadding
app:textEndPadding
app:closeIconStartPadding
app:closeIconEndPadding
app:chipEndPadding

Fore more info: Click here

Solution 4

In order to make a Chip thinner, you need to adjust two properties: chip height and text size.

<style name="ThinnerChip" parent="Widget.MaterialComponents.Chip.Action">
    <item name="chipCornerRadius">12dp</item>
    <item name="chipMinHeight">24dp</item>
    <item name="android:textAppearance">@style/SmallerText</item>
</style>

<style name="SmallerText" parent="TextAppearance.AppCompat.Small">
    <item name="android:textSize">11sp</item>
</style>

Then apply the style as ussually.

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

Solution 5

You can use a custom style:

  <style name="MaterialComponents_Chip_Thin" parent="@style/Widget.MaterialComponents.Chip.Entry">
    <item name="chipMinHeight">24dp</item>
    <item name="chipMinTouchTargetSize">24dp</item>
    <item name="chipIconSize">18dp</item>
    <item name="android:textAppearance">@style/TextAppearance.MaterialComponents.Body2_Thin</item>
    <item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlay.MaterialComponents.Chip_Thin</item>
  </style>
  <style name="ShapeAppearanceOverlay.MaterialComponents.Chip_Thin" parent="">
    <item name="cornerSize">12dp</item>
  </style>
  <style name="TextAppearance.MaterialComponents.Body2_Thin" parent="TextAppearance.MaterialComponents.Body2">
    <item name="android:textSize">12sp</item>
  </style>

And apply it with:

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

View more solutions