Android Snackbar Example

Leave a Comment / Android Tutorial / Android UI

android.support.design.widget.Snackbar is a control in the Android Support Design Library. It can quickly pop up a message at the bottom of the screen. Users can click the button on the right side of the Snackbar to interact with it. This article includes three Snackbar examples.

Table of Contents

1. Snackbar Introduction.

Need to add below dependencies in build.gradle file. These dependencies can be added automatically by Android Studio.
```
compile 'com.android.support:design:26.+'
```

Call Snackbar.make(view, message_text, duration) method to create an instance. The duration parameter has three values: Snackbar.LENGTH_SHORT, Snackbar.LENGTH_LONG, Snackbar.LENGTH_INDEFINITE.
Call Snackbar.setAction(action_text, click_listener) method to set button text and button click listener.
Call Snackbar.show() method to show it. It will be shown at the screen bottom.

Snackbar.setCallback() method can be used to respond after the snackbar is shown and before being dismissed.

2. Snackbar Example.

android snackbar example new

If you can not watch the above video, you can see it on the youtube URL https://youtu.be/7bUSo1vLlAM

This example includes three buttons, there will popup a special snackbar when clicking one button.

2.1 Main Layout XML File.

activity_snack_bar.xml

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <Button
        android:id="@+id/showSnackbarButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Show Snack Bar"
        android:textSize="20dp"/>

    <Button
        android:id="@+id/showCustomSnackbarButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Show Custom Snack Bar"
        android:textSize="20dp"/>

    <Button
        android:id="@+id/showCustomViewSnackbarButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Show Custom View Snack Bar"
        android:textSize="20dp"/>


    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <!-- To show snackbar near source widget, you need to wrap the widget use CoordinatorLayout. -->
        <Button
            android:id="@+id/showSnackbarHereButton"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="Show Snackbar Here"
            android:textSize="20dp"/>

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

</LinearLayout>

2.2 Activity Java File.

SnackBarActivity.java

package com.dev2qa.example;

import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;

public class SnackBarActivity extends AppCompatActivity {

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

        setTitle("dev2qa.com --- Android Snackbar Example");

        this.showSnackbar();

        this.showCustomSnackbar();

        this.showCustomViewSnackbar();

        this.showSnackbarHere();
    }


    // A standard usage of android Snackbar.
    private void showSnackbar()
    {
        Button showSnackbarButton = (Button)findViewById(R.id.showSnackbarButton);

        showSnackbarButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // Create a Snackbar instance, the message is displayed at the left side.
                Snackbar snackbar = Snackbar.make(view, "A short message is comming!", Snackbar.LENGTH_LONG);
                // Set button with text Open at right side..
                snackbar.setAction("Open", new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        // When user click Open button, an AlertDialog will be displayed.
                        AlertDialog alertDialog = new AlertDialog.Builder(SnackBarActivity.this).create();
                        alertDialog.setMessage("Hello, welcome to use snackbar.");
                        alertDialog.show();
                    }
                });


                // Set the Callback function.
                snackbar.setCallback(new Snackbar.Callback(){
                    @Override
                    public void onShown(Snackbar sb) {
                        Toast.makeText(SnackBarActivity.this, "Snackbar has been shown.", Toast.LENGTH_SHORT).show();
                    }

                    @Override
                    public void onDismissed(Snackbar transientBottomBar, int event) {
                        Toast.makeText(SnackBarActivity.this, "Snackbar is dismessed.", Toast.LENGTH_SHORT).show();
                    }
                });

                // Show it at screen bottom.
                snackbar.show();
            }
        });
    }

    // Custom Snackbar.
    private void showCustomSnackbar()
    {
        Button showCustomSnackbarButton = (Button)findViewById(R.id.showCustomSnackbarButton);

        showCustomSnackbarButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar snackbar = Snackbar.make(view, "A friend send a message!", Snackbar.LENGTH_LONG);
                snackbar.setAction("Show", new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        AlertDialog alertDialog = new AlertDialog.Builder(SnackBarActivity.this).create();
                        alertDialog.setMessage("Hello, i am from dev2qa.com.");
                        alertDialog.show();
                    }
                });

                // Set action text color.
                snackbar.setActionTextColor(Color.RED);

                // Get Snackbar view.
                Snackbar.SnackbarLayout snackbarView = (Snackbar.SnackbarLayout)snackbar.getView();

                // Set background color.
                snackbarView.setBackgroundColor(Color.BLUE);

                // Set message text color.
                TextView messageTextView = snackbarView.findViewById(R.id.snackbar_text);
                messageTextView.setTextColor(Color.GREEN);
                messageTextView.setTextSize(20);

                snackbar.show();
            }
        });
    }

    // Custom Snackbar view content from a layout xml file.
    private void showCustomViewSnackbar()
    {
        Button showCustomViewSnackbarButton = (Button)findViewById(R.id.showCustomViewSnackbarButton);

        showCustomViewSnackbarButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // Create an instance.
                Snackbar snackbar = Snackbar.make(view, "", Snackbar.LENGTH_LONG);
                snackbar.setAction("Show", new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        AlertDialog alertDialog = new AlertDialog.Builder(SnackBarActivity.this).create();
                        alertDialog.setMessage("Hello custom snackbar.");
                        alertDialog.show();
                    }
                });

                // Get the view object.
                Snackbar.SnackbarLayout snackbarView = (Snackbar.SnackbarLayout) snackbar.getView();

                // Get custom view from external layout xml file.
                View customView = getLayoutInflater().inflate(R.layout.activity_snack_bar_custom_view, null);

                snackbarView.addView(customView, 0);

                snackbar.show();
            }
        });
    }

    // Open a snackbar near the source widget..
    private void showSnackbarHere()
    {
        // The source widget need to be wrapped in a CoordinatorLayout xml element in layout xml file.
        Button showSnackbarHereButton = (Button)findViewById(R.id.showSnackbarHereButton);

        showSnackbarHereButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // Create an instance.
                Snackbar snackbar = Snackbar.make(view, "Snack bar is shown near source widget", Snackbar.LENGTH_LONG);
                snackbar.setAction("Show", new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        AlertDialog alertDialog = new AlertDialog.Builder(SnackBarActivity.this).create();
                        alertDialog.setMessage("dev2qa.com --- Learn java, android easy and simple.");
                        alertDialog.show();
                    }
                });

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

2.3 Snackbar Custom View Layout XML File.

This layout XML file is used in the third example. When the user clicks the third button, the snackbar will set this layout XML file content to it’s view.

activity_snack_bar_custom_view.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/message_block"
        android:layout_gravity="center_vertical"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is a custom snackbar."
        android:textSize="20dp"
        android:textColor="@color/colorOrange"
        android:layout_gravity="center_vertical"/>

</LinearLayout>

Leave a Comment Cancel Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.