Chips component in android support library?

Question

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.

Answer 1

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:

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.