Google’s material design has been evolving year by year. At first when Material Design was introduced a lot of new components were listed in its documentation. But their implementation or official widgets were not released at that time. But with every support library release, few new significant components are released. With this year’s Google I/O, Androidx was released as a new implementation for Android’s support library framework, along with this a new material design component library was also released. As I mentioned above a few new components were released this year too, one of them is Android Chip. This new Android chips widget is now a part of design support library v28 and has also been introduced in this new material design component library 1.0.0. This library has many components but in this article we will be discussing on Android chips only and how to make an Android chips example, via the new Material Component library.
Android Pill button or chips have always been a part of our apps. One way or the other building a button like a pill has never been a difficult task for us. But now that Google has officially released a widget by the name of Chips, it will definitely make our lives easier to some level. In this Android chips example we would learn how to make an android chip button which looks like a pill shaped interact-able element. Please note: To make use of this example, you might have to switch over to AndroidX and com.google.android.material packages by refactoring from the Refactor menu of the Android Studio, as the new material library does not work with old support packages. If you wish to use old support libraries for the time being, please use the v28 of it. It has the Chip widget.
Exploring Material Design : Android Chips Example
Generally Android chips are used to capture user input, filter content, trigger actions and simply to make a selection from a choice of options. It should not be used in a situation where a single call to action has to be performed. One of the most obvious example of Android Chips, that you must have seen, should be the Gmail app. In Gmail app when an email address is entered, it is shown in an Android Chip like view. If you wish to make a UI element which looks like the gmail email address pill button type view, you should use the Android Chip widget. To start with the implementation part, first you would have to include the following dependency in your gradle file:
dependencies {
implementation 'com.google.android.material:material:1.0.0'
}Using Android Chips with Styles
In simple terms Android Chip is just a combined object of text, icon and optional close icon. With this, the new material design component also gives us a few new attributes to change its appearance and behavior. It allows us to make it represent an attribute, text, entity, or perform an action. This eventually allows the user to trigger an action, filter content, select a choice, or enter information. Also if you have to represent a contact with image, this Android chip can be of good use. To have a more detailed look at the chips, lets have a look at its styles.
Action Chip (Default)
The most basic chip of all the available ones is the Action chip. Its a single actionable chip, in short its an alternative to the button widget. If you have to perform an action, based on users tap, this is the chip that you should use. Generally this type of chip is placed after the content of the page and is used as a clickable, just like a button. Have a look at the images below to understand its usage.
To make a working example of Android action chip, you can either define it in the XML or you can insert it dynamically by Java/Kotlin code. In this Android chips example, we will do so by XML and will use its properties in Java code. Please have a look below:
<com.google.android.material.chip.Chip
android:id="@+id/action_chip"
style="@style/Widget.MaterialComponents.Chip.Action"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/action_chip_txt"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:padding="10dp"
android:text="Hello World"
app:chipIcon="@drawable/ic_android_24dp"
app:iconStartPadding="5dp"/>In the above code, please see that we have defined a style tag style="@style/Widget.MaterialComponents.Chip.Action". This is used to define the style for action chip, but in case if this is missing, it would still render an Android chip with ‘Action’ style. As this is also the default style. Moving ahead, to capture this Android chip’s click event, we use this piece of code:
Chip actionChip = findViewById(R.id.action_chip);
actionChip.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Log.i(TAG, "Clicked action chip");
}
});Entry Chip (Input Chip)
Another type of chip is the input one, this chip used display captured user input in a non editable format. Its a very nice way to showcase the user input. One of the most obvious usages of Android Entry chip is shown in the gmail app. Particularly the email input experience- when an email is entered by the user, it is showcased as an entry chip, sort of a pill shaped layout. Now according to the material design this element should be an Android Chip with style as ‘Entry’. This chip can also have a close icon along with a chip icon. Generally this type of chip is contained in a
In case of Android entry chips, in the XML we will create an empty ChipGroup and add chips programmatically. Lets have a look at the layout.xml of the activity:
<com.google.android.material.chip.ChipGroup
android:id="@+id/entry_chip_group"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/entry_chip_txt">
</com.google.android.material.chip.ChipGroup>Now since we will be adding chips dynamically through code, a big challenge would be to maintain style along the chips. As per my understanding to maintain consistent styles there are two ways, either by code we style it and use in a loop. Or we create a standard chip style in XML and use it across. Interestingly Android Chips widget also supports a ChipDrawable object can be created by using an XML resource. Therefore as per the principle I like this way better, have a look at my chip style which I used to inject a chip in ChipGroup :
<chip
style="@style/Widget.MaterialComponents.Chip.Entry"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:checkable="false"
app:chipIcon="@drawable/ic_android_24dp"
app:iconStartPadding="5dp"/>Next to create an Input Chip dynamically we need to define a method :
private Chip getChip(final ChipGroup entryChipGroup, String text) {
final Chip chip = new Chip(this);
chip.setChipDrawable(ChipDrawable.createFromResource(this, R.xml.my_chip));
int paddingDp = (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, 10,
getResources().getDisplayMetrics()
);
chip.setPadding(paddingDp, paddingDp, paddingDp, paddingDp);
chip.setText(text);
chip.setOnCloseIconClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
entryChipGroup.removeView(chip);
}
});
return chip;
}And this is how an Android Entry Chip is inserted in the chip group:
final ChipGroup entryChipGroup = findViewById(R.id.entry_chip_group); final Chip entryChip = getChip(entryChipGroup, "Hello World"); final Chip entryChip2 = getChip(entryChipGroup, "Test"); entryChipGroup.addView(entryChip); entryChipGroup.addView(entryChip2);
Filter Chip
These type of chips should be used in situations exactly as its name suggests, i.e. for creating filters. Android filter chips are similar to check boxes, in a way they should be used to filter the content. For example if you have to show a UI where there’s a list and user has to filter a specific type of content from it, in this situation a filter chip would be an apt solution. Generally filter chips do not have a icon attached to them, as a check icon is displayed once a chip is selected. Please have a look at the images below:
Further lets define the XML for Android Filter Chips, they have style="@style/Widget.MaterialComponents.Chip.Filter" :
<com.google.android.material.chip.ChipGroup
android:id="@+id/filter_chip_group"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/filter_chip_txt">
<com.google.android.material.chip.Chip
android:id="@+id/filter_chip"
style="@style/Widget.MaterialComponents.Chip.Filter"
android:layout_width="wrap_content"
android:layout_height="35dp"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:text="Dogs"/>
<com.google.android.material.chip.Chip
android:id="@+id/filter_chip2"
style="@style/Widget.MaterialComponents.Chip.Filter"
android:layout_width="wrap_content"
android:layout_height="35dp"
android:text="Cats"/>
</com.google.android.material.chip.ChipGroup>Now that we have filter chips in place, we need to detect clicks on the filter chips. We can do so simply by attaching a OnCheckedChangeListener to it:
ChipGroup filterChipGroup = findViewById(R.id.filter_chip_group);
Chip filterChip = findViewById(R.id.filter_chip);
Chip filterChip2 = findViewById(R.id.filter_chip2);
CompoundButton.OnCheckedChangeListener filterChipListener = new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
Log.i(TAG, buttonView.getId() + "");
}
};
filterChip.setOnCheckedChangeListener(filterChipListener);
filterChip2.setOnCheckedChangeListener(filterChipListener);Filter Chip – Single Selection Mode
In this Android Chips Example, I will also show a filter chip with single selection mode. In this mode, filter chips would start acting as a radio button. This means in a way only one selection can be made at a time. This functionality is achieved by adding all the filter chips in a ChipGroup and setting the property : app:singleSelection="true" of Chip Group. To have a better understanding, lets have a look at the layout XML file:
<com.google.android.material.chip.ChipGroup
android:id="@+id/filter_chip_SS_group"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/filter_chip_ss_txt"
app:singleSelection="true">
<com.google.android.material.chip.Chip
android:id="@+id/filter_ss_chip"
style="@style/Widget.MaterialComponents.Chip.Filter"
android:layout_width="wrap_content"
android:layout_height="35dp"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:text="Dogs"/>
<com.google.android.material.chip.Chip
android:id="@+id/filter_ss_chip2"
style="@style/Widget.MaterialComponents.Chip.Filter"
android:layout_width="wrap_content"
android:layout_height="35dp"
android:text="Cats"/>
</com.google.android.material.chip.ChipGroup>Next to capture the selected chip out of all chips, we need to attach a ChipGroup.OnCheckedChangeListener() on the ChipGroup.
ChipGroup filterChipGroupSingleSelection = findViewById(R.id.filter_chip_SS_group);
filterChipGroupSingleSelection.setOnCheckedChangeListener(new ChipGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(ChipGroup group, @IdRes int checkedId) {
// Handle the checked chip change.
Log.i(TAG, "ID: " + group.getCheckedChipId());
}
});Please Note: This ChipGroup.OnCheckedChangeListener() would return callbacks only when single selection mode is set to true.
Choice Chip
A perfect example of choice chip is similar to the filter chip one. Choice chip allows the user to select only one of the available options just like the filter chips. But with one difference, it does not have a check icon on it. Instead according to material design guidelines, it displays the selection with a change of color, when it is selected. If you wish you can use a chipIcon with this chip. But ideally they should be used wherever you feel the need to show RadioButton. Lets have a look at the UI for Android Choice Chip:
To use the choice chip, we use style="@style/Widget.MaterialComponents.Chip.Choice" parameter in the XML. Lets have a look at the XML:
<com.google.android.material.chip.ChipGroup
android:id="@+id/choice_chip_group"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/choice_chip_txt"
app:singleSelection="true">
<com.google.android.material.chip.Chip
android:id="@+id/choice_chip"
style="@style/Widget.MaterialComponents.Chip.Choice"
android:layout_width="wrap_content"
android:layout_height="35dp"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:text="Cars"/>
<com.google.android.material.chip.Chip
android:id="@+id/choice_chip2"
style="@style/Widget.MaterialComponents.Chip.Choice"
android:layout_width="wrap_content"
android:layout_height="35dp"
android:text="Trucks"/>
</com.google.android.material.chip.ChipGroup>As shown in this Android Chips Example earlier, ChipGroup can return the selected chip only when single selection mode is set to true. Even here we will utilize the same property and capture the selection:
ChipGroup choiceChipGroup = findViewById(R.id.choice_chip_group);
choiceChipGroup.setOnCheckedChangeListener(new ChipGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(ChipGroup chipGroup, @IdRes int i) {
Log.i(TAG, i + "");
}
});If you wish to have a look at all the working sample of the Android Chip types mentioned above, please have a look at the full source code here:
In this Android Chips Example, as you can see we built a working sample of all the chip styles, by using the latest Google’s material library. Here in this tutorial we also showcased, that a chip has the properties of a radio button as well as a check box. In a way its a better representation of both. You can use it either in a single selection or in multiple selection mode. Both ways it would give a great experience. As the Android Chips are compact, relevant and focused. Hope this example made you understand things better, for latest news on Android connect with us on Twitter, Facebook and Google+. Also subscribe to our newsletter, for news right in your inbox.
Born in New Delhi, India. A software engineer by profession, an android enthusiast and an evangelist. My motive here is to create a group of skilled developers, who can develop something new and good. Reason being programming is my passion, and also it feels good to make a device do something you want. In a very short span of time professionally I have worked with many tech firms. As of now too, I am employed as a senior engineer in a leading tech company. In total I may have worked on more than 20 projects professionally, and whenever I get spare time I share my thoughts here at Truiton.
