Search code examples
androidmaterial-designandroid-viewmaterial-components-androidandroid-chips

Extra space on top and bottom of android Chip material component


I'm using Chip view in my layout
Since upgraded material design component from 1.0.0 to 1.1.0, there is an extra space at the top and bottom of view
I couldn't find any document about how to remove these spaces

In material 1.0.0

enter image description here

In material 1.1.0

enter image description here

<com.google.android.material.chip.Chip
    style="@style/Widget.MaterialComponents.Chip.Action"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    android:text="Groceries"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

Solution

  • It is related to the chipMinTouchTargetSize attribute.
    You can find in the Chip source code:

    if (shouldEnsureMinTouchTargetSize()) {
      setMinHeight(minTouchTargetSize);
    }
    

    You can change the chipMinTouchTargetSize in the layout or in the style:

        <com.google.android.material.chip.Chip
            app:chipMinTouchTargetSize="32dp"
            ../>
    

    or you can set app:ensureMinTouchTargetSize="false".

    enter image description here

    Pay attention to change this value since it changes the minimum touch target size.