Android Material Design SnackBar

By | October 23, 2015
Another Interesting Component being introduced in material design is SnackBar , SnackBar is just like that of Toast to present quick brief feedback to the user , expect they provide additional ability to interact with through actions and swiping to dismiss they are considerably more powerful than toasts, and the API is familiar.

Build Gradle

Firstly you need to add the design support library ,dependencies to the build.gradle(Module:app) file.

file: build.gradle

dependencies {
    compile fileTree(dir: ‘libs’, include: [‘*.jar’])
    compile ‘com.android.support:appcompat-v7:23.0.1’
    compile ‘com.android.support:design:23.0.1’
}

Color

Modify res/values/colors.xml as below:
file: colors.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<resources>
    <color name=”primary”>#3F51B5</color>
    <color name=”primary_dark”>#303F9F</color>
    <color name=”accent”>#FF4081</color>
</resources>

Style

Modify res/values/styles.xml as below:
file: styles.xml

<resources>

    <!– Base application theme. –>
    <style name=”AppTheme” parent=”Theme.AppCompat.Light.NoActionBar”>
        <!– Customize your theme here. –>
        <item name=”colorPrimary”>@color/primary</item>
        <item name=”colorPrimaryDark”>@color/primary_dark</item>
        <item name=”colorAccent”>@color/accent</item>
    </style>
 
</resources>

String Constant

Modify res/values/strings.xml as below:
file: strings.xml

<resources>
    <string name=”app_name”>SnackBar</string>
    <string name=”action_settings”>Settings</string>
    <string name=”snack_bar_with_cordinate”>SnackBar With CoordinatorLayout</string>
    <string name=”snack_bar_without_cordinate”>SnackBar Without CoordinatorLayout</string>
    <string name=”simple_snack_bar”>Simple SnackBar</string>
    <string name=”custom_snack_bar”>Custom SnackBar</string>
    <string name=”snack_bar_action”>SnackBar With Action</string>
</resources>

XML Layout

Create a XML Layout in the res/layout called tool_bar.xml , which contains Toolbar widget , this widget we will be including in below activity_main.xml.

file: tool_bar.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<android.support.v7.widget.Toolbar
    xmlns:android=”http://schemas.android.com/apk/res/android”
    android:id=”@+id/toolbar”
    android:layout_width=”match_parent”
    android:layout_height=”?attr/actionBarSize”
    android:background=”?attr/colorPrimary”
    android:theme=”@style/ThemeOverlay.AppCompat.Dark” />

Create a XML Layout in the res/layout called activity_main.xml , which contains four buttons and a Floating Action Button .

file: activity_main.xml

<RelativeLayout
    xmlns:android=”http://schemas.android.com/apk/res/android”
    xmlns:tools=”http://schemas.android.com/tools”
    android:id=”@+id/parentLayout”
    android:layout_width=”match_parent”
    android:layout_height=”match_parent”>


    <android.support.design.widget.CoordinatorLayout
        android:id=”@+id/coordinator”
        android:layout_width=”match_parent”
        android:layout_height=”match_parent”>

        <LinearLayout
            android:layout_width=”match_parent”
            android:layout_height=”match_parent”
            android:orientation=”vertical”>

            <include layout=”@layout/tool_bar” />

            <Button
                style=”@style/ButtonStyle”
                android:onClick=”snackbarWithoutCoordinate”
                android:text=”@string/snack_bar_without_cordinate” />

            <Button
                style=”@style/ButtonStyle”
                android:onClick=”snackbarWithCoordinate”
                android:text=”@string/snack_bar_with_cordinate” />

            <Button
                style=”@style/ButtonStyle”
                android:onClick=”customSnackBar”
                android:text=”@string/custom_snack_bar” />

            <Button
                style=”@style/ButtonStyle”
                android:onClick=”actionSnackBar”
                android:text=”@string/snack_bar_action” />


        </LinearLayout>

        <android.support.design.widget.FloatingActionButton
            android:id=”@+id/fab”
            android:layout_width=”wrap_content”
            android:layout_height=”wrap_content”
            android:layout_alignParentBottom=”true”
            android:layout_gravity=”bottom|right”
            android:layout_marginBottom=”@dimen/activity_vertical_margin”
            android:layout_marginRight=”@dimen/activity_horizontal_margin”
            android:src=”@drawable/ic_action_new” />

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

Syntax :

Snackbar.make(view, message, duration)
       .setAction(action message, click listener)
       .show();

Methods:

  • make() – Make a Snackbar to display a message.
  • setAction() – Set the action to be displayed in this Snackbar.
  • show() – Show the Snackbar.

Attributes:

  • view – The view to find a parent from.
  • resId – The resource id of the string resource to use. Can be formatted text.
  • duration – How long to display the message. ( And the duration should be LENGTH_SHORT, LENGTH_LONG or LENGTH_INDEFINITE. When LENGTH_INDEFINITE is used, the snackbar will be displayed indefinite time and can be dismissed with swipe off. )

SnackBar Without CoordinateLayout

The first parameter of the make method takes parent view , and here we pass the relativelayout reference as you can see the snackbar comes over the floatingaction bar .

Snackbar snackbar = Snackbar.make(parentLayout, “I’m a Snackbar”, Snackbar.LENGTH_LONG);
snackbar.show();

SnackBar With CoordinateLayout

Instead of the snackbar displaying over the floating action button, as seen previously, the FloatingActionButton takes advantage of additional callbacks provided by CoordinatorLayout to automatically move upward as the snackbar animates in and returns to its position when the snackbar animates out .

Snackbar snackbar = Snackbar.make(coordinatorLayout, “I’m a Snackbar”, Snackbar.LENGTH_LONG);
snackbar.show();

Custom SnackBar

You can customize the default snackbar by adding styles to message and action textviews respectively.

Snackbar snackbar = Snackbar.make(coordinatorLayout, “I’m a Snackbar”, Snackbar.LENGTH_LONG)
.setAction(“Action”, new View.OnClickListener() {
@Override
public void onClick(View view) {
}
});

// Changing message text color
snackbar.setActionTextColor(Color.RED);

// Changing action button text color
View sbView = snackbar.getView();
TextView textView = (TextView) sbView.findViewById(android.support.design.R.id.snackbar_text);
textView.setTextColor(Color.YELLOW);

snackbar.show();

SnackBar With Action

The setAction() method Set the action to be displayed in Snackbar and This allows us to take certain action when user interacts with the snackbar.

Snackbar snackbar=Snackbar.make(coordinatorLayout, “I’m a Snackbar”, Snackbar.LENGTH_LONG).
    setAction(“Action”, new View.OnClickListener() {
@Override
public void onClick(View v) {
//perform on click of snackbar action
Toast.makeText(MainActivity.this, “Snackbar Action”, Toast.LENGTH_LONG).show();
}
});
snackbar.show();