¿Cuál es la diferencia entre Toast y Snackbar en Android?

Toast es un mensaje simple temporal sin interacción del usuario. Snackbar es parte de Material Design, puede incluir acciones interactivas, es más personalizable y permite deshacer operaciones.

Toast y Snackbar en Android

Hola amigos 👋 Bienvenidos a un nuevo tutorial de Universo Android. Hoy aprenderemos a usar Toast y Snackbar, los componentes esenciales para mostrar mensajes temporales y notificaciones al usuario de forma elegante y efectiva.

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

Toast básico y personalizado
Snackbar simple y con acciones
Diferentes duraciones y posiciones
Diseños personalizados
Mejores prácticas de UX
Comparación entre Toast y Snackbar

🟩 1. ¿Qué es Toast y Snackbar?

Toast es un mensaje emergente temporal que aparece en la parte inferior de la pantalla y desaparece automáticamente. No requiere interacción del usuario.

Snackbar es similar pero más versátil, pertenece a Material Design, puede incluir acciones y se muestra desde la parte inferior con animación.

🟩 2. Diferencias Principales

Característica Toast Snackbar
Biblioteca Android nativo Material Design
Acciones No Sí
Posición Fija (inferior) Personalizable
Diseño Básico Material Design
Interacción Solo visual Puede tener botones

Característica	Toast	Snackbar
Biblioteca	Android nativo	Material Design
Acciones	No	Sí
Posición	Fija (inferior)	Personalizable
Diseño	Básico	Material Design
Interacción	Solo visual	Puede tener botones

🟩 3. Crear el Proyecto

Creamos un nuevo proyecto en Android Studio con Empty Activity.

🟩 4. Agregar Dependencias

📄 build.gradle (Module: app)

dependencies {
    implementation 'androidx.appcompat:appcompat:1.6.1'
    implementation 'com.google.android.material:material:1.9.0'
    implementation 'androidx.coordinatorlayout:coordinatorlayout:1.2.0'
}

🟩 5. Diseño XML Principal

📄 activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/coordinatorLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ScrollView
        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">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Toast y Snackbar Demo"
                android:textSize="24sp"
                android:textStyle="bold"
                android:textColor="#2196F3"
                android:layout_marginBottom="24dp" />

            <!-- Sección Toast -->
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Toast Examples"
                android:textSize="18sp"
                android:textStyle="bold"
                android:layout_marginBottom="16dp" />

            <Button
                android:id="@+id/btnToastShort"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Toast Short"
                android:layout_marginBottom="8dp" />

            <Button
                android:id="@+id/btnToastLong"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Toast Long"
                android:layout_marginBottom="8dp" />

            <Button
                android:id="@+id/btnToastCustom"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Toast Personalizado"
                android:layout_marginBottom="8dp" />

            <!-- Separador -->
            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="#CCCCCC"
                android:layout_marginTop="16dp"
                android:layout_marginBottom="16dp" />

            <!-- Sección Snackbar -->
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Snackbar Examples"
                android:textSize="18sp"
                android:textStyle="bold"
                android:layout_marginBottom="16dp" />

            <Button
                android:id="@+id/btnSnackbarShort"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Snackbar Short"
                android:layout_marginBottom="8dp" />

            <Button
                android:id="@+id/btnSnackbarLong"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Snackbar Long"
                android:layout_marginBottom="8dp" />

            <Button
                android:id="@+id/btnSnackbarIndefinite"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Snackbar Indefinido"
                android:layout_marginBottom="8dp" />

            <Button
                android:id="@+id/btnSnackbarAction"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Snackbar con Acción"
                android:layout_marginBottom="8dp" />

            <Button
                android:id="@+id/btnSnackbarCustom"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Snackbar Personalizado"
                android:layout_marginBottom="8dp" />

            <!-- Separador -->
            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="#CCCCCC"
                android:layout_marginTop="16dp"
                android:layout_marginBottom="16dp" />

            <!-- Ejemplos Prácticos -->
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Ejemplos Prácticos"
                android:textSize="18sp"
                android:textStyle="bold"
                android:layout_marginBottom="16dp" />

            <Button
                android:id="@+id/btnDeleteExample"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Eliminar Item (con Undo)"
                android:backgroundTint="#F44336"
                android:layout_marginBottom="8dp" />

            <Button
                android:id="@+id/btnSaveExample"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Guardar Datos"
                android:backgroundTint="#4CAF50"
                android:layout_marginBottom="8dp" />

            <Button
                android:id="@+id/btnErrorExample"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Mostrar Error"
                android:backgroundTint="#FF9800" />

        </LinearLayout>

    </ScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

