Monday, October 14, 2019

Android Snackbar Tutorial — Material Design Message Component

Snackbar in Android is a modern Material Design component introduced as an improved alternative to Toast messages.

Snackbar provides:

  • Better user interaction
  • Action support
  • Swipe dismiss behavior
  • Material Design animations
  • CoordinatorLayout integration

Unlike Toast, Snackbar appears at the bottom of the screen and can optionally contain an action button.


What Is Snackbar in Android?

Snackbar is a lightweight UI component used for displaying temporary messages to users.

Snackbar is part of:


Material Design Components

and is commonly used for:

  • Success messages
  • Error notifications
  • Undo actions
  • Connectivity updates
  • User feedback

Why Snackbar Is Better Than Toast

Snackbar provides a more interactive and modern user experience compared to Toast.


Difference Between Toast and Snackbar

Toast Snackbar
Can appear anywhere Appears at bottom of screen
No action support Supports action button
Cannot be dismissed manually Can be swiped away
Simple popup message Material Design interaction
Less interactive More user friendly

Modern Snackbar Dependency

Inside:


build.gradle

Add:


implementation
'com.google.android.material:material:1.11.0'

Basic Snackbar Example


Snackbar snackbar = Snackbar.make(
        coordinatorLayout,
        "www.codechaindev.com",
        Snackbar.LENGTH_LONG
);

snackbar.show();

Understanding Snackbar.make()

The:


make()

method accepts three parameters:

  • Parent View
  • Message Text
  • Duration

Parameter Explanation

1. Parent View

Snackbar requires a parent view to attach itself properly.

Usually:


CoordinatorLayout

is recommended.


2. Message Text

This is the message displayed inside Snackbar.


3. Duration

Snackbar duration options:

  • LENGTH_SHORT
  • LENGTH_LONG
  • LENGTH_INDEFINITE

Creating activity_main.xml

Create:


res/layout/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">

    <Button
        android:id="@+id/btnSnackbar"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Show Snackbar"

        android:layout_gravity="center"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Why Use CoordinatorLayout?

CoordinatorLayout enables:

  • Snackbar animations
  • FloatingActionButton movement
  • Material Design behaviors
  • Automatic view coordination

Create MainActivity.java


package com.example.snackbardemo;

import androidx.appcompat.app.AppCompatActivity;
import androidx.coordinatorlayout.widget.CoordinatorLayout;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;

import com.google.android.material.snackbar.Snackbar;

public class MainActivity
        extends AppCompatActivity {

    @Override
    protected void onCreate(
            Bundle savedInstanceState
    ) {

        super.onCreate(savedInstanceState);

        setContentView(
                R.layout.activity_main
        );

        CoordinatorLayout coordinatorLayout =
                findViewById(
                        R.id.coordinatorLayout
                );

        Button button =
                findViewById(
                        R.id.btnSnackbar
                );

        button.setOnClickListener(
                new View.OnClickListener() {

            @Override
            public void onClick(View v) {

                Snackbar.make(
                        coordinatorLayout,
                        "Snackbar Example",
                        Snackbar.LENGTH_LONG
                ).show();
            }
        });
    }
}

How Snackbar Works

  1. User clicks button
  2. Snackbar.make() creates Snackbar
  3. Snackbar attaches to CoordinatorLayout
  4. Message animates from bottom
  5. Snackbar disappears automatically

Adding Action Button

Snackbar supports optional action buttons.


Snackbar with Action Example


Snackbar.make(
        coordinatorLayout,
        "Item Deleted",
        Snackbar.LENGTH_LONG
)

.setAction(
        "UNDO",

        new View.OnClickListener() {

            @Override
            public void onClick(View v) {

            }
        }
)

.show();

Why Snackbar Actions Are Useful

Snackbar actions improve UX by allowing:

  • Undo operations
  • Retry actions
  • Quick interactions
  • Contextual feedback

Snackbar Duration Types

Duration Description
LENGTH_SHORT Quick message
LENGTH_LONG Longer display
LENGTH_INDEFINITE Shown until dismissed

Customizing Snackbar

Snackbar supports:

  • Text color
  • Background color
  • Custom action colors
  • Animations
  • Custom views

Example — Change Action Color


Snackbar snackbar =
        Snackbar.make(
                coordinatorLayout,
                "Network Error",
                Snackbar.LENGTH_LONG
        );

snackbar.setActionTextColor(
        Color.RED
);

snackbar.show();

Modern Android Recommendations

Modern Android applications now commonly use:

  • Material Design 3
  • Jetpack Compose SnackbarHost
  • MVVM Architecture
  • Lifecycle-aware UI events

Jetpack Compose Snackbar Example


SnackbarHost(
    hostState = snackbarHostState
)

Jetpack Compose now provides declarative Snackbar APIs.


Common Beginner Mistakes

1. Not Using CoordinatorLayout

Snackbar animations work best with:


CoordinatorLayout

2. Using Multiple Snackbars Together

Avoid stacking too many Snackbar messages simultaneously.


3. Using Snackbar for Critical Alerts

Snackbar is best for temporary feedback, not critical errors.


Snackbar Best Practices

  • Keep messages short
  • Use meaningful actions
  • Avoid long text blocks
  • Use for temporary feedback only

FAQ

What is Snackbar in Android?

Snackbar is a Material Design message component shown temporarily at the bottom of the screen.


Why use Snackbar instead of Toast?

Snackbar supports actions, animations, and swipe dismiss functionality.


Can Snackbar contain buttons?

Yes. Snackbar supports one optional action button.


Conclusion

Snackbar is one of the most useful Material Design components in Android development.

It provides interactive feedback, modern animations, action support, and improved user experience compared to traditional Toast messages.

Modern Android applications should combine Snackbar, CoordinatorLayout, Material Design 3, and lifecycle-aware UI architecture for scalable production-grade applications.


About the Author

Salil Jha is a Full Stack and Mobile Developer specializing in Android, React Native, fintech systems, scalable SaaS platforms, and developer tooling products.

CodeChain Dev — Build Modern Products. Solve Real Problems.

No comments:

Post a Comment