Another interesting component introduced in Material Design is the Snackbar. Snackbars are just like Toast messages except they provide action to interact with. Snackbar will be displayed at the bottom of the screen and can be swiped off in order to dismiss them.
This article explains about snackbar with few examples covering different scenarios.
1. Simple Snackbar
Below is the syntax of a simple snackbar. The make function accepts three parameters. View, display message and duration of the message to be displayed.
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 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 = Snackbar .make(coordinatorLayout, "Welcome to AndroidHive", Snackbar.LENGTH_LONG);snackbar.show(); |
2. Snackbar with Action Callback
You can also mention a callback interaction method using setAction() method. This allows us to take certain action when user interacts with the snackbar.
Snackbar snackbar = Snackbar .make(coordinatorLayout, "Message is deleted", 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(); |
3. Customizing the Snackbar View
Snackbar comes with default white color text and #323232 background color. You can override these colors as mentioned below.
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 colorsnackbar.setActionTextColor(Color.RED);// Changing action button text colorView sbView = snackbar.getView();TextView textView = (TextView) sbView.findViewById(android.support.design.R.id.snackbar_text);textView.setTextColor(Color.YELLOW);snackbar.show(); |
4. Creating New Project
Now we’ll create a simple app to sea the snackbar in action when the app is having aCoordinatorLayout and a FloatingActionButton.
1. In Android Studio, go to File ⇒ New Project and fill all the details required to create a new project.
2. Open build.gradle and add design support library dependency.
com.android.support:design:23.0.1
dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compile 'com.android.support:appcompat-v7:23.0.1' compile 'com.android.support:design:23.0.1'} |
4. Open the layout file your main activity activity_main.xml and below code. Here you can see I have added the CoordinatorLayout and FloatingActionButton.
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/coordinatorLayout" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:layout_scrollFlags="scroll|enterAlways" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> </android.support.design.widget.AppBarLayout> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" android:paddingLeft="20dp" android:paddingRight="20dp" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <Button android:id="@+id/btnSimpleSnackbar" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginTop="30dp" android:text="Simple Snackbar" /> <Button android:id="@+id/btnActionCallback" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:text="With Action Callback" /> <Button android:id="@+id/btnCustomSnackbar" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:text="Custom Color" /> </LinearLayout> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="end|bottom" android:layout_margin="16dp" android:src="@android:drawable/ic_dialog_email" /></android.support.design.widget.CoordinatorLayout> |
5. Now open MainActivity.java and make the changes as mentioned below. This activity contains three button click listeners to show the different ways of implementing the snackbar covering the scenarios explained above.
import android.graphics.Color;import android.os.Bundle;import android.support.design.widget.CoordinatorLayout;import android.support.design.widget.FloatingActionButton;import android.support.design.widget.Snackbar;import android.support.v7.app.AppCompatActivity;import android.support.v7.widget.Toolbar;import android.view.View;import android.widget.Button;import android.widget.TextView;public class MainActivity extends AppCompatActivity { private Toolbar mToolbar; private CoordinatorLayout coordinatorLayout; private Button btnSimpleSnackbar, btnActionCallback, btnCustomView; private FloatingActionButton fab; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); coordinatorLayout = (CoordinatorLayout) findViewById(R.id .coordinatorLayout); fab = (FloatingActionButton) findViewById(R.id.fab); mToolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(mToolbar); btnSimpleSnackbar = (Button) findViewById(R.id.btnSimpleSnackbar); btnActionCallback = (Button) findViewById(R.id.btnActionCallback); btnCustomView = (Button) findViewById(R.id.btnCustomSnackbar); btnSimpleSnackbar.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Snackbar snackbar = Snackbar .make(coordinatorLayout, "Welcome to AndroidHive", Snackbar.LENGTH_LONG); snackbar.show(); } }); btnActionCallback.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Snackbar snackbar = Snackbar .make(coordinatorLayout, "Message is deleted", 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(); } }); btnCustomView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { 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 sbView = snackbar.getView(); TextView textView = (TextView) sbView.findViewById(android.support.design.R.id.snackbar_text); textView.setTextColor(Color.YELLOW); snackbar.show(); } }); }} |