Implementing Snackbars with android

Hello There! I have recently started learning android, I have learnt about snackbars and I’m excited to write about it. Let’s get started.

Snackbar is a lightweight-widget that we can use as an alternative to Toast. Snackbar is used to show messages to user at bottom of app screen with swiping enabled also contains an optional action button to perform user actions.

1. Add Material Design dependencies

Make sure you have declared material design library dependency in your project gradle.

implementation 'com.google.android.material:material:1.3.0'

Sync your project for gradle to import all required classes.

2. Difference between toast and snackbar

Toast	Snackbar
Toast is shown at center bottom of screen	Snackbar is also shown at bottom of screen
Toast can be customized to be shown anywhere in the screen	Snackbar can’t be customized at any where of screen it is only shown at bottom of screen
Toast message does not have any action button for recording user feedback	Snack-bar has an optional action button button but only one action button is supported
A toast message will be shown until its time is finished	Snack-bar can be dismissed before time by user using a swipe or using action button or using java code

3. Components of Snackbar

To implement Snack-bar in android app we will be using the material library, Snackbars has mainly 3 parts as shown below.

Text label :

Text label in snackbar used to show the process being performed. It may contain single line or multiline text(they may not contain any icon)

Action Button :

Action button in snackbar is optional it is used to hide or dismiss the snackbar.We should use different colour for action buttonand text to overcome the diference

Container :

container is used to display snackbars which have default grey background and the text written in container should be clearly visible to user for clear understanding so that container should be completely opaque.containers should be placed at bottom of screen so that their will not be any interuption doe user

4. Changing duration of Snackbar

Following are the constants that can be used to set duration of Snackbar.

LENGTH_INDEFINITE:

It shows the snackbar for an infinite time until it’s dismissed by the user or another snackbar is added.

Snackbar.make(view, "Message", Snackbar.LENGTH_INDEFINITE).show()

LENGTH_LONG:

It shows the Snacknar for long time (10 seconds).

Snackbar.make(view, "Message", Snackbar.LENGTH_LONG).show()

LENGTH_SHORT:

It shows the Snackbar for short time (4 second).

Snackbar.make(view, "Message", Snackbar.LENGTH_SHORT).show()

5. Theming a snackbar

We will make use of below property to change background of snackbar which takes a argument with it.

Snackbar.make(view, "Message", Snackbar.LENGTH_SHORT)
    .setBackgroundTint(resources.getColor(R.color.backgroundColor))
    .show

We will make use of below property to change text color of snackbar which takes a argument with it.

Snackbar.make(view, "Message", Snackbar.LENGTH_SHORT)
    .setActionTextColor(resources.getColor(R.color.textColor))
    .show

6. Adding an Action

Snackbars can display a single text button that lets user take action on a process performed by app. Snack-Bars shouldn’t be only way to access a use case to make an app usable.
To distinguish the action from text label, text button should display colored text.

Snackbar.make(view, "Message", Snackbar.LENGTH_SHORT)
    .setAction("Close") {
        // Perform your action on click
    }
    .show

7. External Resources

That is all I have learnt about snackbars. Thanks for reading, and I hope you found something useful.

Here We Go Again : (

if (article == helpful) {
    println("Like and subscribe to blog newsletter.")
} else {
    println("Let me know what i should blog on.")
}