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: Divider
Jetpack Compose

Jetpack Compose: Divider

This article covers using and customizing the “Dividers” components from the "Material 2" and "Material 3" libraries in the Jetpack Compose. In addition to that, we will explore the difference between implementation of the Divider, HorizontalDivider and VerticalDivider.
Alex Zhukovich 4 min read
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.