o7planning

Android SnackBar Tutorial with Examples

  1. Android Snackbar
  2. Example of Snackbar
  3. Example of Snackbar (+CoordinatorLayout)

1. Android Snackbar

Android Snackbar is a small interface component that provides a brief response after one user action. It appears at the bottom of the screen, and automatically disappears after the timeout or when the user interacts elsewhere on the screen.
Snackbar also provides a button as an option to perform the action. For example, undo an action that has just been performed or retry doing the action last performed if it fails.
Snackbar with action button
Snackbar snackbar = Snackbar
        .make(baseView, "Message is deleted", Snackbar.LENGTH_LONG)
        .setAction("UNDO", new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // Show another Snackbar.
                Snackbar snackbar1 = Snackbar.make(baseView, "Message is restored!", Snackbar.LENGTH_SHORT);
                snackbar1.show();
            }
        });

snackbar.show();
Snackbar is not available in Android SDK, so you need to declare this library in build.gradle (Module app):
build.gradle (Module: app)
...
dependencies {
    ...
    implementation 'com.google.android.material:material:1.0.0'
}
Then check out the later version here:

2. Example of Snackbar

Great! Now we are going to create a simple project using Snackbar. In case there are other more complex applications involving Snackbar, FloatingActionButton, etc, you'd better use CoordinatorLayout. (See more in the second example).
Example preview:
Snackbar (Default)
Snackbar with action button
Snackbar (Styling)
Alright, now on Android Studio, create a project:
  • File > New > New Project > Empty Activity
    • Name: SnackbarExample
    • Package name: org.o7planning.snackbarexample
    • Language: Java
As mentioned earlier, Snackbar is not available in Android SDK yet; therefore, you need to declare the following library to your project:
build.gradle (Module: app)
...
dependencies {
    ...
    implementation 'com.google.android.material:material:1.0.0'
}
The interface of the application will look like this:
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/constraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="16dp"
        android:text="Snackbar (Default)"
        android:textAllCaps="false"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button1"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="16dp"
        android:text="Snackbar with action button"
        android:textAllCaps="false"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button1" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button2"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="16dp"
        android:text="Snackbar (Styling)"
        android:textAllCaps="false"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button2" />
</androidx.constraintlayout.widget.ConstraintLayout>
MainActivity.java
package org.o7planning.snackbarexample;

import androidx.appcompat.app.AppCompatActivity;

import android.graphics.Color;
import android.os.Build;
import android.os.Bundle;
import android.view.Gravity;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

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

public class MainActivity extends AppCompatActivity {

    private View baseView;

    private Button button1;
    private Button button2;
    private Button button3;

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

        // Container
        this.baseView = this.findViewById(R.id.constraintLayout);

        this.button1 = (Button) this.findViewById(R.id.button1);
        this.button2 = (Button) this.findViewById(R.id.button2);
        this.button3 = (Button) this.findViewById(R.id.button3);

        this.button1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showSnackbarDefault();
            }
        });
        this.button2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showSnackbarActionCall();
            }
        });
        this.button3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showSnackbarCustom();
            }
        });
    }

    private void showSnackbarDefault()  {
        Snackbar snackbar = Snackbar
                .make(this.baseView, "Install successful!", Snackbar.LENGTH_LONG);
        // Show
        snackbar.show();
    }

    private void showSnackbarActionCall() {

        Snackbar snackbar = Snackbar
                .make(this.baseView, "Message is deleted", Snackbar.LENGTH_LONG)
                .setAction("UNDO", new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        // Show another Snackbar.
                        Snackbar snackbar1 = Snackbar.make(baseView, "Message is restored!", Snackbar.LENGTH_SHORT);
                        snackbar1.show();
                    }
                });

        snackbar.show();
    }


    private void showSnackbarCustom() {
        Snackbar snackbar = Snackbar
                .make(this.baseView, "Try again!", Snackbar.LENGTH_LONG)
                .setAction("RETRY", new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                    }
                });
        snackbar.setActionTextColor(Color.RED);
        View sbView = snackbar.getView();
        TextView textView = sbView.findViewById(com.google.android.material.R.id.snackbar_text);
        textView.setTextColor(Color.YELLOW);
        // Align center.
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M){
            textView.setTextAlignment(View.TEXT_ALIGNMENT_CENTER);
        } else {
            textView.setGravity(Gravity.CENTER_HORIZONTAL);
        }
        // Show Sneckbar
        snackbar.show();
    }
}

3. Example of Snackbar (+CoordinatorLayout)

In case there is a complex application involving Snackbar, FloatingActionButton, etc, you should use CoordinatorLayout. It helps prevent the overlap between Snackbar and FloatingActionButton.
Using Snackbar, FloatingActionBar along with CoordinatorLayout brings you the smooth interface and avoids the overlap.
Read this article for more details on the CoordinatorLayout:
  • Android CoordinatorLayout

Android Programming Tutorials

Show More

Android Programming Tutorials

Show More

Newest Articles

Show More