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.
Try this library:
Check the sample to get the feel for how to use it.
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 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.
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:
and set your recycler view layout manager with it:
Additional details here on GitHub
Have a great day! Do upvote if it helps.
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.