Cómo Crear Chips en Android con Material Design

Cómo Crear Chips en Android con Material Design

Hola amigos 👋 Bienvenidos a un nuevo tutorial de Universo Android. Hoy aprenderemos a crear Chips en Android utilizando Material Design, uno de los componentes más versátiles y modernos para mostrar información compacta e interactiva.

Al finalizar este tutorial tendrás una aplicación que incluirá:

• Chips con diferentes estilos (Entry, Filter, Choice, Action)
• Chips con iconos y avatares
• Chips seleccionables y eliminables
• ChipGroup para agrupar múltiples chips
• Validación y manejo de eventos
• Diseño profesional con Material Design

🟩 1. ¿Qué son los Chips en Android?

Los Chips son elementos compactos que representan una entrada, atributo o acción. Se utilizan para mostrar información de manera visual, permitir selecciones múltiples, filtrar contenido o representar contactos y etiquetas.

🟩 2. Tipos de Chips

Material Design ofrece 4 tipos principales:

• Entry Chip: Representa información ingresada (contactos, etiquetas)
• Filter Chip: Permite filtrar contenido (categorías, opciones)
• Choice Chip: Permite selección única (similar a RadioButton)
• Action Chip: Ejecuta una acción específica

🟩 3. Crear el Proyecto en Android Studio

Creamos un nuevo proyecto en Android Studio con Empty Activity.

🟩 4. Agregar la Dependencia de Material Design

Abre el archivo build.gradle (Module: app) y agrega:

dependencies {
    implementation 'com.google.android.material:material:1.9.0'
}

Sincroniza el proyecto después de agregar la dependencia.

🟩 5. Diseño XML con Chips

Crea un archivo llamado:

📄 activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <!-- Título: Action Chips -->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Action Chips"
            android:textSize="18sp"
            android:textStyle="bold"
            android:layout_marginTop="16dp"
            android:layout_marginBottom="8dp" />

        <!-- Action Chips -->
        <com.google.android.material.chip.ChipGroup
            android:id="@+id/chipGroupAction"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:singleLine="false">

            <com.google.android.material.chip.Chip
                android:id="@+id/chipCamera"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Cámara"
                app:chipIcon="@android:drawable/ic_menu_camera"
                style="@style/Widget.MaterialComponents.Chip.Action" />

            <com.google.android.material.chip.Chip
                android:id="@+id/chipGallery"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Galería"
                app:chipIcon="@android:drawable/ic_menu_gallery"
                style="@style/Widget.MaterialComponents.Chip.Action" />

            <com.google.android.material.chip.Chip
                android:id="@+id/chipShare"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Compartir"
                app:chipIcon="@android:drawable/ic_menu_share"
                style="@style/Widget.MaterialComponents.Chip.Action" />

        </com.google.android.material.chip.ChipGroup>

        <!-- Título: Filter Chips -->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Filter Chips"
            android:textSize="18sp"
            android:textStyle="bold"
            android:layout_marginTop="24dp"
            android:layout_marginBottom="8dp" />

        <!-- Filter Chips -->
        <com.google.android.material.chip.ChipGroup
            android:id="@+id/chipGroupFilter"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:singleLine="false"
            app:selectionRequired="false">

            <com.google.android.material.chip.Chip
                android:id="@+id/chipAndroid"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Android"
                android:checkable="true"
                app:chipIcon="@android:drawable/ic_menu_info_details"
                style="@style/Widget.MaterialComponents.Chip.Filter" />

            <com.google.android.material.chip.Chip
                android:id="@+id/chipJava"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Java"
                android:checkable="true"
                style="@style/Widget.MaterialComponents.Chip.Filter" />

            <com.google.android.material.chip.Chip
                android:id="@+id/chipKotlin"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Kotlin"
                android:checkable="true"
                style="@style/Widget.MaterialComponents.Chip.Filter" />

            <com.google.android.material.chip.Chip
                android:id="@+id/chipFirebase"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Firebase"
                android:checkable="true"
                style="@style/Widget.MaterialComponents.Chip.Filter" />

        </com.google.android.material.chip.ChipGroup>

        <!-- Título: Choice Chips -->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Choice Chips (Selección única)"
            android:textSize="18sp"
            android:textStyle="bold"
            android:layout_marginTop="24dp"
            android:layout_marginBottom="8dp" />

        <!-- Choice Chips -->
        <com.google.android.material.chip.ChipGroup
            android:id="@+id/chipGroupChoice"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:singleLine="false"
            app:singleSelection="true"
            app:selectionRequired="true">

            <com.google.android.material.chip.Chip
                android:id="@+id/chipSmall"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Pequeño"
                android:checkable="true"
                style="@style/Widget.MaterialComponents.Chip.Choice" />

            <com.google.android.material.chip.Chip
                android:id="@+id/chipMedium"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Mediano"
                android:checkable="true"
                android:checked="true"
                style="@style/Widget.MaterialComponents.Chip.Choice" />

            <com.google.android.material.chip.Chip
                android:id="@+id/chipLarge"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Grande"
                android:checkable="true"
                style="@style/Widget.MaterialComponents.Chip.Choice" />

        </com.google.android.material.chip.ChipGroup>

        <!-- Título: Entry Chips -->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Entry Chips (Eliminables)"
            android:textSize="18sp"
            android:textStyle="bold"
            android:layout_marginTop="24dp"
            android:layout_marginBottom="8dp" />

        <!-- Entry Chips -->
        <com.google.android.material.chip.ChipGroup
            android:id="@+id/chipGroupEntry"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:singleLine="false">

            <com.google.android.material.chip.Chip
                android:id="@+id/chipUser1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Juan Pérez"
                app:chipIcon="@android:drawable/ic_menu_myplaces"
                app:closeIconEnabled="true"
                style="@style/Widget.MaterialComponents.Chip.Entry" />

            <com.google.android.material.chip.Chip
                android:id="@+id/chipUser2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="María García"
                app:chipIcon="@android:drawable/ic_menu_myplaces"
                app:closeIconEnabled="true"
                style="@style/Widget.MaterialComponents.Chip.Entry" />

            <com.google.android.material.chip.Chip
                android:id="@+id/chipUser3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Carlos López"
                app:chipIcon="@android:drawable/ic_menu_myplaces"
                app:closeIconEnabled="true"
                style="@style/Widget.MaterialComponents.Chip.Entry" />

        </com.google.android.material.chip.ChipGroup>

        <!-- Botón para mostrar selección -->
        <Button
            android:id="@+id/btnShowSelection"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Mostrar Selección"
            android:layout_marginTop="24dp" />

        <!-- TextView para mostrar resultados -->
        <TextView
            android:id="@+id/txtResult"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Resultados aparecerán aquí"
            android:textSize="16sp"
            android:padding="16dp"
            android:layout_marginTop="16dp"
            android:background="#F5F5F5" />

    </LinearLayout>

