Chips de componentes de diseño de materiales en Android con ejemplo

Los chips en Android son uno de los componentes que se utilizan para elegir filtros, acciones y mostrar las opciones seleccionables en el área compacta de la ventana de Android. En este artículo, se ha discutido cómo implementar los chips seleccionables muy básicos para el filtrado de las opciones. Eche un vistazo a la siguiente imagen para tener una idea de lo que se ha discutido más adelante.

Pasos para implementar los chips seleccionables en Android

Paso 1: crea un proyecto vacío

• Cree un proyecto de Android Studio de actividad vacío. Consulte Android | ¿Cómo crear/comenzar un nuevo proyecto en Android Studio? para saber cómo crear un proyecto de Android Studio de actividad vacía.
• Tenga en cuenta que seleccione Java como lenguaje de programación.

Paso 2: agregar la dependencia al archivo Gradle a nivel de la aplicación

• El proyecto actual necesita Dependencia de diseño de materiales.
• Invoque la siguiente dependencia dentro del archivo gradle de nivel de aplicación.
• Asegúrese de que el sistema esté conectado a la red para que Android Studio pueda descargar los archivos necesarios.
• Y haga clic en el botón «Sincronizar ahora» que aparece en la esquina superior derecha.

implementación ‘com.google.android.material:material:1.3.0-alpha03’

• Consulte la siguiente imagen si no puede ubicar el archivo Gradle de nivel de aplicación e invocar la dependencia.

Paso 3: trabajar con el archivo activity_main.xml

• La etiqueta requerida para implementar el chip básico en Android es la siguiente:

com.google.android.material.chip.Chip

• Para implementar lo mismo en el diseño, invoque el siguiente código. Este diseño incluye un chip muy básico de Material Design Dependency.

<?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>

Interfaz de usuario de salida:

Paso 4: Manejo del chip en el archivo MainActivity.java

• El botón de chip de diseño de materiales se maneja usando » OnClickListener», igual que el botón normal.
• Invoque el siguiente código dentro del archivo MainaActivity.java para manejar el botón de chip, que muestra el mensaje Toast simple.

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

Salida: ejecutar en el emulador

Hacer que las fichas sean seleccionables

• Para que el chip sea seleccionable en Android, el grupo de chips debe implementarse en lugar de un solo chip.
• Esto ayuda a filtrar las selecciones de las opciones del usuario.
• Para implementar el grupo de chips en Android, invoque el siguiente código dentro del archivo 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 manejar la selección de las fichas, ya sea que el usuario filtre las fichas o no, invoque el siguiente código dentro del archivo 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();
                }
            }
        });
  
    }
}

Salida: ejecutar en el emulador