Android Tutorial – How to use SnackBar

In this post, we will see a simple application on How to show Snackbar in android. We will create an app with android edittext and two buttons, on one we will show text from our edittext view and on other button click we will display date and time on android snackbar. So let’s begin.

DOWNLOAD SOURCE CODE

Android Snackbar Tutorial.

To display a simple snackbar below code can be used directly in your application.

public void ShowSnackBar(String message) {

    Snackbar.make(parentLayoutID, message, Snackbar.LENGTH_LONG)
            .setAction("CLOSE", new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                }
            })
            .setActionTextColor(getResources().getColor(android.R.color.holo_red_light))
            .show();

}

Here, parentLayoutID is the name of the parent android layout on which Snackbar message will be displayed.

Also, you can customize the setAction action and show a custom button text. I’m using the default option of Close and it does nothing. You can call any method you want inside the :

setAction("CLOSE", new View.OnClickListener() { 

@Override public void onClick(View view) { 

} 

})

To make the sample app, edit your activity_main.xml file as below:

res > layout > activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:id="@+id/lvparent"
    android:layout_height="match_parent"
    android:orientation="vertical">


    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:fontFamily="sans-serif-condensed-medium"
        android:gravity="center_horizontal"
        android:text="SnackBar in Android"
        android:textSize="25sp"
        android:textStyle="bold" />

    <EditText
        android:id="@+id/edtMessage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:fontFamily="sans-serif-condensed-medium"
        android:padding="5dp" />

    <Button
        android:id="@+id/btnShowMessage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:background="@color/colorAccent"
        android:fontFamily="sans-serif-condensed-medium"
        android:text="Show Message"
        android:textColor="#fff" />

    <Button
        android:id="@+id/btnShowDateTime"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:background="@color/colorPrimaryDark"
        android:fontFamily="sans-serif-condensed-medium"
        android:text="Show Date Time"
        android:textColor="#fff" />
</LinearLayout>

The layout is simple to understand. It has one android edittext and two buttons to show our snackbar messages accordingly. Now edit your MainActivity.java file as below

MainAcitivity.java:

package com.app.mysnackbar;

import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.LinearLayout;

import java.util.Calendar;

public class MainActivity extends AppCompatActivity {

    LinearLayout lvparent;
    EditText edtMessage;
    Button btnShowMessage, btnShowDateTime;

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

        lvparent = findViewById(R.id.lvparent);
        btnShowDateTime = findViewById(R.id.btnShowDateTime);
        btnShowMessage = findViewById(R.id.btnShowMessage);

        edtMessage = findViewById(R.id.edtMessage);

        btnShowMessage.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                    ShowSnackBar(edtMessage.getText().toString());
            }
        });

        btnShowDateTime.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                ShowSnackBar(Calendar.getInstance().getTime().toString());
            }
        });
    }

    public void ShowSnackBar(String message) {
        if (message == null || message.trim().equals(""))
            message = "Please enter text to show";

        Snackbar.make(lvparent, message, Snackbar.LENGTH_LONG)
                .setAction("CLOSE", new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                    }
                })
                .setActionTextColor(getResources().getColor(android.R.color.holo_red_light))
                .show();

    }
}

On button click listeners methods of our buttons we are passing text from editText and datetime from android calendar instance to ShowSnackBar method, which is displaying the snackbar with passed message parameter.

DOWNLOAD SOURCE CODE