Building Android Chips

Android development is weird in that Google gives you all these guidelines that we developers and designers should follow like the Material Design , but doesn’t provide the tools necessary for us to easily implement these designs.

The Android Chip is one material design component that Google doesn’t provide an easy way to implement. Yeah, those chips with the profile photo and the user’s name/email that you might see in the Gmail app and other apps that follow the Material Design guidelines.

Ideally, the Android SDK should provide an easy to use support library and a View so that we can implement these chips within a few minutes. Something like this will make me happy.

Unfortunately we have to implement our own. There have been attempts by third party libraries to solve this Chip problem but all of them expect a certain layout and requirements. Thus, they are not very flexible. To have a flexible Chip, we need to implement our own.

So… just like many of my other posts where I try to make other Android developer’s lives easier, I’ll just copy and paste the chip layout that I’ve built and use whenever I need to use a chip. Keep in mind that this layout needs some sort of library for Circular Image Views. I like to use this one https://github.com/hdodenhof/CircleImageView

At any rate, the code is below for building out a Chips layout that you can include and reuse anywhere throughout your codebase.

chips_view.xml
Do replace that @drawable/ic_person_24dp in the CircleImageView with whatever default image your app requires.

shape_chip_icon_drawable.xml
You can now sprinkle your chips_view.xml throughout your layouts and they should work once you wire up the views properly in your activities and fragments.

The end result will look like

Cool yeah?

About the Author Chris Jeon

Software developer currently focusing on Android development.