Android snackbar is an interesting component introduced by Material Design. Android snackbar replaces somehow an existing component called Android Toast. The features provided by this component are similar to Toast even if it introduces some user interaction. If you don’t know this component the video below shows how to use Android Snackbar:
What is Android Snackbar and how to use it
Android snackbar, as said previously, is a popup message that we can use to send some information to the user. Sometimes, we can add an action to the snackbar as we will see later.
Before using Android snackbar, I recommend reading this tutorial about how to develop Android weather app with Material design. The first step is getting familiar with this component. The simplest way to use this component is:
[java]Snackbar.make(v, “Welcome to SwA”, Snackbar.LENGTH_LONG).show();[/java]This simple line of code shows a message at the bottom of the screen. You can set how long the message will be shown using this three different values:
- Snackbar.LENGTH_LONG
- Snackbar.LENGTH_SHORT
- Snackbar.LENGTH_INDEFINITE
If you are not comfortable with these values you can set your own time, inserting a custom value. The result is shown below:
Android Snackbar and Action Callback
In the previous example, we have seen that we can simply show a custom message. This Android component can do more handling user interaction. We can add a custom action with the message like the figure shown below:
In this case, the code is very simple:
[code lang=”java”]Snackbar bar = Snackbar.make(v, “Weclome to SwA”, Snackbar.LENGTH_LONG).setAction(“Dismiss”, new View.OnClickListener() {
@Override
public void onClick(View v) {
// Handle user action
}
});
bar.show();[/code]
As you can see, we used setAction to set the callback action.
How to Customize Android Snackbar
If we want to customize this component, we can select the text color and action color:
In this case to set the action color we use:
[code lang=”java”]bar.setActionTextColor(Color.RED);[/code]while to set the message text color:
[code lang=”java”]TextView tv = (TextView) bar.getView().findViewById(android.support.design.R.id.snackbar_text);tv.setTextColor(Color.CYAN);
bar.show();[/code]
How to use Floating Action Button and Android Snackbar together
As you have noticed from the previous picture the Snackbar message is shown at the bottom of the screen. This may cause some problems when we use Floating Action Button because some parts can overlap.
As you can notice the 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.
At the end of this post, you know how to inform users about Android app events.
Hi! I have an issue, I hope you can help.
I have three apps, and they all use the same core code, so I just added that code you mentioned once. In two of them, it works perfectly, but in the third, it gives me nullpointerexception, when I try to change the text color. My debugging showed me that the snackbar is created correctly, yet when I look at the children (text and action), the text’s ID is different from the text’s ID in the other apps.. does that make sense? It’s just one letter different but the result is that when I look for the textvire using the android.support.design.R.id.snackbar_text I get null. What do you think it could be?? thanks! hope you can help.
Can you post the code that doesn’t work so that i can check it. It could be useful to have the layout file also. Thx
The code works in two cases, but not in the third.
This is it:
RelativeLayout parentView = (RelativeLayout) getView().findViewById(R.id.root_activity_result);
Snackbar snackbar = Snackbar
.make(parentView, LocalizablesFacade.getString(getActivity(), “MESSAGE”), Snackbar.LENGTH_INDEFINITE)
.setAction(LocalizablesFacade.getString(getActivity(), “CLOSE”), new View.OnClickListener() {
@Override
public void onClick(View view) {
//NO ACTION REQUIRED
}
});
View sbView = snackbar.getView();
TextView textView = (TextView) sbView.findViewById(android.support.design.R.id.snackbar_text);
textView.setTextColor(ContextCompat.getColor(getActivity(), R.color.snack_bar_text));
snackbar.setActionTextColor(ContextCompat.getColor(getActivity(), R.color.snack_bar_action));
sbView.setBackgroundColor(ContextCompat.getColor(getActivity(), R.color.snack_bar_background));
snackbar.show();
The parentView is the parent layout of the fragment, and im calling this method on the onActivityCreated method. But I don’t think the code is an issue, because it works in other cases, but on this case it doesn’t.. what could it be? something wrong with the library?
Hi All
I think Snackbar is only work with CoordinatorLayout
No you can use it without CoordinatorLayout but if you FAB you should pay attention
Glad to know that you have many Certificates in java(Sun certified). I just have one ,
Very good blog.Please keep it up.
how can we set snackbar permanently to the layout. if onclick present don’t hide the snackbar. permanently fixed to the layout. sorry i am new to android. any one please help me.
If you want to set the snackbar permanently I guess this component doesn’t fit you.
Snackbar is made to give information to the user for a specific time interval.
Of course, you make this time lasting for long but not permanently.
Hope it helps you!
thank you sir. In recent, i saw this technique fassos app. my app also same like e commerce. so that’s way i asked. Thanking you sir….
I would not recommend using the snackbar within a RealtiveLayout. When the user has a smartphone with bottom navigation bar (Nexus devices) the snackbar will be hidden behind this bar.
Thx for your information!