31

This material design show case says about chips component. But I couldn't find example code of this component?

How can I use it?

please show me XML code and java code.

Anoop M Maddasseri
  • 10,213
  • 3
  • 52
  • 73
Knowledge Drilling
  • 986
  • 1
  • 8
  • 22

3 Answers3

55

You do not need to use a 3rd party library to make chips.

A chip is basically a TextView with a rounded background. You can add a delete button and an ImageView also to create a view such as the one used for Google contacts.

For the purposes of the example I will only use a simple TextView. First create the UI for the chip.

-> shape_chip_drawable.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <solid android:color="@color/colorPrimary" />

    <padding
        android:bottom="12dp"
        android:left="12dp"
        android:right="12dp"
        android:top="12dp" />

    <corners android:radius="30dp" />
</shape>

In your activity layout file, just define this drawable resource file as the TextView background like this:

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:background="@drawable/shape_chip_drawable"
    android:text="Hello, I'm a simple Chip!"
    android:textColor="@android:color/white"
    android:textStyle="bold" />

This is the view which is created:

Chip view created

Now we can use HorizontalScrollView to display a row of chips (like GooglePlay application) or use StaggeredGridLayoutManager to build a staggered grid of chips.

[EDIT]

If you want to show the chips as a FlowLayout, which is not inherently supported in Android, we need to use a Library. Don't worry, its a very small change.

You have add the following line to your Gradle depencencies:

compile 'com.xiaofeng.android:flowlayoutmanager:1.2.3.2'

and set your recycler view layout manager with it:

recyclerView.setLayoutManager(new FlowLayoutManager());

Additional details here on GitHub

Have a great day! Do upvote if it helps.

TheIT
  • 11,919
  • 4
  • 64
  • 56
Ankit Aggarwal
  • 2,367
  • 24
  • 30
4

Try this library: https://github.com/klinker41/android-chips

Check the sample to get the feel for how to use it.

razzledazzle
  • 6,900
  • 4
  • 26
  • 37
  • 11
    It looks like 3rd party library which is not made by google. where is original chips library from Android material design. – Knowledge Drilling Apr 12 '16 at 08:48
  • It's based on the Google's source for AOSP messenger. If it works use it. Material specs are only specs, it's not guaranteed that Google will prepare first party solution for every component. – razzledazzle Apr 12 '16 at 09:17
  • 3
    see this [answer](http://stackoverflow.com/a/22243669/6561141). It's actually from google! – mrtpk Sep 13 '16 at 08:50
  • Check out my answer for an approach without 3rd party library. – Ankit Aggarwal Jan 22 '17 at 15:04
  • 1
    There is an official `Chip` implementation but it's in alpha atm (see https://material.io/components/android/catalog/chip/ and https://developer.android.com/topic/libraries/support-library/revisions.html), it'll be released in version 28.0.0 of the design support library. – Franco Mar 23 '18 at 02:01
  • **AndroidX** https://github.com/karanatwal/MaterialChipsInput – karanatwal.github.io Apr 12 '19 at 11:31
4

I know i'm late but this can help other people. I really like this implementation also https://github.com/robertlevonyan/materialChipView. This lib requires atleast com.android.support:appcompat-v7:25.2.0 of the support library. I use it with this layout manager https://github.com/BelooS/ChipsLayoutManager. Check these out and see if they meet your requirements.

niinyarko
  • 466
  • 6
  • 11