How to use Snackbar in Android

Snackbar in Android
Snackbar in Android

The Snackbar is a view that provides brief feedback about app processes at the bottom of the mobile screen. It appears above all elements on the screen, indicating the user to perform that operation first. It supports content labeling for approachability and is understandable by most screen readers.

Snackbar is just like the Toast message but in case of snackbar user can interact with it. It can offer actions like “OKAY”, “DISMISS”, “RETRY”, “UNDO”, “REDO”, etc. It automatically disappears after a timeout or after user interaction.

Note: Snackbars work properly if they are held inside of a CoordinatorLayout. CoordinatorLayout allows the snackbar to enable performance like swipe-to-dismiss, as well as automatically moving widgets like FloatingActionButton

Snackbar vs. Toast

  • Snackbar appears above all elements on the screen, unlike toast that may block any significant part of the screen.
  • Snackbar performs actions like undo, redo, retry, etc. But toast not.
  • Users can easily dismiss the snackbar, but in the case of toast, users need to wait until the end of the time scheduled for it.

Showing the snackbar

To create a snackbar, calling make creates a snackbar. Creating and showing are two different things. To show a snackbar, use the show method on the return Snackbar instance.

To show snackbar with a message and no action:

  • The view is used to make a snackbar.
  • Generally, it viewed that interacted with a trigger.
  • Let’s say the trigger is a button.
make and show methods

Adding an action

To add action, use the setAction method on that object return from make.

Sanckbar is automatically closed when the action is performed.

Snackbar with action:

snackbar with setAction method
snackbar with setAction method

Anchoring the snackbar

By default, the snackbar is anchored at the bottom of their parent’s view. But we can use setAnchorView method to appear the snackbar above a specific widget within that layout. For example, a FloatingActionButton.

setAnchorView in snackbar
setAnchorView in snackbar

Using a snackbar in Android Studio

To create a snackbar in the android studio, you just need a library. For that, we used a Material Design Library.

Add the library dependency into our build.gradle (app) file:

material library

As we are using material design, so we need to change some styling of the layout. For that go to res/values/style.xml file and change the theme to Theme.MaterialComponents.Light.NoActionBar

style.xml file

Creating the snackbar in the android studio (XML file)

first, create the view of the snackbar. And also add a Floating ActionButton to show how the Anchoring things worked.

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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<Button
android:id="@+id/snackbarBtn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginEnd="32dp"
android:text="Show Snackbar"
android:textStyle="bold"
android:textSize="25dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/floatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="32dp"
android:layout_marginBottom="32dp"
android:clickable="true"
app:layout_constraintBottom_toTopOf="@+id/snackbar_layout"
app:layout_constraintEnd_toEndOf="parent"
app:srcCompat="@drawable/ic_action_name" />
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="@+id/snackbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Creating the snackbar in the android studio (Java file)

Open the main activity and add the below code.

Here we make the snackbar, set the timeout, set the anchor view, set the action, set the animation, and then display the snackbar on the screen

MainActivity.java

package com.example.snackbar;
// snackbar using MDC library

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.floatingactionbutton.FloatingActionButton;
import com.google.android.material.snackbar.BaseTransientBottomBar;
import com.google.android.material.snackbar.Snackbar;

public class MainActivity extends AppCompatActivity {

private Button mSnackbarBtn;
private FloatingActionButton mFloatingActionButton;
private CoordinatorLayout mSnackbarLayout;

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

mSnackbarBtn = findViewById(R.id.snackbarBtn);
mFloatingActionButton = findViewById(R.id.floatingActionButton);
mSnackbarLayout = findViewById(R.id.snackbar_layout);

mSnackbarBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//start create the snakeBar
Snackbar snackbar = Snackbar.make(v, "Hello Guys!", Snackbar.LENGTH_LONG);
snackbar.setDuration(4000);
snackbar.setAnchorView(mFloatingActionButton);;
snackbar.setAnimationMode(BaseTransientBottomBar.ANIMATION_MODE_SLIDE);
snackbar.setAction("OKAY", new View.OnClickListener() {
@Override
public void onClick(View v) {
// Do Something here
}
});
snackbar.show();
}
});
}
}

Output:

Download code

Thank you. Hope you like it.

Hi everyone, myself Golap an Android app developer with UI/UX designer.