Snackbar Android Tutorial with Floating Action Button

A new component introduced in Android Material Design is Snackbar.

It is almost same as Toast. But with some additional features. We can add an action in Snackbar. We can also customize colors of the text. So if we will talk about Snackbar vs Toast then snackbar is a winner. 😛

So in this Snackbar Android Tutorial we will see how to create and use Snackbar in Android Studio.

Snackbar Android Tutorial

For displaying a Snackbar we can use the following code.

//Creating a snackbar object

Snackbar snackbar;

//Initializing snackbar using Snacbar.make() method

snackbar = Snackbar.make(coordinatorLayout,"Simple Snackbar",Snackbar.LENGTH_LONG);

//Displaying the snackbar using the show method()

snackbar.show();

The Snackbar.make() method takes three arguments
1. View – Here we can use any View but it is recommended to use a CoordinatorLayout because it supports floating action button. If we use another view like LinearLayout then it will not support the floating action button.
2. String – This is a string to display on the snackbar
3. Length – The duration to display the snackbar, same as toast. We used LENGTH_LONG here
For adding an action to our Snackbar we can use the following code

snackbar.setAction("Show another", new View.OnClickListener() {

@Override

public void onClick(View v) {

//Perform action here

}

});

We use setAction() method for adding an action to our snackbar it takes two parameters
1. String – It will be shown as the action text
2. Listener – An OnClickListener to perform action
Below you can see a snapshot of Snackbar

For changing the color of Snackbar Message you can use setActionTextColor() method.
Changing the color for action text require the following code.

//Getting view of snackbar

View view = snackbar.getView();

//Getting the action textview from snackbar

TextView textView = (TextView) view.findViewById(android.support.design.R.id.snackbar_text);

//Applying color for the text view

textView.setTextColor(Color.RED);

Applying Snackbar in Android Studio Project

Create a new Android Project (I created SnackbarExample) for our Android Snackbar Tutorial.
Goto build.gradle and inside dependencies add the following code and then sync your project with gradle.

dependencies {

compile fileTree(dir: 'libs', include: ['*.jar'])

compile 'com.android.support:appcompat-v7:23.0.1'

//Add the below line to your gradle

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

}

Now come to activity_main.xml and create the following layout.

Use the following code for the above layout.

<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:id="@+id/coordinateLayout"

android:orientation="vertical"

android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

<Button

android:id="@+id/buttonShowSnackbar"

android:text="Show Snackbar"

android:layout_width="match_parent"

android:layout_height="wrap_content" />

<android.support.design.widget.FloatingActionButton

android:id="@+id/fab"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="end|bottom"

android:layout_margin="16dp"

android:src="@android:drawable/ic_dialog_email" />

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

As you can see I am using CoordinatorLayout and a FloatingActionButton here.
Now come to MainActivity.java and write the following code.

package net.simplifiedcoding.snackbarexample;

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.view.Menu;

import android.view.MenuItem;

import android.view.View;

import android.widget.Button;

import android.widget.TextView;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{

//Defining Views

private Button buttonShowSnackbar;

private CoordinatorLayout coordinatorLayout;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

//Initializing views

buttonShowSnackbar = (Button) findViewById(R.id.buttonShowSnackbar);

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

//Adding onclicklistener to button

buttonShowSnackbar.setOnClickListener(this);

}

//Method to show the snackbar

private void showSnackbar(){

//Creating snackbar

Snackbar snackbar = Snackbar.make(coordinatorLayout,"Simple Snackbar",Snackbar.LENGTH_LONG);

//Adding action to snackbar

snackbar.setAction("Show another", new View.OnClickListener() {

@Override

public void onClick(View v) {

//Displaying another snackbar when user click the action for first snackbar

Snackbar s = Snackbar.make(coordinatorLayout, "Another Snackbar", Snackbar.LENGTH_LONG);

s.show();

}

});

//Customizing colors

snackbar.setActionTextColor(Color.BLUE);

View view = snackbar.getView();

TextView textView = (TextView) view.findViewById(android.support.design.R.id.snackbar_text);

textView.setTextColor(Color.RED);

//Displaying snackbar

snackbar.show();

}

@Override

public void onClick(View v) {

//Calling the method to show snackbar on button click

showSnackbar();

}

Now run your app.

Android Snackbar Example – Video Demo

You can also download the source code from below

Download Snackbar Android Example Source

[sociallocker id=”1372″] [download id=”1345″] [/sociallocker]

So thats all for this Snackbar Android Tutorial friends. Feel free to ask if having any confusion regarding this Snackbar Android Tutorial. And share this Snackbar Android Tutorial among your friends, if you found it useful. Thank You 🙂