This article is inspired by the two articles “Design Support Library Part 3: Snackbar Style” and “Snackbar Usage and Precautions”. Firstly, I would like to express my thanks to the authors of the two articles.
Snackbar is a control in the Android Support Design Library that quickly pops up messages at the bottom of the screen and is better than Toast. This article has modified the native Snackbar to make it more flexible.
1. Basic introduction to Snackbar
Using a Snackbar to import com. Android. Support: the design library.
The Snackbar is displayed on top of all other elements on the screen (the top layer of the screen), and only one Snackbar can be displayed at a time.
The basic use of Snackbar is simple, similar to Toast.
Snackbar.make(view, message_text, duration)
.setAction(action_text, click_listener)
.show();Copy the codeThe make() method generates the Snackbar. Snackbar requires a control container view to hold it. CoordinatorLayout is recommended to ensure that the Snackbar interacts with other components, such as sliding to remove the Snackbar and FloatingActionButton moving up when the Snackbar appears. There are three types of LENGTH_SHORT, LENGTH_LONG, and LENGTH_INDEFINITE for a duration.
The setAction() method can set the button on the right of the Snackbar to add an interactive event. If setAction() is not used, only the left message is displayed.
Snackbar. Make (coordinatorLayout," This is massage", Snackbar.LENGTH_LONG). SetAction (" This is action", new View.OnClickListener() { @Override public void onClick(View v) { Toast.maketext (mainactivity.this," you clicked action", toast.length_short).show(); } }).show();Copy the codeThe following diagram illustrates what the above code does: the Snackbar displays long, clicking on the Action pops up a toast prompt, and the Snackbar slides out of CoordinatorLayout.
Basic demo. GIF
If you want to do something when a Snackbar displays or disappears, you can call the Snackbar setCallback() method.
2. The colorful Snackbar
Snackbar and Toast both have very simple default styles, but sometimes we want to display different types of information to make it easier for the user to notice the prompt. So it’s a good idea to color the Snackbar.
Snackbar’s official API only provides the setActionTextColor() method to change the text color of an Action. Check the source code, where will not point where. (><)< p=””>
Snackbar defines an internal class SnackbarLayout inherited from the LinearLayout. The Snackbar looks like this.
Design_layout_snackbar_include file is loaded in SnackbarLayout. When you open the file, you will see this code:
Copy the codeAccording to the naming, the TextView named snackbar_TEXT is the message to the left of the Snackbar.
Ok, let’s change the background color of the Snackbar and the Message font color.
public static void setSnackbarColor(Snackbar snackbar, int messageColor, int backgroundColor) { View view = snackbar.getView(); // Get the Snackbar view if(view! =null){ view.setBackgroundColor(backgroundColor); // Change the background color of the view ((TextView) view.findViewById(R.ids.snackbar_text)).settextColor (messageColor); Snackbar message control, modify font color}}Copy the codeIt’s simple. It’s a few lines of code.
The Snackbar wrapper class code provided at the end of this article defines four different types of information: Info(she sent you a message), Confirm(she received your message), Warning(she deleted your message), Alert(she blocked you) are blue, green, orange and red, respectively.
PNG message message
Warning and error message demo. GIF
3. Add ICONS in the Snackbar
This essay
In general, the height of the Snackbar should only hold all the text, and the text should be relevant to the action being performed. Snackbar cannot contain ICONS, and actions can only exist as text.
A maximum of 0-1 operations, excluding the cancel button
When an action occurs, it should comply with the prompt box and availability rules. The prompt box should be used instead of the Snackbar when two or more actions occur, even if one of them is a cancel action. If the action suggested by the Snackbar is important enough to interrupt the on-screen action, then the prompt box should be used instead of the Snackbar.
The above paragraph is from the Google Material Design specification.
But what if I just want to add ICONS to Snackbar to make it more interesting and attract users’ attention? What if I just want to put two buttons in the Snackbar for optional non-essential operations? I just wanted to make a move. Scrape ()
The description in the design specification makes sense, as “Snackbar is a lightweight feedback mechanism for actions,” which makes it hard to get a visual feel. But there is a solution for wayward developers (or those who are hopelessly frustrated with bizarre requirements).
The view of Snackbar is implemented by SnackbarLayout, which is inherited from the LinearLayout. So we will create a new layout and add it to it. (~ o ~ ~) ~ o…
public static void SnackbarAddView(Snackbar snackbar,int layoutId,int index) { View snackbarview = snackbar.getView(); SnackbarLayout SnackbarLayout =(snackbar.snackBarLayout) snackBarView; SnackbarLayout = snackbar.snackBarLayout) snackBarView; Public View add_view = LayoutInflater. From (snackBarView.getContext ())).inflate(layoutId,null); / / loading layout file new View LinearLayout. LayoutParams p = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT); // set the new layout parameter p.gravivity = Gravity.CENTER_VERTICAL; Snackbarlayout.addview (add_view,index,p); // Add the new layout to the snackbarLayout location}Copy the codeIn the code above, if we do not set the layout parameters of the layout file added to the Snackbar, the new layout will be displayed at the top of the Snackbar. Pay attention to the size of the new layout and the length of the text in the Snackbar when using the above capricious method. The Snackbar is too large or too fancy to look good.
The following is an example. We’ll create a new layout, tentatively named snackbar_addView.xml, and simply put an ImageView, which is the default Android icon.
Copy the codeThen write the snackbar Settings in the activity:
Snackbar Snackbar = Snackbar. Make (coordinatorLayout," This is massage", Snackbar.LENGTH_LONG); SnackbarUtil.setSnackbarColor(snackbar,SnackbarUtil.blue); SnackbarUtil.SnackbarAddView(snackbar,R.layout.snackbar_addview,0); snackbar.show();Copy the code
Add icon demo.gif
4.SnackbarUtil
I’ve wrapped my common Snackbar-related Settings into a class that you can use to your own advantage.
Public class SnackbarUtil {public static final int Info = 1; public static final int Confirm = 2; public static final int Warning = 3; public static final int Alert = 4; public static int red = 0xfff44336; public static int green = 0xff4caf50; public static int blue = 0xff2195f3; public static int orange = 0xffffc107; /** * short display Snackbar, Custom color * @param view * @param message * @param messageColor * @param backgroundColor * @return */ public static Snackbar ShortSnackbar(View view, String message, int messageColor, int backgroundColor){ Snackbar snackbar = Snackbar.make(view,message, Snackbar.LENGTH_SHORT); setSnackbarColor(snackbar,messageColor,backgroundColor); return snackbar; } /** * long display Snackbar, Custom color * @param view * @param message * @param messageColor * @param backgroundColor * @return */ public static Snackbar LongSnackbar(View view, String message, int messageColor, int backgroundColor){ Snackbar snackbar = Snackbar.make(view,message, Snackbar.LENGTH_LONG); setSnackbarColor(snackbar,messageColor,backgroundColor); return snackbar; } /** * Custom display Snackbar, Custom color * @param view * @param message * @param messageColor * @param backgroundColor * @return */ public static Snackbar IndefiniteSnackbar(View view, String message,int duration,int messageColor, int backgroundColor){ Snackbar snackbar = Snackbar.make(view,message, Snackbar.LENGTH_INDEFINITE).setDuration(duration); setSnackbarColor(snackbar,messageColor,backgroundColor); return snackbar; } /** * short display Snackbar, Default type * @param view * @param message * @param type * @return */ public static Snackbar ShortSnackbar(view view, String message, int type){ Snackbar snackbar = Snackbar.make(view,message, Snackbar.LENGTH_SHORT); switchType(snackbar,type); return snackbar; } /** * long display Snackbar, * @param view * @param message * @param type * @return */ public static Snackbar LongSnackbar(view view, String message,int type){ Snackbar snackbar = Snackbar.make(view,message, Snackbar.LENGTH_LONG); switchType(snackbar,type); return snackbar; } /** * Custom display Snackbar, Optional default type * @param view * @param message * @param type * @return */ public static Snackbar IndefiniteSnackbar(view view, String message,int duration,int type){ Snackbar snackbar = Snackbar.make(view,message, Snackbar.LENGTH_INDEFINITE).setDuration(duration); switchType(snackbar,type); return snackbar; } private static void switchType(Snackbar Snackbar,int type){switch (type){case Info: setSnackbarColor(snackbar,blue); break; case Confirm: setSnackbarColor(snackbar,green); break; case Warning: setSnackbarColor(snackbar,orange); break; case Alert: setSnackbarColor(snackbar,Color.YELLOW,red); break; }} public static void setSnackbarColor(Snackbar) public static void setSnackbarColor(Snackbar snackbar, int backgroundColor) { View view = snackbar.getView(); if(view! =null){ view.setBackgroundColor(backgroundColor); } /** * set Snackbar text and backgroundColor * @param Snackbar * @param messageColor * @param backgroundColor */ public static void setSnackbarColor(Snackbar snackbar, int messageColor, int backgroundColor) { View view = snackbar.getView(); if(view! =null){ view.setBackgroundColor(backgroundColor); ((TextView) view.findViewById(R.id.snackbar_text)).setTextColor(messageColor); }} /** * Add view * @param Snackbar * @param layoutId * @param index to Snackbar */ public static void SnackbarAddView( Snackbar snackbar,int layoutId,int index) { View snackbarview = snackbar.getView(); Snackbar.SnackbarLayout snackbarLayout=(Snackbar.SnackbarLayout)snackbarview; View add_view = LayoutInflater.from(snackbarview.getContext()).inflate(layoutId,null); LinearLayout.LayoutParams p = new LinearLayout.LayoutParams( LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT); p.gravity= Gravity.CENTER_VERTICAL; snackbarLayout.addView(add_view,index,p); }}Copy the codeSimple usage example:
SnackbarUtil. ShortSnackbar (coordinator, "sister sent a message to you," SnackbarUtil. Info), show ();Copy the code
Message demo. GIF
Examples of the use of unitary moths:
Snackbar snackbar= SnackbarUtil. ShortSnackbar (coordinator, "sister deleted you send message," SnackbarUtil. Warning). SetActionTextColor (Color. RED.) setAction (" send again" . new View.OnClickListener() { @Override public void onClick(View v) { SnackbarUtil. LongSnackbar (coordinator, "your sister have shielding," SnackbarUtil. Alert). SetActionTextColor (Color. WHITE.) the show (); }}); SnackbarUtil.SnackbarAddView(snackbar,R.layout.snackbar_addview,0); SnackbarUtil. SnackbarAddView (snackbar, R.l ayout. Snackbar_addview2, 2); snackbar.show();Copy the codeThis example calls the SnackbarAddView() method twice to add two different custom layouts to the Snackbar with the following effect (either _(:з “Angle) _ is not recommended) :
Add multiple layouts. GIF
That’s all for now.