Snackbar in Android Material Design Example


      In this tutorial lets discuss the new UI element introduced in material design - Snackbar. Snack bar is an UI element design for user feedback. It shows message at the bottom of the screen which disappears after after a timeout or after user interaction elsewhere on the screen or by swiping right  the Snackbar
Snackbar syntax :

Snackbar snackbar = Snackbar
        .make(vcoordinatorLayout, "This is a simple Snackbar", Snackbar.LENGTH_LONG);
 
snackbar.show();

As you can see Snackbar has three parameters:

View - 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

Message - Text to be displayed for the user

Duration - Time duration to display the snackbar. Ideal parameters are LENGTH_SHORT, LENGTH_LONG or LENGTH_INDEFINITE. When the duration is indefinite, user should dismiss the snackbar.

Lets implement Snackbar with an simple example

activity_main.xml
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/coordinatorLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.sample.foo.usingcoordinatorlayout.FabAndSnackbarActivity">

    <Button
        android:id="@+id/btnSnackBar"
        android:layout_width="137dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Click Me"/>

</android.support.design.widget.CoordinatorLayout>


MainActivity.java

package com.compiletimeerror.snackbarexample;

import android.os.Bundle;
import android.support.design.widget.CoordinatorLayout;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;


public class MainActivity extends AppCompatActivity {

    private Button button;
    private CoordinatorLayout vcoordinatorLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        vcoordinatorLayout = (CoordinatorLayout) findViewById(R.id.coordinatorLayout);

        button = (Button) findViewById(R.id.btnSnackBar);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(vcoordinatorLayout,
                        "This is a simple Snackbar", Snackbar.LENGTH_LONG)
                        .setAction("CLOSE", new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {
                            }
                        }).show();
            }
        });
    }
}

On button click this program will display the snackbar. Output of this program is shown at the beginning of the article.

Now in case while coding the program if you see an error like "cannot resolve symbol Snackbar" - check this article to resolve this..






Reactions:

0 comments :

Post a Comment