🟩 6. Layout Toast Personalizado

📄 res/layout/custom_toast.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="16dp"
    android:background="@drawable/toast_background"
    android:gravity="center_vertical">

    <ImageView
        android:id="@+id/toastIcon"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:src="@android:drawable/ic_dialog_info"
        android:tint="#FFFFFF" />

    <TextView
        android:id="@+id/toastText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Mensaje personalizado"
        android:textColor="#FFFFFF"
        android:textSize="16sp"
        android:layout_marginLeft="12dp" />

</LinearLayout>

🟩 7. Drawable para Toast

📄 res/drawable/toast_background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#323232" />
    <corners android:radius="16dp" />
    <padding android:left="16dp" android:top="12dp" 
             android:right="16dp" android:bottom="12dp" />
</shape>

🟩 8. MainActivity

📄 MainActivity.java

import androidx.appcompat.app.AppCompatActivity;
import androidx.coordinatorlayout.widget.CoordinatorLayout;
import android.graphics.Color;
import android.os.Bundle;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
import com.google.android.material.snackbar.Snackbar;

public class MainActivity extends AppCompatActivity {

    CoordinatorLayout coordinatorLayout;
    Button btnToastShort, btnToastLong, btnToastCustom;
    Button btnSnackbarShort, btnSnackbarLong, btnSnackbarIndefinite;
    Button btnSnackbarAction, btnSnackbarCustom;
    Button btnDeleteExample, btnSaveExample, btnErrorExample;

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

