preface

This is the second article in the Material Design series: The SnackBar proposal is actually a cross between Toast and Dialog. The SnackBar provides lightweight feedback about actions that display a short message at the bottom of the screen on a mobile device. The SnackBar appears on top of all other elements on the screen, one at a time.

They disappear automatically after a timeout or after user interaction elsewhere on the screen, especially after an interaction that summons a new surface or activity.

The main difference between Snackbar and Toast is that Snackbar can slide out and also handle user interaction (click) events.

1. Features of SnackBar

• The Snackbar disappears automatically when the user times out or touches it elsewhere on the screen
• You can swipe it off on the screen
• Does not block the user’s on-screen input
• At most one Snackbar can be displayed on the screen at a time
• You can add a button to the Snackbar to handle user clicks
• A Snackbar usually needs CoordinatorLayout as its parent, and CoordinatorLayout ensures that the Snackbar can swipe right to exit

2. Introduction of SnackBar method

The following API methods are commonly used to organize SnackBar:

Three, SnackBar use

Snackbar basically inherits the same methods and attributes as Toast, such as LENGTH_LONG and LENGTH_SHORT for setting the display length.

1. Basic use

Snackbar.make(view, message, duration).show();

Parameters:

• View: Snacker To set up a view,Snacker is displayed on top of the view

• Message: Snacker displays text content to the left

• Duration: the time displayed by Snacker,

  • Snackbar.length_short // displays a short time and then automatically cancels
  • Snackbar.LENGTH_LONG// long display, then automatically cancel
  • Snackbar.LENGTH_INDEFINITE// does not disappear from display unless manually cancelled

• Show () : At the end, Snaker must add this to display

Snackbar.make(view, "Hint: You have a new message", Snackbar.LENGTH_SHORT).show();
Copy the code

2. Set the SnackBar text color and background color

The official Snackbar API only provides the setActionTextColor() method to change the text color of an Action. Snackbar defines an internal class SnackbarLayout inherited from the LinearLayout. The Snackbar looks like this.

• Find the SnackBar ID by findViewById(R.id.snackbar_text), press TextView, and call setTextColor() to set the font color.

• Snackbar.getview () gets the Snackbar background layout View and calls setBackgroundColor to set the background color.

Snackbar snackbar = Snackbar.make(view, "Hint: You have a new message", Snackbar.LENGTH_SHORT);
View snackbarView = snackbar.getView();
if(snackbarView ! =null) {
    snackbarView.setBackgroundColor(Color.GRAY);
    ((TextView) snackbarView.findViewById(R.id.snackbar_text)).setTextColor(Color.YELLOW);
} snackbar.show(); Copy the code

3. Set setAction

setAction(CharSequence text, final OnClickListener listener)

Parameters:

• Text Sets the text on the right of the SnackBar
• Listener Sets the text click event on the right

Snackbar.make(view, "Hint: You have a new message", Snackbar.LENGTH_SHORT)
      // Set Action, a button on the right
      .setAction("Sure", click -> {
          Toast.makeText(SnackBarActivity.this."Open Message",Toast.LENGTH_SHORT).show();
      }).show();
Copy the code

In the above case, set the click event for the Action and pop up a Toast. The effect is as follows:

4. Set the setAction text color

setActionTextColor(int color)

Parameters:

• Color: Sets the text font color

Snackbar.make(view, "Hint: You have a new message", Snackbar.LENGTH_SHORT)
      // Set Action, a button on the right
      .setAction("Sure", click -> {
      })
      // Set the Action text color
 .setActionTextColor(Color.YELLOW)  .show(); Copy the code

5. Set the SnackBar listening event

addCallback(BaseTransientBottomBar.BaseCallback<B> callback)

SnackBar’s callback has two important methods onshow() and onDismissed().

• One is called at display time
• One is called when it disappears

Snackbar.make(view, "Hint: You have a new message", Snackbar.LENGTH_SHORT)
      // Set Action, a button on the right
      .setAction("Sure", click -> {
      })
      // Add a SnackBar listening event
 .addCallback(new Snackbar.Callback() {   @Override  public void onShown(Snackbar sb) {  super.onShown(sb);  Toast.makeText(SnackBarActivity.this."onShown",Toast.LENGTH_SHORT).show();  }   @Override  public void onDismissed(Snackbar transientBottomBar, int event) {  super.onDismissed(transientBottomBar, event);  Toast.makeText(SnackBarActivity.this."onDismissed",Toast.LENGTH_SHORT).show();  }  })  .show(); Copy the code

There are five kinds of events in onElectioneering () :

1. Called when sliding disappears

   public static final int DISMISS_EVENT_SWIPE=0;

2. Click Action when it disappears

   public static final intDISMISS_EVENT_ACTION=1;

3. Called when the timeout expires

   public static final intDISMISS_EVENT_TIMEOUT=2;

4. Called when the dismiss() method is manually called

   public static final intDISMISS_EVENT_MANUAL=3;

5. Called when a new SnackBar appears

   public static final intDISMISS_EVENT_CONSECUTIVE=4;

Comparison of Snackbar with Dialog and Toast

Dialog

Modal dialog box. In other words, the content in the dialog box is now in focus, and to operate functions outside the dialog box, you must first respond to the dialog box. Application scenario: The Dialog is used to select important messages such as deletion confirmation and version update.

Toast

Modeless prompt box. In other words, the display of the prompt box does not affect our operations in other places. The hiding of Toast cannot be controlled manually, and the display duration of Toast needs to be set. Once the display time ends, the Toast will automatically disappear. If you click and display the Toast several times, the Toast will be created and displayed repeatedly, giving the user the illusion that the Toast is not hidden for a long time. Application scenario: Use Toast for unimportant information such as no network prompt, delete successful, and publish complete.

Snackbar

Snackbar is similar to Toast, but is more versatile and can interact with users. The Snackbar uses an animation to pop up from the bottom of the screen and then disappears automatically after a while. Application scenario: During a deletion operation, a Snackbar is displayed to confirm the deletion. If the message fails to be sent, the Snackbar is displayed for resending the message. Of course, it is important that the user experience is better when combined with MD components.

Source code download contains Material Design series control set, regularly updated, please look forward to!

Five, the summary

SnackBar is much more beautiful than Toast. Most of the controls in the Material Design series imitate the original effects of ios, so many projects should have adopted SnackBar instead of Toast. In this article, the use of SnackBar has been explained in detail. The author of the source code sorted out a SnackBarUtils tool class in daily development. Welcome to download the source code to use. Hopefully reading this article has helped you learn about SnackBar.

Thank you so much for reading this article! Your praise and comments are the biggest motivation for my creation!

My WeChat: Jaynm888

Programmer interview networking group: 764040616

Android programmers are cordially invited to join the wechat communication group, the public number reply add group or add my wechat invite into the group.