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?

According to material guidelines, choice chips can scroll horizontally. Do I need to add that chip group to `horizontal scrollview`? — Ajay Kulkarni, Jan 04 '19 at 07:32
From the docs: "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." https://developer.android.com/reference/com/google/android/material/chip/ChipGroup Maybe give it a go and see what happens :) — Zee, Jan 04 '19 at 07:33
I added `app:singleLine` attribute as you suggested, it is in single line now, but no horizontal scrolling — Ajay Kulkarni, Jan 04 '19 at 07:37
I already added horizontal scrolling, code is in this link: https://codeshare.io/anYAp1. Resulting UI is in this link: https://cdn1.imggmi.com/uploads/2019/1/4/ca1892f6995fc6f8079b907899388542-full.png. It is messed up. — Ajay Kulkarni, Jan 04 '19 at 07:46
Hmm, I think you are supposed to set the width to wrap_content, I'm not too sure... What exactly is messed up? Is it because it overlaps with the send arrow? Does it scroll? — Zee, Jan 04 '19 at 07:49
Hmm... I fixed it by adding `android:layout_alignParentBottom="true"` attribute to `HorizontalScrollView`. Thank you :) — Ajay Kulkarni, Jan 04 '19 at 07:55

score 32 · Answer 1 · answered Aug 02 '19 at 14:05

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>

score 17 · Answer 2 · answered Jan 04 '19 at 07:36

17

You can put the ChipGroup inside an HorizontalScrollView

answered Jan 04 '19 at 07:36

Jassem Ben Hamida

524
2
8

I added it under `horizontalscrollview`, UI is kinda messed up now, https://cdn1.imggmi.com/uploads/2019/1/4/ca1892f6995fc6f8079b907899388542-full.png – Ajay Kulkarni Jan 04 '19 at 07:53
1

I fixed it by adding android:layout_alignParentBottom="true" attribute to HorizontalScrollView. Thank you :) – Ajay Kulkarni Jan 04 '19 at 07:56

Adding horizontal scrolling to chip group in Relative layout

2 Answers2