'Is it possible to set Material ChipGroup orientation to VERTICAL?

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.



Solution 1:[1]

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

Solution 2:[2]

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.

Solution 3:[3]

<?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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ahmed Nafea
Solution 2 Michael Zur
Solution 3 KGeeks