Adding horizontal scrolling to chip group in Relative layout

Question

I created few static chips in a group. I'm using this link (https://material.io/design/components/chips.html#) as reference. Code is as given below:

<RelativeLayout
        android:id="@+id/inputLayout"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_alignParentBottom="true"
        android:background="@android:color/white"
        android:gravity="bottom"
        android:paddingStart="8dp"
        android:paddingTop="8dp"
        android:paddingEnd="8dp"
        android:paddingBottom="9dp">

        <ImageView
            android:id="@+id/sendBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:paddingTop="4dp"
            app:srcCompat="@drawable/chatbot_send_btn" />

        <EditText
            android:id="@+id/queryEditText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_toStartOf="@+id/sendBtn"
            android:imeOptions="actionSend"
            android:inputType="text"
            android:paddingTop="4dp"
            android:textSize="18sp" />

        <com.google.android.material.chip.ChipGroup
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:layout_above="@id/queryEditText">

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

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

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

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

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

            <com.google.android.material.chip.Chip
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="wsfdsd" />

        </com.google.android.material.chip.ChipGroup>

    </RelativeLayout>  

This doesn't display all chips, it displays only 1 chip. How can I add hoizontal scrolling? do I need to display chips dynamically so that I can add horizontal scrolling?

Answer 1

just put on horizontalScrollView and set android:scrollbars="none"

   <HorizontalScrollView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scrollbars="none">

            <com.google.android.material.chip.ChipGroup
                android:id="@+id/chipsPrograms"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:layout_marginBottom="8dp"
                android:paddingStart="8dp"
                android:paddingEnd="8dp"
                app:chipSpacing="8dp"
                app:singleSelection="true" />
        </HorizontalScrollView>

Answer 2

You can put the ChipGroup inside an HorizontalScrollView