snackbar android example

Android Snackbar Material design with Example [Step By Step]

Android Snackbar is an interesting component introduced by Material Design. Snackbars are just like Toast messages except they provide action to interact with. Snackbar will be displayed at the bottom of the screen and can be swiped off in order to dismiss them.

Difference between Toast and Snackbar

  • Toast messages can be customized and printed anywhere on the screen, but a Snackbar can be only shown in the bottom of the screen.
  • A Toast message doesn’t have action button, but Snackbar may have action button optionally.
  • Toast message cannot be off until the time limit finish, but Snackbar can be swiped off before the time limit.

You can set how long the message will be shown using this three different values.

  • Snackbar.LENGTH_LONG
  • Snackbar.LENGTH_SHORT
  • Snackbar.LENGTH_INDEFINITE

velmm download code

github

Getting started with Snackbar Example

In Android Studio, Create New Project and fill all the details required to create a new project.

Open build.gradle and add design support library dependency.

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

Related: Butterknife Android Studio with Example [Latest]


Simple Android Snackbar

Below is the syntax of a simple snackbar. The make function accepts three parameters. View, display message and duration of the message to be displayed.

Snackbar snackbar = Snackbar.make(coordinatorLayout,"This is Simple Snackbar",Snackbar.LENGTH_SHORT);
snackbar.show();

snackbar android example

 

Android Snackbar with Action Callback

You can also mention a callback interaction method using setAction() method. This allows us to take certain action when the user interacts with the snackbar.

Snackbar snackbar = Snackbar.make(coordinatorLayout,"Snackbar With Action",Snackbar.LENGTH_SHORT);
snackbar.setAction("UNDO", new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Toast.makeText(getApplicationContext(),"Undo action",Toast.LENGTH_SHORT).show();
    }
});
snackbar.show();

snackbar with action

Customizing the Android Snackbar

Snackbar comes with default white color text and #323232 background color. You can override these colors.

Snackbar snackbar = Snackbar.make(coordinatorLayout,"Custom Snackbar",Toast.LENGTH_SHORT);
snackbar.setAction("UNDO", new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Toast.makeText(getApplicationContext(),"Undo action",Toast.LENGTH_SHORT).show();
    }
});

snackbar.setActionTextColor(Color.BLUE);

View snackbarView = snackbar.getView();
TextView snackbarText = (TextView) snackbarView.findViewById(android.support.design.R.id.snackbar_text);
snackbarText.setTextColor(Color.YELLOW);
snackbar.show();

custom snackbar android

Floating Action Button With Android Snackbar

Snackbar overlap the Floating Action Button. In this case, we can use the CoordinatorLayout so that the FAB moves up a little bit to give space to Snackbar. Please check the below example.

Android Snackbar Example

main_activity.xml

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

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:theme="@style/ToolBarStyle"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

    </android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>


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

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:layout_gravity="bottom|right"
        android:src="@drawable/ic_add_black_24dp"/>

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

app_content.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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:orientation="vertical">

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Simple Snackbar"
        android:onClick="simplySnackbar"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="snackbarWithAction"
        android:text="Snackbar with Action"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="customSnackbar"
        android:text="Custom Snackbar"/>

</LinearLayout>

MainActivity.java

package com.example.velmurugan.snackbarsexample;

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

public class MainActivity extends AppCompatActivity {


    private CoordinatorLayout coordinatorLayout;
    private Toolbar toolbar;

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

        coordinatorLayout = (CoordinatorLayout)findViewById(R.id.coordinatorLayout);
        toolbar = (Toolbar)findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
    }


    public void simplySnackbar(View view){

        Snackbar snackbar = Snackbar.make(coordinatorLayout,"This is Simple Snackbar",Snackbar.LENGTH_SHORT);
        snackbar.show();

    }

    public void snackbarWithAction(View view){
        Snackbar snackbar = Snackbar.make(coordinatorLayout,"Snackbar With Action",Snackbar.LENGTH_SHORT);
        snackbar.setAction("UNDO", new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(getApplicationContext(),"Undo action",Toast.LENGTH_SHORT).show();
            }
        });
        snackbar.show();
    }

    public void customSnackbar(View view){

        Snackbar snackbar = Snackbar.make(coordinatorLayout,"Custom Snackbar",Toast.LENGTH_SHORT);
        snackbar.setAction("UNDO", new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(getApplicationContext(),"Undo action",Toast.LENGTH_SHORT).show();
            }
        });

        snackbar.setActionTextColor(Color.BLUE);

        View snackbarView = snackbar.getView();
        TextView snackbarText = (TextView) snackbarView.findViewById(android.support.design.R.id.snackbar_text);
        snackbarText.setTextColor(Color.YELLOW);
        snackbar.show();
    }
}

Related: Android Navigation Drawer Material Design with Example [Latest]

Related: Android Bottom Sheet Material Design with Example



velmm download code

2 thoughts on - Android Snackbar Material design with Example [Step By Step]

Leave a Reply

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