When Android 5.0 was released, new design guidelines were also released with it, called material design. 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.
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.
In this tutorial, we are going to learn how to implement Material Design SnackBar by using Design Support Library. In this article we will learn different types of SnackBars.
1 |
compile 'com.android.support:design:23.0.1' |
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.
Normally passing CoordinatorLayout as view param is the best option as it allows Snackbar to enable some features like swipe-to-dismiss and automatically moving of widgets like FloatingActionButton.
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.
1 |
Snackbar.make(coordinatorLayout, "Single Line SnackBar Demo.", Snackbar.LENGTH_SHORT).show(); |
Normally passing CoordinatorLayout as view param is the best option as it allows Snackbar to enable some features like swipe-to-dismiss and automatically moving of widgets like FloatingActionButton.
You can also mention a callback interaction method using setAction() method. This allows us to take certain action when user interacts with the snackbar.
1 2 3 4 5 6 |
Snackbar.make(coordinatorLayout, "Click on Action.", Snackbar.LENGTH_LONG).setAction("ACTION", new View.OnClickListener() { @Override public void onClick(View view) { Snackbar.make(coordinatorLayout, "You clicked on Action.", Snackbar.LENGTH_SHORT).show(); } }).show(); |
We can override color of snackbar action and snackbar message.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
Snackbar snackbar = Snackbar.make(coordinatorLayout, "Custom Text Color and Custom Action Color.", Snackbar.LENGTH_LONG).setAction("ACTION", new View.OnClickListener() { @Override public void onClick(View view) { Snackbar.make(coordinatorLayout, "You clicked on Action.", Snackbar.LENGTH_SHORT).show(); } }).setActionTextColor(Color.BLUE);//Action Text Color // Changing SnackBar text color View snackView = snackbar.getView(); TextView textView = (TextView) snackView.findViewById(android.support.design.R.id.snackbar_text); textView.setTextColor(Color.RED); snackbar.show(); |
We can make our Snackbar message with multicolored by using SpannableStringBuilder.
1 2 3 4 5 6 7 8 9 |
//Making multi colored text color of SnackBar text SpannableStringBuilder snackbarText = new SpannableStringBuilder(); snackbarText.append("This is "); int boldStart = snackbarText.length(); snackbarText.append("Multi Color"); snackbarText.setSpan(new ForegroundColorSpan(0xFFFF0000), boldStart, snackbarText.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); snackbarText.setSpan(new StyleSpan(Typeface.BOLD_ITALIC), boldStart, snackbarText.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); snackbarText.append(" SnackBar Demo."); Snackbar.make(coordinatorLayout, snackbarText, Snackbar.LENGTH_LONG).show(); |
Create a activity_main.xml file with coordinator layout as parent.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<android.support.design.widget.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:id="@+id/coordinatorLayout" android:layout_width="match_parent" android:layout_height="match_parent"> <ScrollView android:layout_width="fill_parent" android:layout_height="fill_parent" android:fillViewport="true" android:overScrollMode="never" android:scrollbars="none" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:padding="5dp"> <Button android:id="@+id/singleLineSnackBar" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/singleLine" /> <Button android:id="@+id/actionSnackBar" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/actionSnackBar" /> <Button android:id="@+id/customColorsSnackBar" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/customColors" /> <Button android:id="@+id/multiColoredSnackBar" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/multiColor" /> </LinearLayout> </ScrollView> </android.support.design.widget.CoordinatorLayout> |
Here is the full source code of this article.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
package com.androidsnackbar_demo; import android.graphics.Color; import android.graphics.Typeface; import android.os.Bundle; import android.support.design.widget.CoordinatorLayout; import android.support.design.widget.Snackbar; import android.support.v7.app.AppCompatActivity; import android.text.Spannable; import android.text.SpannableStringBuilder; import android.text.style.ForegroundColorSpan; import android.text.style.StyleSpan; import android.view.View; import android.widget.Button; import android.widget.TextView; public class MainActivity extends AppCompatActivity implements View.OnClickListener { private static CoordinatorLayout coordinatorLayout; private static Button singleLine, action, customColors, multiColored; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initViews(); setListeners(); } //Initiate Views private void initViews() { coordinatorLayout = (CoordinatorLayout) findViewById(R.id .coordinatorLayout); singleLine = (Button) findViewById(R.id.singleLineSnackBar); action = (Button) findViewById(R.id.actionSnackBar); customColors = (Button) findViewById(R.id.customColorsSnackBar); multiColored = (Button) findViewById(R.id.multiColoredSnackBar); } //Set Listeners Over buttons private void setListeners() { singleLine.setOnClickListener(this); customColors.setOnClickListener(this); action.setOnClickListener(this); multiColored.setOnClickListener(this); } @Override public void onClick(View view) { switch (view.getId()) { case R.id.singleLineSnackBar: Snackbar.make(coordinatorLayout, "Single Line SnackBar Demo.", Snackbar.LENGTH_SHORT).show(); break; case R.id.actionSnackBar: Snackbar.make(coordinatorLayout, "Click on Action.", Snackbar.LENGTH_LONG).setAction("ACTION", new View.OnClickListener() { @Override public void onClick(View view) { Snackbar.make(coordinatorLayout, "You clicked on Action.", Snackbar.LENGTH_SHORT).show(); } }).show(); break; case R.id.customColorsSnackBar: Snackbar snackbar = Snackbar.make(coordinatorLayout, "Custom Text Color and Custom Action Color.", Snackbar.LENGTH_LONG).setAction("ACTION", new View.OnClickListener() { @Override public void onClick(View view) { Snackbar.make(coordinatorLayout, "You clicked on Action.", Snackbar.LENGTH_SHORT).show(); } }).setActionTextColor(Color.BLUE);//Action Text Color // Changing SnackBar text color View snackView = snackbar.getView(); TextView textView = (TextView) snackView.findViewById(android.support.design.R.id.snackbar_text); textView.setTextColor(Color.RED); snackbar.show(); break; case R.id.multiColoredSnackBar: //Making multi colored text color of SnackBar text SpannableStringBuilder snackbarText = new SpannableStringBuilder(); snackbarText.append("This is "); int boldStart = snackbarText.length(); snackbarText.append("Multi Color"); snackbarText.setSpan(new ForegroundColorSpan(0xFFFF0000), boldStart, snackbarText.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); snackbarText.setSpan(new StyleSpan(Typeface.BOLD_ITALIC), boldStart, snackbarText.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); snackbarText.append(" SnackBar Demo."); Snackbar.make(coordinatorLayout, snackbarText, Snackbar.LENGTH_LONG).show(); break; } } } |
Finally all done, run the app and you will get the output as shown in video.
Thanks.
Subscribe to us and get the latest news.