UI components

Snackbar: Android design support library

Alex Zhukovich 1 min read
Snackbar: Android design support library
Table of Contents

In this post we will talk about Snackbar.

Snackbars provide lightweight feedback about an operation by showing a brief message at the bottom of the screen. Snackbars can contain an action.

Firstly need to add library or add dependency for gradle.

dependencies {
    compile 'com.android.support:design:22.2.0'
}

You can use Snackbar without Action:

Snackbar
    .make(
        findViewById(R.id.root), 
        "Click", 
        Snackbar.LENGTH_SHORT
    )
    .show();
Snackbar without Action

If you want add to action to Snackbar you must use setAction function:

Snackbar
    .make(
        findViewById(R.id.root), 
        "Click", 
        Snackbar.LENGTH_SHORT
    )
    .setAction(
        "UNDO",
        new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // action
            }
        }
    ).show();
Snackbar with Action

Layout file for this project

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".MainActivity"
    android:id="@+id/root">

    <Button
        android:id="@+id/button"
        android:text="Click me!"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />
</RelativeLayout>

Certainly better way is to move "Click" and "UNDO" strings to strings.xml and use link like R.string.undo_label.


Mobile development with Alex

A blog about Android development & testing, Best Practices, Tips and Tricks

Share
More from Mobile development with Alex
Jetpack Compose: Switch
Jetpack Compose

Jetpack Compose: Switch

This article covers creating and customizing the "Switch" component in Jetpack Compose for enabling/disabling features. It explores differences between "Material" and "Material 3" libraries, and how to interact with and verify the Switch component's state in UI tests.
Alex Zhukovich 8 min read

Great! You’ve successfully signed up.

Welcome back! You've successfully signed in.

You've successfully subscribed to Mobile development with Alex.

Success! Check your email for magic link to sign-in.

Success! Your billing info has been updated.

Your billing was not updated.