Snackbar Implementation in Android app

Hey Technoz, We are here to know an interesting UI component of android, it is Snackbar. We have seen it in most applications, it is generally used to show some alert message to the user. It is a best alternative of Toast. Snackbar implementation and Snackbar with action callback is much more interesting and also customization.

So lets start with with the Snackbar implementation. Create a new android project with Empty Activity and wait for the gradle to build successfully.
We’ll build two buttons which shows default snackbar and snackbar with action callback respectively.

Simple snackbar can be constructed with the following code.

Snackbar snackbar = Snackbar.make(constraintLayout,"This is default Snackbar",LENGTH_LONG);
        snackbar.show();

Above code builds the following snackbar.

The snackbar with action callback, which responds on button click can be shown as below.

on clicking ‘show’ button, we can show another message with following code

.setAction("Show", new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        Snackbar snackbar1 = Snackbar.make(constraintLayout, "Hi, This is Technopoints", LENGTH_LONG);
                        snackbar1.show();
                    }
                });

Now, create step by step full project of Snackbar implementation in android and Snackbar with action callback.

Create Android Project

1. Create layout file

Now code file activity_main.xml as follows:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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"
    android:id="@+id/con">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_margin="10sp">
        <android.support.v7.widget.AppCompatButton
            android:background="@color/colorAccent"
            android:textColor="#FFFFFF"
            android:onClick="show"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Default Snackbar"
            android:layout_marginTop="10sp"/>

        <Button
            android:background="@color/colorAccent"
            android:textColor="#FFFFFF"
            android:onClick="callback"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Snackbar With action callback"
            android:layout_marginTop="10sp"/>
    </LinearLayout>

</android.support.constraint.ConstraintLayout>

There are only two buttons for operations in the above file which calls two functions on clicking event.

2. Snackbar Implementation in MainActivity

Now we have to code file MainActivity.java as follows.

package net.softglobe.tutorials;

import android.graphics.Color;
import android.support.constraint.ConstraintLayout;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;

import static android.support.design.widget.Snackbar.LENGTH_LONG;

public class MainActivity extends AppCompatActivity {

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

    public void show(View v){
        final ConstraintLayout constraintLayout = findViewById(R.id.con);
        Snackbar snackbar = Snackbar.make(constraintLayout,"This is default Snackbar",LENGTH_LONG);
        snackbar.show();
    }

    public void callback(View v){
        final ConstraintLayout constraintLayout = findViewById(R.id.con);
            Snackbar snackbar = Snackbar
                .make(constraintLayout, "One new message", LENGTH_LONG)
                .setAction("Show", new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        Snackbar snackbar1 = Snackbar.make(constraintLayout, "Hi, This is Technopoints", LENGTH_LONG);
                        snackbar1.show();
                    }
                });
        snackbar.show();
        snackbar.setActionTextColor(Color.WHITE);
        // Changing action button text color
        View sbView = snackbar.getView();
        TextView textView = (TextView) sbView.findViewById(android.support.design.R.id.snackbar_text);
        textView.setTextColor(Color.YELLOW);

    }
}

The first function creates a simple snackbar in app layout. While, the next function makes a callback i.e. it has action button on snackbar and its implementation is done via OnClickListener function.

That’s it! Run your app now and you will find the different working Snackbars, Snackbar with action callback as shown in below images.

Yes, it is working fine! If you have any doubts or question related to this tutorial, please comment below and we’ll try our best to reply you.

Download Source Code

If you want to jump directly on the snackbar implementation, snackbar with action callback, you can download the source code from the link below.

you may also see tutorial of implementing map on android app.