Search code examples
androidandroid-chips

(android) How to fill the Chip's area?

enter image description here

I want to know how to fill the background of Chip in ChipGroup.

Looking at the picture, you can see that the background is not full.

It's a round gray area that surrounds the text, not the square part.

The strange thing is that i set the width to be the same in XML.

As far as I can predict, the background size seems to be affected by the size or number of characters.

But what I want is that even though the number of characters is different, the background size is constant.

(Ps. This ChipGroup run on DialogFragment)

Here is XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:Chip="http://schemas.android.com/tools">
    <HorizontalScrollView
        android:id="@+id/horizontal_scroll"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toTopOf="@id/routine_list_recycler"
        android:scrollbars="none"
        android:overScrollMode="never">
        <com.google.android.material.chip.ChipGroup
            android:id="@+id/routine_chipgroup"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="10dp"
            app:chipSpacingHorizontal="10dp"
            app:singleLine="true"
            app:singleSelection="true">
            <com.google.android.material.chip.Chip
                style="@style/Widget.MaterialComponents.Chip.Choice"
                android:layout_width="55dp"
                android:layout_height="wrap_content"
                android:textAlignment="center"
                android:gravity="center_horizontal"
                android:text="A" />
            <com.google.android.material.chip.Chip
                style="@style/Widget.MaterialComponents.Chip.Choice"
                android:layout_width="55dp"
                android:layout_height="wrap_content"
                android:textAlignment="center"
                android:gravity="center_horizontal"
                android:text="BBB" />

            <com.google.android.material.chip.Chip
                style="@style/Widget.MaterialComponents.Chip.Choice"
                android:layout_width="55dp"
                android:layout_height="wrap_content"
                android:textAlignment="center"
                android:gravity="center_horizontal"
                android:text="CCC" />
            <com.google.android.material.chip.Chip
                style="@style/Widget.MaterialComponents.Chip.Choice"
                android:layout_width="55dp"
                android:layout_height="wrap_content"
                android:textAlignment="center"
                android:gravity="center_horizontal"
                android:text="DDD" />
            <com.google.android.material.chip.Chip
                style="@style/Widget.MaterialComponents.Chip.Choice"
                android:layout_width="55dp"
                android:layout_height="wrap_content"
                android:textAlignment="center"
                android:gravity="center_horizontal"
                android:text="EEE" />
            <com.google.android.material.chip.Chip
                style="@style/Widget.MaterialComponents.Chip.Choice"
                android:layout_width="55dp"
                android:layout_height="wrap_content"
                android:textAlignment="center"
                android:gravity="center_horizontal"
                android:text="FFF" />
            <com.google.android.material.chip.Chip
                style="@style/Widget.MaterialComponents.Chip.Choice"
                android:layout_width="55dp"
                android:layout_height="wrap_content"
                android:textAlignment="center"
                android:gravity="center_horizontal"
                android:text="GGG" />
        </com.google.android.material.chip.ChipGroup>
    </HorizontalScrollView>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/routine_list_recycler"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/horizontal_scroll" />
</androidx.constraintlayout.widget.ConstraintLayout>
Solution

  • Have you tried this

    android:chipBackgroundColor="?attr.colorPrimary"

      <com.google.android.material.chip.Chip
                android:chipBackgroundColor="?attr.colorPrimary"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="XYZ" />