Android Snackbar Example

In this tutorial you will learn about android snackbar example.

Snackbar is a new UI widget introduced in material design. It is an advance version or we can say replacement of Toast widget. Snackbar is used to display a short message at the bottom of screen. The message can be dismissed by swiping it.

Also Read: Android Custom Toast Example

Toast vs Snackbar

• Toast can be placed anywhere on the screen while Snackbar can be placed at bottom only.
• Toast can’t have a button while Snackbar can have at most one action button.
• Toast message can’t be dismissed before its time period. Snackbar message can be dismissed by just swiping it.

 

Simple Snackbar

We can make a Snackbar by writing following line of code:

Snackbar.make(coordinatorLayout, "Simple Snackbar", Snackbar.LENGTH_LONG).show();

 

The make() method takes 3 arguments.

First Argument: It is the root layout for activity. Here we have used CoordinatorLayout because it gives some extra functionality to Snackbar like if we have used floating button then when Snackbar is displayed the floating button automatically goes up to provide space for Snackbar. By using CoordinatorLayout we can also dismiss the Snackbar by swiping.

Second Argument: It is the message that you want to display in Snackbar.

Third Argument: Time period for which Snackbar should be displayed.

• Snackbar.LENGTH_SHORT: Display for short time period
• Snackbar.LENGTH_LONG: Display for long time period
• Snackbar.LENGTH_INDEFINITE: Displayed until you close it.

 

Snackbar with Action Button

You can also add an action button in Snackbar by using setAction() method. It can be done in following way.

Snackbar.make(coordinatorLayout,"Snackbar with Action",Snackbar.LENGTH_LONG).setAction ("OK", new View.OnClickListener() {
	@Override
	public void onClick(View v) {
        	Snackbar.make(coordinatorLayout,"You clicked on action button",Snackbar.LENGTH_SHORT).show();
	}
}).show();

 

You can’t add more than one button.

 

Customizing Snackbar

We can change color of text of message and action button in following way.

//set color of action button text
snackbar.setActionTextColor(Color.YELLOW);

//set color of snackbar text
TextView view = (TextView) snackbar.getView().findViewById(android.support.design.R.id.snackbar_text);
view.setTextColor(Color.GREEN);

 

Android Snackbar Example

Below example shows how to make different types of Snackbar in android.

Create a new project with package name com.snackbarexample.

 

Note: Make sure you add dependency for android design support library in build.gradle (Module:app) file. Just add following line under dependency section and sync the project.

compile 'com.android.support:design:23.4.0'

The library version may vary depending upon your SDK version.

 

Now add following code in respective files.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.snackbarexample.MainActivity"
    android:id="@+id/coordinatorLayout">

    <include layout="@layout/content_main"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>

 

content_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.snackbarexample.MainActivity"
    android:orientation="vertical"
    android:gravity="center">

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Simple"
        android:id="@+id/btn1"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="With Action"
        android:id="@+id/btn2"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Custom"
        android:id="@+id/btn3"/>

</LinearLayout>

 

MainActivity.java

package com.snackbarexample;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.CoordinatorLayout;
import android.support.design.widget.Snackbar;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

public class MainActivity extends Activity {
    Button btn1, btn2, btn3;
    CoordinatorLayout coordinatorLayout;

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

        btn1 = (Button) findViewById(R.id.btn1);
        btn2 = (Button) findViewById(R.id.btn2);
        btn3 = (Button) findViewById(R.id.btn3);

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

        btn1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Snackbar.make(coordinatorLayout,"Simple Snackbar",Snackbar.LENGTH_LONG).show();
            }
        });

        btn2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Snackbar.make(coordinatorLayout,"Snackbar with Action",Snackbar.LENGTH_LONG).setAction("OK", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Snackbar.make(coordinatorLayout,"You clicked on action button",Snackbar.LENGTH_SHORT).show();
                    }
                }).show();
            }
        });

        btn3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Snackbar snackbar = Snackbar.make(coordinatorLayout,"Custom Snackbar",Snackbar.LENGTH_LONG).setAction("OK", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Snackbar.make(coordinatorLayout,"You clicked on action button",Snackbar.LENGTH_SHORT).show();
                    }
                });

                //set color of action button text
                snackbar.setActionTextColor(Color.YELLOW);

                //set color of snackbar text
                TextView view = (TextView) snackbar.getView().findViewById(android.support.design.R.id.snackbar_text);
                view.setTextColor(Color.GREEN);

                snackbar.show();
            }
        });
    }
}

 

Now save and run your project.

 

Screenshot

 

Comment below if you are facing any problem related to above android snackbar example.