Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 763
M_droid Avatar asked Jul 05 '18 20:07

M_droid


People also ask

What is a chipgroup and how do I use it?

A ChipGroup is used to hold multiple Chip s. By default, the chips are reflowed across multiple lines. Set the app:singleLine attribute to constrain the chips to a single horizontal line. If you do so, you'll usually want to wrap this ChipGroup in a HorizontalScrollView . ChipGroup also supports a multiple-exclusion scope for a set of chips.

How do I constrain a chipgroup to a single line?

com.google.android.material.chip.ChipGroup. A ChipGroup is used to hold multiple Chips. By default, the chips are reflowed across multiple lines. Set the app:singleLine attribute to constrain the chips to a single horizontal line. If you do so, you'll usually want to wrap this ChipGroup in a HorizontalScrollView.

Should I wrap a chipgroup in a horizontalscrollview?

If you do so, you'll usually want to wrap this ChipGroup in a HorizontalScrollView . ChipGroup also supports a multiple-exclusion scope for a set of chips. When you set the app:singleSelection attribute, checking one chip that belongs to a chip group unchecks any previously checked chip within the same group.

How to center a chip group in the viewport?

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. Show activity on this post.


Video Answer


2 Answers

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.

like image 119
Ebrahim Byagowi Avatar answered Oct 17 '22 03:10

Ebrahim Byagowi


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>
like image 5
alierdogan7 Avatar answered Oct 17 '22 02:10

alierdogan7