Android Snackbar

by Mir Suhail

An interesting component introduced in Android Material Design is the Snackbar. Snackbars contain a single line of text directly related to the operation performed. Snackbars provide lightweight feedback about an operation. They show a brief message at the bottom of the screen on mobile and lower left on larger devices. Snackbars appear above all other elements on screen and only one can be displayed at a time.

They automatically disappear after a timeout or after user interaction elsewhere on the screen, particularly after interactions that summon a new surface or activity. Snackbars can be swiped off screen.

Adding Snackbar

Below is the simple code for including the Snackbar into the activity or fragment layout of an Android application.

Snackbar snackbar = Snackbar
        .make(coordinatorLayout, "Here's a Snackbar", Snackbar.LENGTH_LONG);
snackbar.show();

For Snackbar to display we have to pass the view param to it. Normally passing CoordinatorLayout as view param is the best option as it allows Snackbar to enable some features like swipe-to-dismiss and automatically moving of widgets like FloatingActionButton.

And the duration of Snackbar should be LENGTH_SHORT, LENGTH_LONG or LENGTH_INDEFINITE. When LENGTH_INDEFINITE is used, the snackbar will be displayed indefinite time and can be dismissed with swipe off.

Snackbar

 

Snackbar with Action Callback

We can also add a callback action method using setAction() method. This allows us to take certain action when user interacts with the Snackbar.
Here’s an example code.

Snackbar snackbar = Snackbar
        .make(coordinatorLayout, "Hello SnackBar!", Snackbar.LENGTH_LONG)
        .setAction("UNDO", new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar snackbar1 = Snackbar.make(coordinatorLayout, "Message is restored!", Snackbar.LENGTH_SHORT);
                snackbar1.show();
            }
        });
snackbar.show();

Snackbar with callback action

Customising Snackbar

Snackbars come with default white text color and dark gray (#323232) background. Although we can customize the Snackbar view as per our own requirements.

Snackbar snackbar = Snackbar
        .make(coordinatorLayout, "No internet connection!", Snackbar.LENGTH_LONG)
        .setAction("RETRY", new View.OnClickListener() {
            @Override
            public void onClick(View view) {
            }
        });
// Changing message text color
snackbar.setActionTextColor(Color.RED);
// Changing action button text color
View view = snackbar.getView();
TextView textView = (TextView) view.findViewById(android.support.design.R.id.snackbar_text);
textView.setTextColor(Color.YELLOW);
snackbar.show();
android-snackbar-custom-color-view-text-color
Let me know your experiences with Snackbar. You can mail me at suhail@trialx.com. 

Leave a Reply

Your email address will not be published. Required fields are marked *

Mobile Research Apps

We have deep expertise in design and development of mobile research apps that work on both iOS and Android securely.

Contact us now

Popular Posts