</ScrollView>

🟩 6. Lógica Java para Chips

📄 MainActivity.java

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;
import com.google.android.material.chip.Chip;
import com.google.android.material.chip.ChipGroup;

public class MainActivity extends AppCompatActivity {

    ChipGroup chipGroupAction, chipGroupFilter, chipGroupChoice, chipGroupEntry;
    Button btnShowSelection;
    TextView txtResult;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Inicializar vistas
        chipGroupAction = findViewById(R.id.chipGroupAction);
        chipGroupFilter = findViewById(R.id.chipGroupFilter);
        chipGroupChoice = findViewById(R.id.chipGroupChoice);
        chipGroupEntry = findViewById(R.id.chipGroupEntry);
        btnShowSelection = findViewById(R.id.btnShowSelection);
        txtResult = findViewById(R.id.txtResult);

        // Configurar Action Chips
        setupActionChips();

        // Configurar Entry Chips (eliminables)
        setupEntryChips();

        // Botón para mostrar selección
        btnShowSelection.setOnClickListener(v -> showSelection());
    }

    private void setupActionChips() {
        Chip chipCamera = findViewById(R.id.chipCamera);
        Chip chipGallery = findViewById(R.id.chipGallery);
        Chip chipShare = findViewById(R.id.chipShare);

        chipCamera.setOnClickListener(v -> 
            Toast.makeText(this, "Abrir Cámara", Toast.LENGTH_SHORT).show()
        );

        chipGallery.setOnClickListener(v -> 
            Toast.makeText(this, "Abrir Galería", Toast.LENGTH_SHORT).show()
        );

        chipShare.setOnClickListener(v -> 
            Toast.makeText(this, "Compartir", Toast.LENGTH_SHORT).show()
        );
    }

    private void setupEntryChips() {
        // Configurar listener para chips eliminables
        for (int i = 0; i < chipGroupEntry.getChildCount(); i++) {
            Chip chip = (Chip) chipGroupEntry.getChildAt(i);
            chip.setOnCloseIconClickListener(v -> {
                chipGroupEntry.removeView(v);
                Toast.makeText(this, "Chip eliminado", Toast.LENGTH_SHORT).show();
            });
        }
    }

    private void showSelection() {
        StringBuilder result = new StringBuilder();

        // Filter Chips seleccionados
        result.append("📌 Filtros seleccionados:\n");
        int filterCount = 0;
        for (int i = 0; i < chipGroupFilter.getChildCount(); i++) {
            Chip chip = (Chip) chipGroupFilter.getChildAt(i);
            if (chip.isChecked()) {
                result.append("• ").append(chip.getText()).append("\n");
                filterCount++;
            }
        }
        if (filterCount == 0) {
            result.append("Ninguno\n");
        }

        // Choice Chip seleccionado
        result.append("\n🎯 Tamaño seleccionado:\n");
        int selectedId = chipGroupChoice.getCheckedChipId();
        if (selectedId != -1) {
            Chip selectedChip = findViewById(selectedId);
            result.append("• ").append(selectedChip.getText()).append("\n");
        }

        // Entry Chips restantes
        result.append("\n👥 Contactos agregados:\n");
        if (chipGroupEntry.getChildCount() == 0) {
            result.append("Ninguno");
        } else {
            for (int i = 0; i < chipGroupEntry.getChildCount(); i++) {
                Chip chip = (Chip) chipGroupEntry.getChildAt(i);
                result.append("• ").append(chip.getText()).append("\n");
            }
        }

        txtResult.setText(result.toString());
    }
}

