Android how to center align chips in chipgroup?

If you have your ChipGroup in a ConstraintLayout, use

app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"

as such:

<com.google.android.material.chip.ChipGroup
        android:id="@+id/chips"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
...

Be sure not to set the layout_width field to be match_parent, as it wouldn't work that way.


I tried using Chip inside Flexbox and it worked like this.

<com.google.android.flexbox.FlexboxLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="horizontal"
        app:flexWrap="wrap"
        app:justifyContent="center"> ... </com.google.android.flexbox.FlexboxLayout>

enter image description here

There should be better ways for achieving this but this will work there I guess.

Update (2021): I removed flexbox dependency due to stability and lack of updates from Google and am achieving the same effect using ConstraintLayout's Flow nowadays, anyone using the technique perhaps can consider that also, have a look at https://stackoverflow.com/a/61545990 to fill it programmatically.


Put it into a LinearLayout and make its gravity "center_horizontal". Then set the chip group's layout_width to "wrap_content". This worked for me.

    <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:gravity="center_horizontal">


                <com.google.android.material.chip.ChipGroup
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/langsChipGroup"
                    >

                </com.google.android.material.chip.ChipGroup>

</LinearLayout>

This library is help you for figure out your query. please check it.and let me know your thoughts for the same.

The ChipCloud library was originally a (very) quickly knocked up Android view for some larger hackathon project by fiskurgit. It creates a wrapping cloud of material ' Chips'. Basic demo of their version is available on the Play Store - I'm maintaining this fork for features I required in it.

Chip Cloud View