Android chips which are horizontally scrollable

Question

I need to implement a solution using android chips in a horizontally scrollable view. All the libraries I found use a multiline solution when having many chips to filter with. However I wish mine to be in a single line and scroll through its container.

I know that apps such as Pinterest already use this and concept, however I have no way how to go around it.

score 10 · Accepted Answer · answered Nov 05 '18 at 13:11

Try placing your ChipGroup inside of a HorizontalScrollView layout.

<HorizontalScrollView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content">

  <android.support.design.chip.ChipGroup
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <android.support.design.chip.Chip
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:chipText="This" />

    <android.support.design.chip.Chip
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:chipText="is" />

    // more chips...

  </android.support.design.chip.ChipGroup>
</HorizontalScrollView>

Thankfully since the question has been posted, Android have created the Chips in their design library and I was able to implement it through that. But thanks for your answer! — Michele La Ferla, Nov 05 '18 at 13:33

score 4 · Answer 2 · answered Aug 02 '19 at 10:42

use this to hide scrollbars

                <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="@dimen/text_margin"
                        android:paddingEnd="@dimen/text_margin"
                        app:chipSpacing="8dp"
                        app:singleSelection="true"/>
                </HorizontalScrollView>

score 2 · Answer 3 · answered Sep 12 '19 at 07:02

Try to place ChipGroup inside HorizontalScrollView

<HorizontalScrollView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content">

  <android.support.design.chip.ChipGroup
    android:id="@+id/chipGroup"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
</HorizontalScrollView>

And Then add chips to the ChipGroup dinamically

for(String string:set){
        Chip chip = new Chip(binding.chipGroup.getContext());
        LinearLayout.LayoutParams layoutParams= new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
        layoutParams.setMargins(5,5,5,5);
        chip.setLayoutParams(layoutParams);
        chip.setText(string);
        chip.setCloseIconEnabled(true);
        chip.setChipBackgroundColor(getResources().getColorStateList(R.color.colorChipIconTint));
        chip.setTextColor(getResources().getColorStateList(R.color.colorChipText));
        chip.setCloseIconTint(getResources().getColorStateList(R.color.colorChipCloseIcon));
        chip.setClickable(true);
        chip.setCheckable(false);
        binding.chipGroup.addView(chip );
        chip.setOnCloseIconClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //binding.chipGroup.removeView(v);
                setDataContainer.remove((String)((Chip)v).getText());
            }
        });

        chip.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(SMSHomeActivity.this,PhoneNumberActivity.class);
                ArrayList<GroupMobileNumberModel> groupMobileNumberModelList = (ArrayList<GroupMobileNumberModel>) PhoneNumberActivity.groupMobileNumberModelList();
                intent.putParcelableArrayListExtra("groupMobileNumberModelList",groupMobileNumberModelList);
                startActivity(intent);
            }
        });
    }

Rishi_Rich · Answer 4 · 2020-05-18T21:55:13.247

2

check out Nanochips for Android

chips layout example image link

Nanochips is a library for Android that provides a custom TextView allowing users to enter text and create material chips in the text field.

dependencies {
            implementation 'com.github.969rishi:nanochips:1.0.0'
    }

check out this library: https://github.com/969rishi/nanochips

edited May 18 '20 at 21:55

answered May 18 '20 at 21:49

Rishi_Rich

21
3

score 1 · Answer 5 · answered Nov 08 '19 at 14:25

You need to add your ChipGroup in a HorizontalScrollView and then use app:singleLine="true" in your ChipGroup attributes.

<HorizontalScrollView
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
  <com.google.android.material.chip.ChipGroup
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      app:singleLine="true">

    <!-- Chips can be declared here, or added dynamically. -->

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

Android chips which are horizontally scrollable

5 Answers5