Mục lục

Chip
Chip Theme
Chip Listener
ChipGroup
Các ví dụ với Chip và ChipGroup

Hướng dẫn và ví dụ Android Chip và ChipGroup

Xem thêm các chuyên mục:

Các hướng dẫn lập trình Android

Chip
Chip Theme
Chip Listener
ChipGroup
Các ví dụ với Chip và ChipGroup

Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.

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

1- Chip

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>

2- Chip Theme

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"

3- Chip Listener

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);
        }
    }
}

4- ChipGroup

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>

5- Các ví dụ với Chip và ChipGroup

Dưới đây là một vài ví dụ Chip & ChipGroup mà có thể bạn quan tâm:

Ví dụ với ChipGroup và các Chip Entry

Xem thêm các chuyên mục:

Các hướng dẫn lập trình Android