Android Material Design Snackbars

Source: Internet
Author: User

first, what is Snackbar

1, Google said: Snackbar by displaying a brief message at the bottom of the screen and providing a lightweight operation feedback. Snackbar can contain an action. Similar to toast, you can display informational cues on the screen, unlike Snackbar, which can contain an action (click event).
2, the screen can only display one snackbar at a time, and Snackbar can only contain 0 or 1 actions, more like a lightweight dialog box.
3, Google recommended Snackbar and Coordinatorlayout combined use, Snackbar can respond to coordinatorlayout to the right to swipe the cleanup event.

second, the use of Snackbar

Code for the layout:

<?xml version= "1.0" encoding= "Utf-8"?><relativelayout  xmlns: Android  = ""  xmlns:tools  =" Http:// " android:layout_width  = "match_parent"  android:layout_height  =" match_parent " tools:context  =" " ;     <  Span class= "Hljs-attribute" >android:id  = "@+id/cl"  android:layout_width  =" match_parent " android:layout_height  =;         <"@+id/fab"  Android:layout_width="Wrap_content"android:layout_height="Wrap_content"  Android:layout_gravity="Bottom|right"android:layout_margin="@dimen/activity_ Horizontal_margin "android:src=" @drawable/ic_plus " />                                                                            </></relativelayout>

Here you select Coordinatorlayout as the container for the Snackbar.
The specific code for generating Snackbar is as follows:

Snackbar. make(CL,"It's a snackbar.", Snackbar. LENGTH_indefinite). Setactiontextcolor(Getresources (). GetColor(R. Color. Coloraccent)). Setaction("OK", New View. Onclicklistener() {@Override public void OnClick (View v) { Toast. Maketext(mainactivity. this,"Response to Snackbar click events", Toast. LENGTH_long). Show();}                        }). Setcallback(New Snackbar. Callback() {@Override public void ondismissed (Snackbar Snackbar, int event) {Fab. Setclickable(true);Toast. Maketext(mainactivity. this,"snackbar--ondismissed", Toast. LENGTH_long). Show();} @Override public void Onshown (Snackbar Snackbar) { Fab. Setclickable(false);Toast. Maketext(mainactivity. this,"Snackbar--onshown", Toast. LENGTH_long). Show();}                        }). Show();

Snackbar is generated in a manner similar to a toast, generated by the Make static method, which contains three parameters:
First parameter: Sets the container of the Snackbar, which is the view on which the snackbar is displayed;
Second parameter: Set the displayed message content;
Third parameter: Set the length of the display, including Length_indefinite (does not actively disappear), Length_short, Length_long.
Setactiontextcolor: Sets the color of the action text;
Setaction: Set action, contains two parameters: one is the name of the action, and the other is view.onclicklistener;
Setcallback: Sets the callback for the Snackbar, including the callback when the Snackbar is displayed and the callback when the snackbar disappears;
Show: Display snackbar;
Other methods are not described here.
For Snackbar, besides the Make method and the show method are necessary, the others are optional;

The following is the real-computer operation effect, pay attention to observe the location of Floatingactionbutton.

When you click Floatingactionbutton, the snackbar pops up from the bottom and the Floatingactionbutton moves up automatically, without blocking the keys, providing a good interaction, This is one of the advantages of using Snackbar and coordinatorlayout together.

Two advantages of combining Snackbar and coordinatorlayout: Snackbar can swipe right to clear.

Click the OK button or swipe right to clear snackbar, and Floatingactionbutton back to its original position.

The use of Snackbar introduced here, Snackbar really let a person in front of the light.

The following is the Androidstudio source of this article: Snackbardemo

Android Material Design snackbars

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.