7

I'm adding a material ChipGroup dynamically to a parent linear layout which is set to VERTICAL orientation but the chip items seem to be added horizontally. Is there any way to make it lay out the chip items vertically?

setLayoutDirection() method of ChipGroup class method doesn't seem to take any parameter that supports VERTICAL orientation.

Gabriele Mariotti
  • 320,139
  • 94
  • 887
  • 841
Niaz Ahmed
  • 220
  • 2
  • 12

4 Answers4

7

you can set width = match_parent in each Chip item

<com.google.android.material.chip.ChipGroup
        android:id="@+id/chipGroup"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="24dp"
        android:layout_marginTop="20dp"
        android:layout_marginEnd="24dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/questionTxt">

        <com.google.android.material.chip.Chip
            android:id="@+id/opt1"
            style="@style/Widget.MaterialComponents.Chip.Choice"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Fire" />

        <com.google.android.material.chip.Chip
            android:id="@+id/opt2"
            style="@style/Widget.MaterialComponents.Chip.Choice"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Water" />

        <com.google.android.material.chip.Chip
            android:id="@+id/opt3"
            style="@style/Widget.MaterialComponents.Chip.Choice"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Psychic" />

        <com.google.android.material.chip.Chip
            android:id="@+id/opt4"
            style="@style/Widget.MaterialComponents.Chip.Choice"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Psychic" />
    </com.google.android.material.chip.ChipGroup>

final layout

Ahmed Nafea
  • 81
  • 1
  • 3
3

You can set chipSpacingHorizontal parameter to a high value greater than an assumed screen width to vertically align ChipGroup items.
In a ChipGroup layout:

app:chipSpacingHorizontal="3000dp"

Dynamically:

chipGroup.setChipSpacingHorizontal(3000);

Here I use 3000 as a random high number that I believe is greater than the screen width. It could be any other number.

Michael Zur
  • 915
  • 1
  • 6
  • 14
1

No, it's not possible using ChipGroup. ChipGroup extends a simple FlowLayout, which was designed to layout items side to side (and then in another line). You can find ChipGroup here: https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/chip/ChipGroup.java

FlowLayout is not that complex. If I were you, I would just copy the sources and modify FlowLayout.onLayout() to layout children vertically. If you don't need extra features (like selection tracking), you can just use FlowLayout without modifying ChipGroup. If you need a really simple stack of chips, you can simply use a vertical LinearLayout.

Zielony
  • 16,239
  • 6
  • 34
  • 39
  • Alternatively, you could include https://github.com/google/flexbox-layout in your project and use a `FlexboxLayout` with many `Chip` children; FlexboxLayout is a more-powerful FlowLayout that allows you to specify orientation. – Ben P. Feb 06 '19 at 23:32
  • @Zielony thanks. I looked up the sources of ChipGroup. I'd apply your suggestion – Niaz Ahmed Feb 09 '19 at 20:09
  • @BenP. Never used FlexBoxLayout before. Seems useful. Will try that in future. – Niaz Ahmed Feb 09 '19 at 20:12
-1
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.chip.ChipGroup
        android:id="@+id/chipsGrp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/screen_pd"
        android:padding="@dimen/screen_pd"
        app:chipSpacing="@dimen/screen_pd"
        app:singleSelection="true" />

</ScrollView>

Inclose your ChipGroup within Scrollview

KGeeks
  • 173
  • 6