Android Snackbar Example

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

1. Snackbar Introduction.

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

    android project build.gradle file

  2. Call Snackbar.make(view, message_text, duration) method to create an instance. The duration parameter has three value : Snackbar.LENGTH_SHORT, Snackbar.LENGTH_LONG, Snackbar.LENGTH_INDEFINITE.
  3. Call Snackbar.setAction(action_text, click_listener) method to set button text and button click listener.
  4. Call Snackbar.show() method to show it. It will be shown at the screen bottom.
  5. Snackbar.setCallback() method can be used to response after snackbar is shown and before dismissed.

2. Snackbar Example.

This example include three buttons, there will popup a special snackbar when click one button.

android snackbar example new

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 user click the third button, the snackbar will set this layout xml file content to it’s view.

custom snackbar view content

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>
(Visited 1,246 times, 3 visits today)
READ :   How To Get Real File Path From Android Uri

Leave a Reply

Your email address will not be published. Required fields are marked *

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