Friday, August 7, 2015

Android Snackbar example of Android Design Support Library

android.support.design.widget.Snackbar 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.


- Make sure your main activity extends AppCompatActivity.
- Make sure include dependencies of both 'com.android.support:appcompat-v7:22.2.1' and 'com.android.support:design:22.2.1' (currently version 22.2.1) in your build.gradle. Refer last post about how to "Add Android Design Support Library to Android Studio Project".


- Add <android.support.design.widget.CoordinatorLayout> in your layout file, layout/activity_main.xml.
<LinearLayout
    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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:autoLink="web"
        android:text="http://android-er.blogspot.com/"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textStyle="bold"
        android:textSize="30dp"
        android:text="Android Snackbar example" />

    <Button
        android:id="@+id/showSnackBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Show SnackBar" />

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/snackbarCoordinatorLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

</LinearLayout>


com.example.eric.snackbar.MainActivity.java
package com.example.eric.snackbar;

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;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    Button btnShowSnackBar;
    CoordinatorLayout snackbarCoordinatorLayout;

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

        snackbarCoordinatorLayout = (CoordinatorLayout)findViewById(R.id.snackbarCoordinatorLayout);

        btnShowSnackBar = (Button)findViewById(R.id.showSnackBar);
        btnShowSnackBar.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View v) {
                Snackbar snackbar = Snackbar.make(
                        snackbarCoordinatorLayout,
                        "Snackbar",
                        Snackbar.LENGTH_LONG);

                snackbar.setAction("OK", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(
                                MainActivity.this,
                                "snackbar OK clicked",
                                Toast.LENGTH_LONG).show();
                    }
                });

                snackbar.show();
            }

        });
    }

}



No comments:

Post a Comment