Interesting library which shows the list of selectable contacts, in quite a fancy way. It also contains Android ChipView and EditText. Among other options, it’s possible to add avatar icon, make view deletable, change background colour, or enable/disable touching a chip which open a full detailed view.
ChipsInput and ChipView.
This view implements the Material Design Contact chips component.
It is composed of a collection of chips (ChipView) and an input (EditText). Touching a chip open a full detailed view (if non disable). The GIF above describes the behavior of the ChipsInput view.
But everything is configurable (optional avatar icon, optional full detailed view, …) so you can use the ChipsInput view for non contact chips.
Demo
Setup
To use this library your minSdkVersion must be >= 15.
In your project level build.gradle
allprojects {
repositories {
...
maven { url "https://jitpack.io" }
}
}
In your app level build.gradle :
dependencies {
compile 'com.github.pchmn:MaterialChipsInput:1.0.4'
}
Basic Usage
XML
Use the ChipsInput view in your layout with default options :
<com.pchmn.materialchips.ChipsInput
android:id="@+id/chips_input"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:hint="Enter a name" />
You can also customize it (see all attributes) :
<com.pchmn.materialchips.ChipsInput
android:id="@+id/chips_input"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:hint="Enter a name"
app:hintColor="@color/customColor"
app:textColor="@color/customColor"
app:maxRows="3"
app:chip_labelColor="@color/customColor"
app:chip_hasAvatarIcon="true"
app:chip_backgroundColor="@color/customColor"
app:chip_deletable="false"
app:chip_deleteIconColor="@color/customColor"
app:chip_detailed_textColor="@color/customColor"
app:chip_detailed_backgroundColor="@color/customColor"
app:chip_detailed_deleteIconColor="@color/customColor"
app:filterable_list_backgroundColor="@color/customColor"
app:filterable_list_textColor="@color/customColor" />
Suggestions
You can pass a List<? extends ChipInterface> object, which represents your suggestions, to the ChipsInput view, so it will work as a MultiAutoCompleteTextView :
1. Create a class that implements ChipInterface (or use directly the Chip class included in the library) :
public class ContactChip implements ChipInterface {
...
}
2. Then in your activity, or anything else, build your suggestion list of ContactChip (or Chip) and pass it to the ChipsInput view :
ChipsInput chipsInput = (ChipsInput) findViewById(R.id.chips_input);
// build the ContactChip list
List<ContactChip> contactList = new ArrayList<>();
contactList.add(new ContactChip());
...
// pass the ContactChip list
chipsInput.setFilterableList(contactList);
Get the selected list
When you want you can get the current list of chips selected by the user :
List<ContactChip> contactsSelected = (List<ContactChip>) chipsInput.getSelectedChipList();
Advanced Usage
ChipsListener
The ChipsInput view provides a listener to interact with the input :
chipsInput.addChipsListener(new ChipsInput.ChipsListener() {
@Override
public void onChipAdded(ChipInterface chip, int newSize) {
// chip added
// newSize is the size of the updated selected chip list
}
@Override
public void onChipRemoved(ChipInterface chip, int newSize) {
// chip removed
// newSize is the size of the updated selected chip list
}
@Override
public void onTextChanged(CharSequence text) {
// text changed
}
});
Add and remove chips manually
You don’t have to pass a List<? extends ChipInterface> to the ChipsInput view and you can do the trick manually. Thanks to the ChipsListener you can be notified when the user is typing and do your own work.
ChipsInput chipsInput = (ChipsInput) findViewById(R.id.chips_input);
Add a chip
There are multiple implementations :
chipsInput.addChip(ChipInterface chip); // or chipsInput.addChip(Object id, Drawable icon, String label, String info); // or chipsInput.addChip(Drawable icon, String label, String info); // or chipsInput.addChip(Object id, Uri iconUri, String label, String info); // or chipsInput.addChip(Uri iconUri, String label, String info); // or chipsInput.addChip(String label, String info);
Remove a chip
There are multiple implementations :
chipsInput.removeChip(ChipInterface chip); // or chipsInput.removeChipById(Object id); // or chipsInput.removeChipByLabel(String label); // or chipsInput.removeChipByInfo(String info);
After you added or removed a chip the ChipsListener will be triggered.
Get the selected list
When you want you can get the current list of chips selected by the user :
List<ChipInterface> contactsSelected = chipsInput.getSelectedChipList();
ChipsInput attributes
app:hint |
string |
Hint of the input when there is no chip | null |
app:hintColor |
color |
Hint color | android default |
app:textColor |
color |
Text color when user types | android default |
app:maxRows |
int |
Max rows of chips | 2 |
app:chip_labelColor |
color |
Label color of the chips | android default |
app:chip_hasAvatarIcon |
boolean |
Whether the chips have avatar icon or not | true |
app:chip_deletable |
boolean |
Whether the chips are deletable (delete icon) or not | false |
app:chip_deleteIconColor |
color |
Delete icon color of the chips | white/black |
app:chip_backgroundColor |
color |
Background color of the chips | grey |
app:showChipDetailed |
boolean |
Whether to show full detailed view or not when touching a chip | true |
app:chip_detailed_textColor |
color |
Full detailed view text color | white/balck |
app:chip_detailed_backgroundColor |
color |
Background color of the full detailed view | colorAccent |
app:chip_detailed_deleteIconColor |
color |
Delete icon color of the full detailed view | white/black |
app:filterable_list_backgroundColor |
color |
Background color of the filterable list of suggestions | white |
app:filterable_list_textColor |
color |
Text color of the filterable list of suggestions | black |
ChipView
This view implements the chip component according to the Material Design guidelines with configurable options (background color, text color, …).
Usage
ChipView attributes
app:label |
string |
Label of the chip | null |
app:labelColor |
color |
Label color of the chip | android default |
app:hasAvatarIcon |
boolean |
Whether the chip has avatar icon or not | false |
app:avatarIcon |
drawable |
Avatar icon resource | null |
app:deletable |
boolean |
Whether the chip is deletable (delete icon) or not | false |
app:deleteIconColor |
color |
Delete icon color of the chip | grey |
app:backgroundColor |
color |
Background color of the chip | grey |
Listeners
Sample
A sample app with some use cases of the library is available on this link
You can also download the sample APK here
Download: https://github.com/pchmn/MaterialChipsInput
Nuur Hasan
Tell Me How
Share your thoughts