        initializeViews();
        setupToastButtons();
        setupSnackbarButtons();
        setupExampleButtons();
    }

    private void initializeViews() {
        coordinatorLayout = findViewById(R.id.coordinatorLayout);
        
        btnToastShort = findViewById(R.id.btnToastShort);
        btnToastLong = findViewById(R.id.btnToastLong);
        btnToastCustom = findViewById(R.id.btnToastCustom);
        
        btnSnackbarShort = findViewById(R.id.btnSnackbarShort);
        btnSnackbarLong = findViewById(R.id.btnSnackbarLong);
        btnSnackbarIndefinite = findViewById(R.id.btnSnackbarIndefinite);
        btnSnackbarAction = findViewById(R.id.btnSnackbarAction);
        btnSnackbarCustom = findViewById(R.id.btnSnackbarCustom);
        
        btnDeleteExample = findViewById(R.id.btnDeleteExample);
        btnSaveExample = findViewById(R.id.btnSaveExample);
        btnErrorExample = findViewById(R.id.btnErrorExample);
    }

    private void setupToastButtons() {
        // Toast Short (2 segundos)
        btnToastShort.setOnClickListener(v -> 
            Toast.makeText(this, "Toast corto (2 segundos)", Toast.LENGTH_SHORT).show()
        );

        // Toast Long (3.5 segundos)
        btnToastLong.setOnClickListener(v -> 
            Toast.makeText(this, "Toast largo (3.5 segundos)", Toast.LENGTH_LONG).show()
        );

        // Toast Personalizado
        btnToastCustom.setOnClickListener(v -> showCustomToast());
    }

    private void setupSnackbarButtons() {
        // Snackbar Short
        btnSnackbarShort.setOnClickListener(v -> 
            Snackbar.make(coordinatorLayout, "Snackbar corto", Snackbar.LENGTH_SHORT).show()
        );

        // Snackbar Long
        btnSnackbarLong.setOnClickListener(v -> 
            Snackbar.make(coordinatorLayout, "Snackbar largo", Snackbar.LENGTH_LONG).show()
        );

        // Snackbar Indefinido
        btnSnackbarIndefinite.setOnClickListener(v -> {
            Snackbar snackbar = Snackbar.make(coordinatorLayout, 
                "Este Snackbar no desaparece automáticamente", 
                Snackbar.LENGTH_INDEFINITE);
            snackbar.setAction("CERRAR", view -> snackbar.dismiss());
            snackbar.show();
        });

        // Snackbar con Acción
        btnSnackbarAction.setOnClickListener(v -> {
            Snackbar snackbar = Snackbar.make(coordinatorLayout, 
                "Mensaje enviado", 
                Snackbar.LENGTH_LONG);
            snackbar.setAction("DESHACER", view -> 
                Toast.makeText(this, "Acción deshecha", Toast.LENGTH_SHORT).show()
            );
            snackbar.setActionTextColor(Color.YELLOW);
            snackbar.show();
        });

        // Snackbar Personalizado
        btnSnackbarCustom.setOnClickListener(v -> showCustomSnackbar());
    }

    private void setupExampleButtons() {
        // Ejemplo: Eliminar con Undo
        btnDeleteExample.setOnClickListener(v -> {
            Snackbar snackbar = Snackbar.make(coordinatorLayout, 
                "Item eliminado", 
                Snackbar.LENGTH_LONG);
            snackbar.setAction("DESHACER", view -> 
                Toast.makeText(this, "Eliminación cancelada", Toast.LENGTH_SHORT).show()
            );
            snackbar.setActionTextColor(Color.parseColor("#FF5722"));
            snackbar.show();
        });

        // Ejemplo: Guardar exitoso
        btnSaveExample.setOnClickListener(v -> {
            Snackbar snackbar = Snackbar.make(coordinatorLayout, 
                "✓ Datos guardados exitosamente", 
                Snackbar.LENGTH_SHORT);
            snackbar.setBackgroundTint(Color.parseColor("#4CAF50"));
            snackbar.show();
        });

        // Ejemplo: Error
        btnErrorExample.setOnClickListener(v -> {
            Snackbar snackbar = Snackbar.make(coordinatorLayout, 
                "✗ Error al conectar con el servidor", 
                Snackbar.LENGTH_LONG);
            snackbar.setAction("REINTENTAR", view -> 
                Toast.makeText(this, "Reintentando...", Toast.LENGTH_SHORT).show()
            );
            snackbar.setBackgroundTint(Color.parseColor("#F44336"));
            snackbar.setActionTextColor(Color.WHITE);
            snackbar.show();
        });
    }

    private void showCustomToast() {
        LayoutInflater inflater = getLayoutInflater();
        View layout = inflater.inflate(R.layout.custom_toast, null);

        ImageView icon = layout.findViewById(R.id.toastIcon);
        TextView text = layout.findViewById(R.id.toastText);
        
        icon.setImageResource(android.R.drawable.ic_dialog_info);
        text.setText("Toast personalizado con icono");

        Toast toast = new Toast(getApplicationContext());
        toast.setDuration(Toast.LENGTH_LONG);
        toast.setView(layout);
        toast.setGravity(Gravity.CENTER, 0, 0);
        toast.show();
    }

    private void showCustomSnackbar() {
        Snackbar snackbar = Snackbar.make(coordinatorLayout, 
            "Snackbar personalizado", 
            Snackbar.LENGTH_LONG);
        
        // Personalizar colores
        snackbar.setBackgroundTint(Color.parseColor("#9C27B0"));
        snackbar.setTextColor(Color.WHITE);
        snackbar.setActionTextColor(Color.parseColor("#FFD700"));
        
        snackbar.setAction("VER", view -> 
            Toast.makeText(this, "Acción ejecutada", Toast.LENGTH_SHORT).show()
        );
        
        snackbar.show();
    }
}

🟩 9. Métodos Principales de Toast

// Toast básico
Toast.makeText(context, "Mensaje", Toast.LENGTH_SHORT).show();

// Toast con duración
Toast.LENGTH_SHORT  // 2 segundos
Toast.LENGTH_LONG   // 3.5 segundos

// Cambiar posición
Toast toast = Toast.makeText(context, "Mensaje", Toast.LENGTH_SHORT);
toast.setGravity(Gravity.TOP, 0, 100);
toast.show();

// Toast personalizado
Toast toast = new Toast(context);
toast.setView(customView);
toast.setDuration(Toast.LENGTH_LONG);
toast.show();

🟩 10. Métodos Principales de Snackbar

// Snackbar básico
Snackbar.make(view, "Mensaje", Snackbar.LENGTH_SHORT).show();

// Con acción
Snackbar.make(view, "Mensaje", Snackbar.LENGTH_LONG)
    .setAction("ACCIÓN", v -> {})
    .show();

// Personalizar colores
snackbar.setBackgroundTint(Color.RED);
snackbar.setTextColor(Color.WHITE);
snackbar.setActionTextColor(Color.YELLOW);

// Callback
snackbar.addCallback(new Snackbar.Callback() {
    @Override
    public void onShown(Snackbar sb) {
        // Cuando se muestra
    }
    
    @Override
    public void onDismissed(Snackbar sb, int event) {
        // Cuando se oculta
    }
});

🟩 11. Duraciones de Snackbar

