Chips component in android support library? [closed]

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.

Answer 2

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

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