One of the cool widgets that you can use with the Material Design Components library is a Chip. A Chip is a component that can represent input, filter, choice or action of a user.
To use Chips, your project needs to have material components dependency.
|
1 |
implementation 'com.google.android.material:material:1.0.0' |
And your app theme’s parent should be one of the MaterialComponents themes.
Chips allow users to enter information, make selections, filter content, or trigger actions. Chips should appear dynamically as a group of multiple interactive elements. Unlike buttons, which should be a consistent and familiar call to action, one that a user expects to appear as the same action in the same general area.
Types:
You can check for example of every type in the official docs.
XML usage of a chip is as follows:
|
1 2 3 4 5 |
<com.google.android.material.chip.Chip android:id="@+id/chip" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/chip_text" /> |
Call setOnClickListener(OnClickListener) to register a callback to be invoked when the chip is clicked.
|
1 2 3 4 5 6 7 |
Chip chip = (Chip) findViewById(R.id.chip); chip.setOnClickListener(new OnClickListener() { @Override public void onClick(View view) { // Handle the click. } }); |
Or, call setOnCheckedChangeListener(OnCheckedChangeListener) to register a callback to be invoked when the chip is toggled.
|
1 2 3 4 5 6 7 |
Chip chip = (Chip) findViewById(R.id.chip); chip.setOnCheckedChangeListener(new setOnCheckedChangeListener() { @Override public void onCheckedChanged(CompoundButton view, boolean isChecked) { // Handle the toggle. } }); |
Action Chip is the default Material style, but you can apply any of the other styles using a style attribute.
|
1 2 3 4 5 |
<com.google.android.material.chip.Chip xmlns:app="http://schemas.android.com/apk/res-auto" style="@style/Widget.MaterialComponents.Chip.Filter" app:chipIcon="@drawable/ic_avatar_circle_24" android:text="@string/hello_world"/> |
Example:
|
1 2 3 4 |
style="@style/Widget.MaterialComponents.Chip.Entry" style="@style/Widget.MaterialComponents.Chip.Filter" style="@style/Widget.MaterialComponents.Chip.Choice" style="@style/Widget.MaterialComponents.Chip.Action" (default) |
References:
Be the first to comment.