How to use 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.
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:
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.
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:
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
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:
Thank you. Hope you like it.