Constante Duración
LENGTH_SHORT 1.5 segundos
LENGTH_LONG 2.75 segundos
LENGTH_INDEFINITE Hasta que se cierre

Constante	Duración
`LENGTH_SHORT`	1.5 segundos
`LENGTH_LONG`	2.75 segundos
`LENGTH_INDEFINITE`	Hasta que se cierre

🟩 12. Mejores Prácticas

Cuándo Usar Toast

✓ Mensajes informativos simples
✓ Confirmaciones sin importancia crítica
✓ Feedback de operaciones completadas
✗ Errores importantes
✗ Acciones que requieren respuesta

Cuándo Usar Snackbar

✓ Operaciones con opción de deshacer
✓ Errores que requieren acción
✓ Confirmaciones importantes
✓ Mensajes con contexto
✗ Mensajes muy frecuentes

🟩 13. Clase Helper Reutilizable

📄 MessageHelper.java

import android.graphics.Color;
import android.view.View;
import android.widget.Toast;
import com.google.android.material.snackbar.Snackbar;

public class MessageHelper {

    public static void showSuccess(View view, String message) {
        Snackbar snackbar = Snackbar.make(view, "✓ " + message, Snackbar.LENGTH_SHORT);
        snackbar.setBackgroundTint(Color.parseColor("#4CAF50"));
        snackbar.show();
    }

    public static void showError(View view, String message) {
        Snackbar snackbar = Snackbar.make(view, "✗ " + message, Snackbar.LENGTH_LONG);
        snackbar.setBackgroundTint(Color.parseColor("#F44336"));
        snackbar.show();
    }

    public static void showWarning(View view, String message) {
        Snackbar snackbar = Snackbar.make(view, "⚠ " + message, Snackbar.LENGTH_LONG);
        snackbar.setBackgroundTint(Color.parseColor("#FF9800"));
        snackbar.show();
    }

    public static void showInfo(View view, String message) {
        Snackbar snackbar = Snackbar.make(view, message, Snackbar.LENGTH_SHORT);
        snackbar.setBackgroundTint(Color.parseColor("#2196F3"));
        snackbar.show();
    }
}

▶️ Cómo Ejecutar

Abre Android Studio
Presiona Run
Prueba los diferentes botones
Observa las diferencias entre Toast y Snackbar

🧪 Resultado Final

Aplicación que muestra todos los tipos de Toast y Snackbar con ejemplos prácticos de uso.

📥 Descargar Proyecto

👉

🙌 Gracias por Visitar mi Blog

✔️ Compártelo
✔️ Déjame un comentario
✔️ Sígueme para más contenido

❓ Preguntas Frecuentes

1. ¿Cuál es la diferencia entre Toast y Snackbar?
Toast es un mensaje simple sin interacción. Snackbar es de Material Design, puede tener acciones y es más personalizable.

2. ¿Puedo cambiar la posición del Snackbar?
Snackbar siempre aparece en la parte inferior. Para otras posiciones usa Toast o crea un diseño personalizado.

3. ¿Cómo hacer que Toast dure más tiempo?
Toast solo permite LENGTH_SHORT y LENGTH_LONG. Para duraciones personalizadas considera usar Snackbar con LENGTH_INDEFINITE.

4. ¿Necesito CoordinatorLayout para Snackbar?
No es obligatorio, pero CoordinatorLayout permite que Snackbar interactúe mejor con otros componentes como FloatingActionButton.

Universo Android

Toast y Snackbar en Android

🟩 1. ¿Qué es Toast y Snackbar?

🟩 2. Diferencias Principales

🟩 3. Crear el Proyecto

🟩 4. Agregar Dependencias

🟩 5. Diseño XML Principal

🟩 6. Layout Toast Personalizado

🟩 7. Drawable para Toast

🟩 8. MainActivity

🟩 9. Métodos Principales de Toast

🟩 10. Métodos Principales de Snackbar

🟩 11. Duraciones de Snackbar

🟩 12. Mejores Prácticas

Cuándo Usar Toast

Cuándo Usar Snackbar

🟩 13. Clase Helper Reutilizable

▶️ Cómo Ejecutar

🧪 Resultado Final

📥 Descargar Proyecto

🙌 Gracias por Visitar mi Blog

❓ Preguntas Frecuentes

No hay comentarios:

Publicar un comentario

Tags

Facebook

Seguidores

Buscar este blog

Colaboradores

Universo Android Cosmos

Toast y Snackbar en Android

Recent

Popular

Comments

Blog Archive