CODEWITHSUNDEEP
androidandroid-layoutandroid-chips
M_droid
M_droid

Reputation: 2778

Android how to center align chips in chipgroup?

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

Upvotes: 42

Views: 17307

Answers (8)

Binyamin Robbins
Binyamin Robbins

Reputation: 77

  1. Set the width of "com.google.android.material.chip.ChipGroup" to wrap_content ; "match_parent" won't work.

  2. Set the width of each individual chip to "match_parent"

  3. Bonus - to add space between chips add the "app:chipSpacingHorizontal="20dp"" or "app:chipSpacingVertical="20dp"" attribute to the ChipGroup widget.

Upvotes: 1

gorilla_glue
gorilla_glue

Reputation: 355

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.

Upvotes: 6

Ebrahim Byagowi
Ebrahim Byagowi

Reputation: 11228

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.

Upvotes: 24

Sardorbek Muhammadjonov
Sardorbek Muhammadjonov

Reputation: 181

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.

Upvotes: 2

alierdogan7
alierdogan7

Reputation: 840

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>

Upvotes: 6

Daxesh Vekariya
Daxesh Vekariya

Reputation: 581

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

Upvotes: 1

AtHul Antony
AtHul Antony

Reputation: 77

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.

Upvotes: -6

Utkarsha Ingle
Utkarsha Ingle

Reputation: 5

Please try following :

layout_gravity="center"

Hope this will help you.

Upvotes: -15

Related Questions