Chip Group Second Row Overlaps

Right now I have a chip group with 4 chips and it is on the right size of a layout (meaning it doesn’t get the entire screen width), when the text in the fourth chip gets too long it moves it to the next row.
I added this code:

app:chipMinTouchTargetSize="0dp"

To make the space in between the chips smaller because before the space was really big, but now the space is too small. The padding or margins don’t work either, but I could be doing something wrong.

<LinearLayout
        android:layout_width="312dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="1dp"
        android:layout_marginStart="15dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/line2">

        <com.google.android.material.chip.ChipGroup
            android:layout_width="300dp"
            android:layout_marginBottom="0dp"
            app:layout_constraintBottom_toTopOf="@+id/line2"
            android:layout_height="match_parent">

            <com.google.android.material.chip.Chip
                android:id="@+id/tag1"
                style="@style/Colors_Widget.MaterialComponents.Chip.Choice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="2dp"
                android:text="Tag1"
                android:textSize="11sp"
                app:chipMinTouchTargetSize="0dp" />

            <com.google.android.material.chip.Chip
                android:id="@+id/tag2"
                style="@style/Colors_Widget.MaterialComponents.Chip.Choice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="2dp"
                android:text="Tag2"
                android:textSize="11sp"
                app:chipMinTouchTargetSize="0dp" />

            <com.google.android.material.chip.Chip
                android:id="@+id/tag3"
                style="@style/Colors_Widget.MaterialComponents.Chip.Choice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="2dp"
                android:text="Tag3"
                android:textSize="11sp"
                app:chipMinTouchTargetSize="0dp" />

            <com.google.android.material.chip.Chip
                android:id="@+id/tag4"
                style="@style/Colors_Widget.MaterialComponents.Chip.Choice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:text="Tag4"
                android:textSize="11sp"
                app:chipMinTouchTargetSize="0dp" />
        </com.google.android.material.chip.ChipGroup>
    </LinearLayout>
</LinearLayout>

Picture of my chip group

Source: Android Questions

LEAVE A COMMENT