¿Cuál es la diferencia entre Chip y Button en Android?

Los Chips son más compactos y versátiles, diseñados para representar información, filtros o etiquetas de manera visual. Los Buttons son para acciones principales más destacadas y llamativas en la interfaz.

¿Cómo limito el número de Chips seleccionados en Android?

Puedes usar un listener en ChipGroup y controlar manualmente cuántos chips están seleccionados, desmarcando automáticamente el más antiguo cuando se alcanza el límite deseado.

Universo Android

Q: ¿Puedo usar imágenes personalizadas en los Chips?

Sí, puedes usar la propiedad app:chipIcon con tus propios drawables, iconos vectoriales o incluso imágenes circulares como avatares de usuario.

Q: ¿Los Chips son compatibles con versiones antiguas de Android?

Sí, los Chips de Material Components son compatibles desde Android API 14 (Android 4.0) en adelante, lo que cubre la gran mayoría de dispositivos actuales.

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

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

Abre Android Studio
Presiona Run para ejecutar el proyecto
Si no tienes un emulador, crea uno desde AVD Manager
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.