When Android 5.0 was released, new design guidelines were also released with it, called material design. Material design in a way revamped the experience of an android user. It introduced many new design patterns and guidelines. But here we’ll discuss only one new UX concept introduced in material design called Snackbar. This new concept is inspired from the Toast widget of android. Android Snackbar is just like a Toast message except that it has an option for user feedback. You can call it as a toast message with an action button. Usually this type of widget is used in a situation where user needs an option to reverse his actions like undo -ing an action. In this Android Snackbar Example I would show how to make an Android Snackbar using the new Design Support Library.
To make an Android Snackbar many libraries are available on the internet. But for this Android Snackbar Example we will be using the official Android design support library which was released in the beginning of June 15. Although a notable amount of effort has been invested in by some of the independent developers to make a library for snackbar, kudos to them.
Android Snackbar Example using Design Support Library
Snackbar is a UI element used for user feedback. Generally used when instantaneous feedback is required from the user, after an action is performed. Snackbar appears in on the screen from bottom and can be dispersed by swiping, if a CoordinatorLayout is used as its parent(will explain this part later in the tutorial). To start off lets include the Android design support library in our project gradle file:
compile 'com.android.support:design:22.2.0'
Displaying an Android Snackbar on your screen is very simple, all you need to do is use this piece of code below:
Snackbar.make(findViewById(android.R.id.content), "Had a snack at Snackbar", Snackbar.LENGTH_LONG)
.setAction("Undo", mOnClickListener)
.setActionTextColor(Color.RED)
.show();But if you want to customize it completely, then a different approach would have to be taken. First lets create a layout with CoordinatorLayout:
<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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<RelativeLayout
android:id="@+id/mainLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin">
<CheckBox
android:id="@+id/checkBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="40dp"
android:text="Mark as done"/>
<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="100dp"
android:src="@mipmap/truiton"/>
</RelativeLayout>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:layout_marginRight="20dp"
android:src="@drawable/abc_ic_menu_cut_mtrl_alpha"
app:fabSize="normal"
app:layout_anchor="@id/coordinatorLayout"
app:layout_anchorGravity="bottom|right|end"/>
</android.support.design.widget.CoordinatorLayout>Android CoordinatorLayout
I have included a floating action button as well in the layout above to show that when a snack bar appears from the bottom of the screen, floating action button automatically moves up in case of mobile devices. This behavior not only makes the app look good but also improves the user experience. The main function of a CoordinatorLayout is to act as a container and perform specific interactions between child views. Like shifting up of floating action button when an Android snackbar appears.
Next lets customize the snackbar for our Android Snackbar Example :
package com.truiton.snackbar;
import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.CoordinatorLayout;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
View.OnClickListener mOnClickListener;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final CoordinatorLayout coordinatorLayout = (CoordinatorLayout) findViewById(R.id
.coordinatorLayout);
final CheckBox checkBox = (CheckBox) findViewById(R.id.checkBox);
checkBox.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
if (isChecked) {
Snackbar snackbar = Snackbar
.make(coordinatorLayout, "Had a snack at Snackbar", Snackbar.LENGTH_LONG)
.setAction("Undo", mOnClickListener);
snackbar.setActionTextColor(Color.RED);
View snackbarView = snackbar.getView();
snackbarView.setBackgroundColor(Color.DKGRAY);
TextView textView = (TextView) snackbarView.findViewById(android.support.design.R.id.snackbar_text);
textView.setTextColor(Color.YELLOW);
snackbar.show();
}
}
});
mOnClickListener = new View.OnClickListener() {
@Override
public void onClick(View v) {
checkBox.setChecked(false);
}
};
}
}
This as a whole would result an Android snackbar like in the image below:
As you can see, in the piece of code above I have completely customized the Android Snackbar. Although its not looking very nice, due to bad choice of colors but it shows the functionality. One of the main points to be noted here is that, while making a Snackbar I have used the CoordinatorLayout as the parent layout for Snackbar. Due to this CoordinatorLayout our Snackbar has the ability to be dismissed when swiped. Also you may observe a View.OnClickListener is also attached to my Snackbar so that the click events of Android Snackbar action button could be intercepted. With this I would like to conclude the Android Snackbar Tutorial, hope this helped. Connect with us on Facebook, Google+ and Twitter for more updates.
Born in New Delhi, India. A software engineer by profession, an android enthusiast and an evangelist. My motive here is to create a group of skilled developers, who can develop something new and good. Reason being programming is my passion, and also it feels good to make a device do something you want. In a very short span of time professionally I have worked with many tech firms. As of now too, I am employed as a senior engineer in a leading tech company. In total I may have worked on more than 20 projects professionally, and whenever I get spare time I share my thoughts here at Truiton.