🟩 7. Crear Chips Dinámicamente desde Java

Puedes agregar chips programáticamente:

private void addChipDynamically(String text) {
    Chip chip = new Chip(this);
    chip.setText(text);
    chip.setChipIcon(getDrawable(android.R.drawable.ic_menu_info_details));
    chip.setCloseIconEnabled(true);
    chip.setCheckable(false);
    
    // Listener para eliminar
    chip.setOnCloseIconClickListener(v -> chipGroupEntry.removeView(v));
    
    // Agregar al ChipGroup
    chipGroupEntry.addView(chip);
}

🟩 8. Propiedades Importantes de Chips

Propiedad
Descripción
app:chipIcon
Icono al inicio del chip
app:closeIconEnabled
Habilita icono de cerrar (X)
android:checkable
Permite que el chip sea seleccionable
app:checkedIcon
Icono cuando está seleccionado
app:chipBackgroundColor
Color de fondo del chip
app:chipStrokeColor
Color del borde
app:chipStrokeWidth
Grosor del borde
app:chipMinHeight
Altura mínima
app:singleSelection
Selección única en ChipGroup
app:selectionRequired
Requiere una selección

🟩 9. Personalizar Colores de Chips

Crea un archivo res/color/chip_background_color.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#4CAF50" android:state_checked="true"/>
    <item android:color="#E0E0E0" android:state_checked="false"/>
</selector>

Aplicar en el XML:

<com.google.android.material.chip.Chip
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Personalizado"
    app:chipBackgroundColor="@color/chip_background_color" />

▶️ Cómo Ejecutar tu Aplicación

1. Abre Android Studio
2. Presiona Run para ejecutar el proyecto
3. Si no tienes un emulador, crea uno desde AVD Manager
4. Verás tus Chips funcionando con diferentes estilos y comportamientos

🧪 Resultado Final

Tu aplicación mostrará:

• Action Chips con iconos para ejecutar acciones
• Filter Chips para selección múltiple
• Choice Chips para selección única
• Entry Chips eliminables con icono de cerrar
• Validación y visualización de selecciones

📥 Descargar Proyecto de Ejemplo

Puedes descargar el proyecto completo desde el siguiente enlace:

👉 Descargar

🙌 Gracias por Visitar mi Blog

Si este tutorial te fue útil:

✔️ Compártelo
✔️ Déjame un comentario
✔️ Sígueme para más contenido sobre Android y programación

¡Estoy aquí para ayudarte!

❓ Preguntas Frecuentes (FAQ)

1. ¿Cuál es la diferencia entre Chip y Button?
Los Chips son más compactos y versátiles, diseñados para representar información o filtros. Los Buttons son para acciones principales más destacadas.

2. ¿Puedo usar imágenes personalizadas en los Chips?
Sí, puedes usar app:chipIcon con tus propios drawables o incluso imágenes circulares como avatares.

3. ¿Cómo limito el número de Chips seleccionados?
Puedes usar un listener en ChipGroup y controlar manualmente cuántos chips están seleccionados, desmarcando el más antiguo.

4. ¿Los Chips son compatibles con versiones antiguas de Android?
Sí, Material Components es compatible desde Android API 14 (Android 4.0) en adelante.