Os chips no android são um dos componentes que servem para fazer a escolha de filtros, ações e exibir as opções selecionáveis ​​na área compacta da janela do Android. Neste artigo, foi discutido como implementar os chips selecionáveis ​​muito básicos para a filtragem das opções. Dê uma olhada na imagem a seguir para ter uma ideia do que foi discutido mais adiante. Observe que vamos implementar este projeto usando a   linguagem Java . 

Etapas para implementar os chips selecionáveis ​​no Android

Etapa 1: crie um projeto vazio

• Crie um projeto de atividade do Android Studio vazio. Consulte Android | Como criar / iniciar um novo projeto no Android Studio? para saber como criar um projeto Android Studio de atividade vazia.
• Observe que selecione Java como a linguagem de programação.

Etapa 2: adicionar a dependência ao arquivo gradle no nível do aplicativo

• O projeto atual precisa da Dependência do Material Design.
• Invoque a seguinte dependência dentro do arquivo gradle no nível do aplicativo.
• Certifique-se de que o sistema esteja conectado à rede para que o Android Studio possa baixar os arquivos necessários.
• E clique no botão “Sincronizar agora” que aparece no canto superior direito.

implementação 'com.google.android.material: material: 1.3.0-alpha03'

• Consulte a imagem a seguir se não for possível localizar o arquivo gradle no nível do aplicativo e invocar a dependência.

Etapa 3: Trabalhando com o arquivo activity_main.xml

• A tag necessária para implementar o chip básico no Android é a seguinte:

com.google.android.material.chip.Chip

• Para implementar o mesmo no layout, invoque o código a seguir. Este layout inclui um chip muito básico da Dependência do Material Design.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">
  
    <com.google.android.material.chip.Chip
        android:id="@+id/chipCpp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="64dp"
        android:text="GEEKS FOR GEEKS" />
  
</RelativeLayout>

IU de saída:

Etapa 4: Manipulando Chip no arquivo MainActivity.java

• O botão do chip do Material design é manipulado usando “ OnClickListener”, da mesma forma que o botão normal.
• Invoque o seguinte código dentro do arquivo MainaActivity.java para manipular o botão de chip, que mostra a mensagem simples do Toast.

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Toast;
import com.google.android.material.chip.Chip;
  
public class MainActivity extends AppCompatActivity {
  
    Chip chip1;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
          // chips is handled using the 
          // normal OnClickListener callback
        chip1 = findViewById(R.id.chipGfg);
        chip1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "Action Completed", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Saída: Executar no emulador

Tornando os chips selecionáveis

• Para tornar o chip selecionável no Android, o grupo de chips precisa implementar em vez de um único chip.
• Isso ajuda a filtrar as seleções das escolhas do usuário.
• Para implementar o grupo de chips no android, invoque o seguinte código dentro do arquivo activity_main.xml .

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">
  
    <!--make sure to group the chips-->
    <!--style attribute is mandatory
         for each of the chips-->
    <com.google.android.material.chip.ChipGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true">
  
        <com.google.android.material.chip.Chip
            android:id="@+id/chipCpp"
            style="@style/Widget.MaterialComponents.Chip.Filter"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="C++" />
  
        <com.google.android.material.chip.Chip
            android:id="@+id/chipJava"
            style="@style/Widget.MaterialComponents.Chip.Filter"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="JAVA" />
  
        <com.google.android.material.chip.Chip
            android:id="@+id/chipPython"
            style="@style/Widget.MaterialComponents.Chip.Filter"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Python" />
  
    </com.google.android.material.chip.ChipGroup>
  
</RelativeLayout>

• Para lidar com a seleção dos chips, sejam eles filtrados pelo usuário ou não, invoque o seguinte código dentro do arquivo MainActivity.java .

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Toast;
import com.google.android.material.chip.Chip;
  
public class MainActivity extends AppCompatActivity {
  
    Chip chipCpp, chipJava, chipPython;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        chipCpp = findViewById(R.id.chipCpp);
        chipJava = findViewById(R.id.chipJava);
        chipPython = findViewById(R.id.chipPython);
  
        chipCpp.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // check whether the chips is filtered by user
                  // or not and give the suitable Toast message
                if (chipCpp.isChecked()) {
                    Toast.makeText(MainActivity.this, "C++ selected", Toast.LENGTH_SHORT).show();
                } else {
                    Toast.makeText(MainActivity.this, "C++ deselected", Toast.LENGTH_SHORT).show();
                }
            }
        });
  
        chipJava.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // check whether the chips is filtered by user or
                  // not and give the suitable Toast message
                if (chipJava.isChecked()) {
                    Toast.makeText(MainActivity.this, "JAVA selected", Toast.LENGTH_SHORT).show();
                } else {
                    Toast.makeText(MainActivity.this, "JAVA deselected", Toast.LENGTH_SHORT).show();
                }
            }
        });
  
        chipPython.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // check whether the chips is filtered by user or 
                  // not and give the suitable Toast message
                if (chipPython.isChecked()) {
                    Toast.makeText(MainActivity.this, "Python selected", Toast.LENGTH_SHORT).show();
                } else {
                    Toast.makeText(MainActivity.this, "Python deselected", Toast.LENGTH_SHORT).show();
                }
            }
        });
  
    }
}

Saída: Executar no emulador