Hướng dẫn và ví dụ Android Chip và ChipGroup
Xem thêm các chuyên mục:
Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới.
Facebook
Chip là một thành phần mới được đưa vào Android từ phiên bản SDK 28, về cơ bản là một thành phần giao diện bao gồm biểu tượng (icon) và văn bản, được đặt trong một nền hình chữ nhật với các góc tròn.
Để có thể sử dụng đối tượng Chip trong dự án bạn cần phải cài đặt nó.
Sau khi cài đặt xong, một thư viện bao gồm Chip sẽ được khai báo trong tập tin build.gradle (Module app).
implementation 'com.google.android.material:material:1.1.0'
Mã XML của một Chip đơn giản:
Chip Sample
<!-- IMPORTANT: android:theme is required -->
<com.google.android.material.chip.Chip
android:id="@+id/chip1"
style="@style/Widget.MaterialComponents.Chip.Action"
android:theme="@style/Theme.MaterialComponents.Light"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Chip Action" />
theme attribute
Thuộc tính (attribute) android:theme là bắt buộc đối với một Chip, nếu không có thuộc tính này toàn bộ ứng dụng của bạn sẽ không hoạt động mà không có một thông báo nào, tôi đã rất ngạc nhiên vì điều đó trong lần đầu tiên sử dụng Chip.
- android:theme="@style/Theme.MaterialComponents"
- android:theme="@style/Theme.MaterialComponents.Light"
- android:theme="@style/Theme.MaterialComponents.***"
style attribute:
Thuộc tính (attribute) style có 4 giá trị, nó giúp bạn chỉ định kiểu của Chip:
- @style/Widget.MaterialComponents.Chip.Action (Default)
- @style/Widget.MaterialComponents.Chip.Entry
- @style/Widget.MaterialComponents.Chip.Choice
- @style/Widget.MaterialComponents.Chip.Filter
Style Default
Thuộc tính (attribute) style là không bắt buộc, giá trị mặc định của nó là "@style/Widget.MaterialComponents.Chip.Action".
Chip Default Sample
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.google.android.material.chip.Chip
android:id="@+id/chip1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="50dp"
android:text="Chip Default"
android:theme="@style/Theme.MaterialComponents.Light"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.chip.Chip
android:id="@+id/chip2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="16dp"
android:checkable="true"
android:text="Chip Default + (Checkable)"
android:theme="@style/Theme.MaterialComponents.Light"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/chip1" />
<com.google.android.material.chip.Chip
android:id="@+id/chip3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="16dp"
android:checkable="true"
android:text="Chip Default + (Checkable, Close Icon Visible)"
android:theme="@style/Theme.MaterialComponents.Light"
app:closeIconVisible="true"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/chip2" />
<com.google.android.material.chip.Chip
android:id="@+id/chip4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="32dp"
android:checkable="true"
android:text="Chip Default + (Icon)"
android:theme="@style/Theme.MaterialComponents.Light"
app:chipIcon="@drawable/my_icon"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/chip3" />
<com.google.android.material.chip.Chip
android:id="@+id/chip5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="16dp"
android:checkable="true"
android:text="Chip Default + (Icon, Checkable)"
android:theme="@style/Theme.MaterialComponents.Light"
app:chipIcon="@drawable/my_icon"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/chip4" />
<com.google.android.material.chip.Chip
android:id="@+id/chip6"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="16dp"
android:checkable="true"
android:text="Chip Default + (Icon, Checkable, Close Icon Visible)"
android:theme="@style/Theme.MaterialComponents.Light"
app:chipIcon="@drawable/my_icon"
app:closeIconVisible="true"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/chip5" />
</androidx.constraintlayout.widget.ConstraintLayout>
style="@style/Widget.MaterialComponents.Chip.Action"
Đây là giá trị mặc định của style.
style="@style/Widget.MaterialComponents.Chip.Entry"
Chip Entry = Chip Default + Close Icon + Checkable
Chip Entry Sample
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.google.android.material.chip.Chip
android:id="@+id/chip1"
style="@style/Widget.MaterialComponents.Chip.Entry"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="50dp"
android:text="Chip Entry"
android:theme="@style/Theme.MaterialComponents.Light"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.chip.Chip
android:id="@+id/chip2"
style="@style/Widget.MaterialComponents.Chip.Entry"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="16dp"
android:checkable="true"
android:text="Chip Entry + (Checkable)"
android:theme="@style/Theme.MaterialComponents.Light"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/chip1" />
<com.google.android.material.chip.Chip
android:id="@+id/chip3"
style="@style/Widget.MaterialComponents.Chip.Entry"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="16dp"
android:checkable="true"
android:text="Chip Entry + (Checkable, Close Icon Visible)"
android:theme="@style/Theme.MaterialComponents.Light"
app:closeIconVisible="true"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/chip2" />
<com.google.android.material.chip.Chip
android:id="@+id/chip4"
style="@style/Widget.MaterialComponents.Chip.Entry"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="32dp"
android:checkable="true"
android:text="Chip Entry + (Icon)"
android:theme="@style/Theme.MaterialComponents.Light"
app:chipIcon="@drawable/my_icon"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/chip3" />
<com.google.android.material.chip.Chip
android:id="@+id/chip5"
style="@style/Widget.MaterialComponents.Chip.Entry"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="16dp"
android:checkable="true"
android:text="Chip Entry + (Icon, Checkable)"
android:theme="@style/Theme.MaterialComponents.Light"
app:chipIcon="@drawable/my_icon"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/chip4" />
<com.google.android.material.chip.Chip
android:id="@+id/chip6"
style="@style/Widget.MaterialComponents.Chip.Entry"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="16dp"
android:checkable="true"
android:text="Chip Entry + (Icon, Checkable, Close Icon Visible)"
android:theme="@style/Theme.MaterialComponents.Light"
app:chipIcon="@drawable/my_icon"
app:closeIconVisible="true"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/chip5" />
</androidx.constraintlayout.widget.ConstraintLayout>
style="@style/Widget.MaterialComponents.Chip.Choice"
Các đặc điểm của Chip Choice:
- Khi Chip Choice được chọn (selected) mầu nền của nó sẽ đậm hơn.
- Không có biểu tượng check ở bên trái, kể cả khi bạn thiết lập checkable=true.
- Icon - Không hiển thị kể cả khi bạn thiết lập giá trị cho nó.
Chip Choice Sample
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.google.android.material.chip.Chip
android:id="@+id/chip1"
style="@style/Widget.MaterialComponents.Chip.Choice"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="50dp"
android:text="Chip Choice"
android:theme="@style/Theme.MaterialComponents.Light"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.chip.Chip
android:id="@+id/chip2"
style="@style/Widget.MaterialComponents.Chip.Choice"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="16dp"
android:checkable="true"
android:text="Chip Choice + (Checkable)"
android:theme="@style/Theme.MaterialComponents.Light"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/chip1" />
<com.google.android.material.chip.Chip
android:id="@+id/chip3"
style="@style/Widget.MaterialComponents.Chip.Choice"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="16dp"
android:checkable="true"
android:text="Chip Choice + (Checkable, Close Icon Visible)"
android:theme="@style/Theme.MaterialComponents.Light"
app:closeIconVisible="true"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/chip2" />
<com.google.android.material.chip.Chip
android:id="@+id/chip4"
style="@style/Widget.MaterialComponents.Chip.Choice"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="32dp"
android:checkable="true"
android:text="Chip Choice + (Icon)"
android:theme="@style/Theme.MaterialComponents.Light"
app:chipIcon="@drawable/my_icon"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/chip3" />
<com.google.android.material.chip.Chip
android:id="@+id/chip5"
style="@style/Widget.MaterialComponents.Chip.Choice"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="16dp"
android:checkable="true"
android:text="Chip Choice + (Icon, Checkable)"
android:theme="@style/Theme.MaterialComponents.Light"
app:chipIcon="@drawable/my_icon"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/chip4" />
<com.google.android.material.chip.Chip
android:id="@+id/chip6"
style="@style/Widget.MaterialComponents.Chip.Choice"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="16dp"
android:checkable="true"
android:text="Chip Choice + (Icon, Checkable, Close Icon Visible)"
android:theme="@style/Theme.MaterialComponents.Light"
app:chipIcon="@drawable/my_icon"
app:closeIconVisible="true"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/chip5" />
</androidx.constraintlayout.widget.ConstraintLayout>
style="@style/Widget.MaterialComponents.Chip.Filter"
Đặc điểm của Chip Filter:
- Chip Filter = Chip Default + Checkable
- Icon - Sẽ không hiển thị kể cả khi bạn thiết lập giá trị cho nó.
Chip Filter Sample
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.google.android.material.chip.Chip
android:id="@+id/chip1"
style="@style/Widget.MaterialComponents.Chip.Filter"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="50dp"
android:text="Chip Filter"
android:theme="@style/Theme.MaterialComponents.Light"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.chip.Chip
android:id="@+id/chip2"
style="@style/Widget.MaterialComponents.Chip.Filter"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="16dp"
android:checkable="true"
android:text="Chip Filter + (Checkable)"
android:theme="@style/Theme.MaterialComponents.Light"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/chip1" />
<com.google.android.material.chip.Chip
android:id="@+id/chip3"
style="@style/Widget.MaterialComponents.Chip.Filter"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="16dp"
android:checkable="true"
android:text="Chip Filter + (Checkable, Close Icon Visible)"
android:theme="@style/Theme.MaterialComponents.Light"
app:closeIconVisible="true"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/chip2" />
<com.google.android.material.chip.Chip
android:id="@+id/chip4"
style="@style/Widget.MaterialComponents.Chip.Filter"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="32dp"
android:checkable="true"
android:text="Chip Filter + (Icon)"
android:theme="@style/Theme.MaterialComponents.Light"
app:chipIcon="@drawable/my_icon"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/chip3" />
<com.google.android.material.chip.Chip
android:id="@+id/chip5"
style="@style/Widget.MaterialComponents.Chip.Filter"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="16dp"
android:checkable="true"
android:text="Chip Filter + (Icon, Checkable)"
android:theme="@style/Theme.MaterialComponents.Light"
app:chipIcon="@drawable/my_icon"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/chip4" />
<com.google.android.material.chip.Chip
android:id="@+id/chip6"
style="@style/Widget.MaterialComponents.Chip.Filter"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="16dp"
android:checkable="true"
android:text="Chip Filter + (Icon, Checkable, Close Icon Visible)"
android:theme="@style/Theme.MaterialComponents.Light"
app:chipIcon="@drawable/my_icon"
app:closeIconVisible="true"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/chip5" />
</androidx.constraintlayout.widget.ConstraintLayout>
Thuộc tính (attribute) android:theme là bắt buộc đối với một Chip. Ứng dụng của bạn có thể không hoạt động nếu Chip không có thuộc tính này, hoặc bạn sét đặt một giá trị không hợp lệ cho nó.
Các giá trị có thể là:
- android:theme="@style/Theme.MaterialComponents.Light"
- android:theme="@style/Theme.MaterialComponents.Bridge"
- android:theme="@style/Theme.MaterialComponents.DayNight"
- .....
android:theme="@style/Theme.MaterialComponents.Light"
android:theme="@style/Theme.MaterialComponents.Bridge"
Có rất nhiều các sự kiện liên quan tới Chip, nhưng về cơ bản có 3 sự kiện thông dụng sau:
- chip.setOnClickListener(View.OnClickListener)
- chip.setOnCloseIconClickListener(View.OnClickListener)
- chip.setOnCheckedChangeListener(CompoundButton.OnCheckedChangeListener)
main_activity.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.google.android.material.chip.Chip
android:id="@+id/chip_action"
style="@style/Widget.MaterialComponents.Chip.Action"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:clickable="true"
android:text="Chip Action"
android:theme="@style/Theme.MaterialComponents.Light"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.chip.Chip
android:id="@+id/chip_choice"
style="@style/Widget.MaterialComponents.Chip.Choice"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:text="Chip Choice"
android:theme="@style/Theme.MaterialComponents.Light"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/chip_action" />
<com.google.android.material.chip.Chip
android:id="@+id/chip_filter"
style="@style/Widget.MaterialComponents.Chip.Filter"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:text="Chip Filter"
android:theme="@style/Theme.MaterialComponents.Light"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/chip_choice" />
<com.google.android.material.chip.Chip
android:id="@+id/chip_entry"
style="@style/Widget.MaterialComponents.Chip.Entry"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:text="Chip Entry"
android:theme="@style/Theme.MaterialComponents.Light"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/chip_filter" />
<com.google.android.material.chip.Chip
android:id="@+id/chip_custom"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:checkable="true"
android:text="Chip Default + (Checkable, Close Icon Visible)"
android:theme="@style/Theme.MaterialComponents.Light"
app:closeIconVisible="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/chip_entry" />
<Button
android:id="@+id/button_clear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="Clear Log"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/chip_custom" />
<EditText
android:id="@+id/editText_log"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:background="#F8EFEF"
android:ems="10"
android:gravity="top|left"
android:inputType="textMultiLine"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/button_clear" />
</androidx.constraintlayout.widget.ConstraintLayout>
MainActivity.java
package org.o7planning.androidchipdemo;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.CompoundButton;
import android.widget.EditText;
import com.google.android.material.chip.Chip;
public class MainActivity extends AppCompatActivity {
private Chip chipAction;
private Chip chipChoice;
private Chip chipEntry;
private Chip chipFilter;
private Chip chipCustom;
private EditText editTextLog;
private Button buttonClear;
private View.OnClickListener clickListener;
private View.OnClickListener closeIconClickListener;
private CompoundButton.OnCheckedChangeListener checkedChangeListener;
private static final String LOG_TAG = "AndroidChipDemo";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
this.chipAction = (Chip) this.findViewById(R.id.chip_action);
this.chipChoice = (Chip) this.findViewById(R.id.chip_choice);
this.chipEntry = (Chip) this.findViewById(R.id.chip_entry);
this.chipFilter = (Chip) this.findViewById(R.id.chip_filter);
this.chipCustom = (Chip) this.findViewById(R.id.chip_custom);
this.editTextLog = (EditText) this.findViewById(R.id.editText_log);
this.buttonClear = (Button) this.findViewById(R.id.button_clear);
//
this.clickListener= new ClickListenerImpl();
this.closeIconClickListener = new CloseIconClickListenerImpl();
this.checkedChangeListener = new CheckedChangeListenerImpl();
//
this.chipAction.setOnClickListener( clickListener);
this.chipAction.setOnCloseIconClickListener(closeIconClickListener);
this.chipAction.setOnCheckedChangeListener(checkedChangeListener);
//
this.chipChoice.setOnClickListener( clickListener);
this.chipChoice.setOnCloseIconClickListener(closeIconClickListener);
this.chipChoice.setOnCheckedChangeListener(checkedChangeListener);
//
this.chipEntry.setOnClickListener( clickListener);
this.chipEntry.setOnCloseIconClickListener(closeIconClickListener);
this.chipEntry.setOnCheckedChangeListener(checkedChangeListener);
//
this.chipFilter.setOnClickListener( clickListener);
this.chipFilter.setOnCloseIconClickListener(closeIconClickListener);
this.chipFilter.setOnCheckedChangeListener(checkedChangeListener);
//
this.chipCustom.setOnClickListener( clickListener);
this.chipCustom.setOnCloseIconClickListener(closeIconClickListener);
this.chipCustom.setOnCheckedChangeListener(checkedChangeListener);
//
this.buttonClear.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
editTextLog.setText("");
}
});
}
private void appendLog(String text) {
this.editTextLog.append(text) ;
this.editTextLog.append("\n");
Log.i(LOG_TAG, text);
}
class ClickListenerImpl implements View.OnClickListener {
@Override
public void onClick(View v) {
appendLog("Clicked");
}
}
class CloseIconClickListenerImpl implements View.OnClickListener {
@Override
public void onClick(View v) {
appendLog("Close Icon Clicked");
}
}
class CheckedChangeListenerImpl implements CompoundButton.OnCheckedChangeListener {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
appendLog("Checked Changed! isChecked? " + isChecked);
}
}
}
ChipGroup được sử dụng để chứa nhiều Chip. Theo mặc định các Chip sẽ được sắp xếp trên nhiều dòng nếu một dòng không thể chứa được tất cả các Chip.
Tuy nhiên bạn có thể thiết lập để đảm bảo rằng các Chip sẽ được đặt trên 1 dòng duy nhất.
<com.google.android.material.chip.ChipGroup
app:singleLine="true"
...>
</com.google.android.material.chip.ChipGroup>
ChipGroup cũng có thể hoạt động giống như một RadioGroup, điều đó có nghĩa là nếu một Chip của nó được sét đặt trạng thái checked, tất cả các Chip khác của nó sẽ có trạng thái unchecked.
<com.google.android.material.chip.ChipGroup
app:singleSelection="true"
...>
</com.google.android.material.chip.ChipGroup>
Dưới đây là một vài ví dụ Chip & ChipGroup mà có thể bạn quan tâm:
