What are snackbars in Android systems and how can they be used?

Snackbars  can replace toasts and can be used instead. Of course, it can be noted that they can not replace toasts, but they can be considered as a new version of toasts. Snackbars are tapes used to inform users when certain tasks or events are taking place.

What is a Snackbar?

To give a complete explanation of snack bars, we will give an example to better explain it. Consider  the Gmail  environment, where after sending a message to people, a message appears to the user that your message was sent and displays two buttons for the user that the user can delete or view again. This bar displayed to the user after the event is called Snackbar.

Or in other cases, if the user deletes the sent message, the system will receive the message "Message is deleted."

Another example to better understand Snackbar, we can say that a message is displayed for the user at the bottom that the system is not connected to the Internet, in this case, in addition to displaying the message to the user, a button to act It shows that the user can take the necessary actions.

The bar displayed in the system for information to the user and a button next to the action is called Snackbar.

In the example of Gmail, the button to delete the message and the example of not connecting to the Internet can be considered the action and the button of retry.

Therefore, it can be said that one of  the advantages and features of Snackbar  over Toast is that in addition to displaying the appropriate message with the event for the user, it is also possible to put a button to act.

How to build a Snackbar project

1- In  Android  Studio, we create a new project and select the desired name. The name chosen in this tutorial is Snackbar.

2- Creating the project with MinSDK 17 in Android Studio is better.

3- Add the following codes inside the project:

4- The view in the Snackbar must be of the CoordinatorLayout type so that these capabilities can work properly.

Note:

Snack bar features include swipe-to-right swipe-to-dismiss.

5- To do this, we convert the activity layer to CoordinatorLayout and add an id. Like the following:

6- We complete the codes in the Java section and do not work with the layout. Like the following:

In the code above, we defined a CoordinatorLayout and chose the custom name crd_layout for it. The make function has three parameters that we use to complete this.

The first parameter is the same view included in the code listed above with the name CoordinatorLayout.

- The second parameter is the text of the message.

- The third parameter: is the time allotted for displaying the message. This parameter can have three different values: LENGTH_LONG, LENGTH_SHORT, and LENGTH_INDEFINITE

If you select the value LENGTH_INDEFINITE for this display time, it will display the snack bar until the user deletes  the snack bar. This means that if the user deletes the snack bar and pulls it to the right, the snack bar will not be displayed.

7- We will implement the project.

8- After I run the project, the snack bar will be displayed and deleted after a few seconds.

9- For convenience, we put this inside the button to perform the operation we want with each click and touch.

10- Of course, it should be noted that in this part of the tutorial, we do not use the usual button, and we use the Floating Action Button.

11- We also added the codes listed below to the project.

12- We will implement the project.

13- We will see the output, which is also displayed by touching this button.

14- We use the setDuration method to customize the display time of the snack bar.

This is displayed for 9 seconds in the codes listed above, and after 9 seconds, the snack bar disappears.

15- We can also define an action for this so that in addition to displaying information, it can also provide a button for the user so that the user can take the necessary actions.

16- We can use the setAction method to do this. This method has two parameters.

17- The first input is action, and the second input is OnClickListener.

18- We add the codes inserted below to  the snack bar  action definition to the project.

The simplest action we can define and use is dismissed (). We can apply settings that the user can close by touching the OK button before this expires using this method.

19- Add snkbr. dismiss () to setAction.

20- We will implement the project.

21- After running, we will see that an option called OK has been added that if the user touches it, this can be closed.

22- Another action that can be used is Undo, which is mostly used in emails, and after the user sends an email, he can prevent it from being sent by pressing this button.

23- We can use setActionTextColor to change the color and style of the actions. Like the following:

24- We may not want to use the default  Android  colors, in which case we can use the colors in colors.xml.

25- The code below shows how to use the colors in colors.xml.

In the code above, we create an instance of view, select the desired name snkView for it, and then put snkbr. getView inside it. By doing this, the view related to snkbr is connected to snkView.

Then, in the code above, setBackgroundColor is used to specify the background color, and setTextColor is used to specify the text color.

The complete code that should be in the MainActivity.java section is as follows:

In this part of the tutorial, you will learn how to add a snack bar to the project to inform the user of some events, and you can also consider an action for them that can take appropriate action. We learned that snack bars are displayed at the bottom of  the application  page and are used to inform users of certain events, and actions can be added to them so that users can take the necessary actions.