Android how to center align chips in chipgroup?

Question

I tried gravity="center" , foregroundGravity="center" and textAlignment="center" for ChipGroup in the XML file but it won't work. Any ideas?

This is how it looks now

Hi M_droid, can I know how to fix this one, I am also using ChipGroup where the chips need to be aligned at center, please help me. — Ram Koti, Sep 27 '18 at 17:52
Where is your code? What you have tried, which library? Please put all the details. — Pratik Butani, Feb 05 '19 at 08:47
Sorry, haven‘t had a chance to test one of the answers yet. Back then we stopped using chips and after a few months the project was canceled anyway. — M_droid, Jul 18 '19 at 10:45
@ladytoky0 no actually not.. Last thing I did was to use Flexbox like Ebrahim Byagowi suggested. Did `layout_width=wrap_content` work for you? — M_droid, Nov 26 '21 at 12:23

Ebrahim Byagowi · Accepted Answer · 2021-04-29T10:25:44.450

23

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>

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.

edited Apr 29 '21 at 10:25

answered Aug 16 '18 at 22:13

Ebrahim Byagowi

10,338
4
70
81

1

Thanks for the solution! – Yohann L. Aug 13 '19 at 15:25
1

I finally got around to check your answer and it works. But a solution without using flexbox would be better though. Anyway, for now I will accept yours. – M_droid Jun 05 '20 at 07:37

score 5 · Answer 2 · answered Jun 10 '19 at 15:14

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>

gorilla_glue · Answer 3 · 2021-12-28T23:17:09.517

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.

score 1 · Answer 4 · answered Aug 20 '18 at 04:56

1

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

answered Aug 20 '18 at 04:56

Daxesh V

571
6
12

1

Just copy paste their library description. You should put example with link. – Pratik Butani Feb 05 '19 at 08:46
Yes @PratikButani you can check example in the library. – Daxesh V Mar 08 '19 at 11:56
3

What if they will remove examples or removed this link? Thats why always put code with example so every one can understand. – Pratik Butani Mar 08 '19 at 12:51

score 1 · Answer 5 · answered Dec 24 '20 at 05:30

I'm writing thinking that it will help someone. I had a similar problem. But I had a single line. And I solved this problem in the following form

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <HorizontalScrollView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scrollbars="none"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent">

        <com.google.android.material.chip.ChipGroup
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingStart="@dimen/padding"
            android:paddingEnd="@dimen/padding"
            app:singleLine="true">

            <com.google.android.material.chip.Chip
                style="@style/Widget.MaterialComponents.Chip.Entry"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>

            <com.google.android.material.chip.Chip
                style="@style/Widget.MaterialComponents.Chip.Entry"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>

//          ...

         </com.google.android.material.chip.ChipGroup>
     </HorizontalScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>

I'm glad if I helped someone.

score 0 · Answer 6 · answered Jul 20 '22 at 13:30

Set the width of "com.google.android.material.chip.ChipGroup" to wrap_content ; "match_parent" won't work.
Set the width of each individual chip to "match_parent"
Bonus - to add space between chips add the "app:chipSpacingHorizontal="20dp"" or "app:chipSpacingVertical="20dp"" attribute to the ChipGroup widget.

score -6 · Answer 7 · answered Jul 26 '18 at 17:09

-6

Put the width of chip group into wrap_content and make the parent view to gravity to center which contains chip group. So that it will be aligned center.

answered Jul 26 '18 at 17:09

AtHul Antony

77
1
11

score -15 · Answer 8 · answered Jul 06 '18 at 06:27

-15

Please try following :

layout_gravity="center"

Hope this will help you.

answered Jul 06 '18 at 06:27

Utkarsha Ingle

5
2

Android how to center align chips in chipgroup?

8 Answers8

Linked