Snackbar is a widget in android which can be used as a replacement for Toast.It can be used to display Messages in the bottom of the screen.Addition to that we can add action buttons also to snack bar. Snackbar can be normal snackbar and action snackbar. Normal snackbar will work as toast message which will display at the bottom of the screen and action snack bar will contain a button which will allow to perform some actions while clicking on it.
Following is the code to display a normal snackbar with some text.
Snackbar snackbar = Snackbar .make(coordinatorLayout, "Normal Snack Bar", Snackbar.LENGTH_LONG); snackbar.show();
Following is the code for action snack bar. There will be a action button and we action define the onClick of that button.Here in my code the action what i am giving is displaying another snack bar. You can give your own action also.
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();
Following code will help you to know how to customize a snack bar.
// code for custom snack bar
Snackbar snackbar = Snackbar
.make(coordinatorLayout, "Try again!", Snackbar.LENGTH_LONG)
.setAction("RETRY", new View.OnClickListener() {
@Override
public void onClick(View view) {
}
});
snackbar.setActionTextColor(Color.BLUE);
View sbView = snackbar.getView();
TextView textView = (TextView) sbView.findViewById(android.support.design.R.id.snackbar_text);
textView.setTextColor(Color.YELLOW);
snackbar.show();
Let us see a simple example of using snackbar.
1.Creating New Project
- Create a new project in Android Studio from File -> New Project
- Fill the required fields like Application name and package name and click Next
- Select Basic activity and click Next, and click Finish Button.A default activity will be created as MainActivity.java with layouts activity_main.xml and content_main.xml
2. Here is the code for your activity_main.xml
activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <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:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" android:id="@+id/coordinatorLayout" tools:context="codes4.com.snackbardemo.MainActivity"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/AppTheme.AppBarOverlay"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:popupTheme="@style/AppTheme.PopupOverlay" /> </android.support.design.widget.AppBarLayout> <include layout="@layout/content_main" /> </android.support.design.widget.CoordinatorLayout>
3. following is the code for res/layout/content_main.xml
content_main.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout 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: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" app:layout_behavior="@string/appbar_scrolling_view_behavior" tools:context="codes4.com.snackbardemo.MainActivity" tools:showIn="@layout/activity_main"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerVertical="true" android:orientation="vertical"> <Button android:id="@+id/btn_normal" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/colorPrimary" android:textColor="@color/white" android:text="Normal Snack Bar"/> <Button android:id="@+id/btn_action" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/colorPrimary" android:textColor="@color/white" android:text="Action Snack Bar" android:layout_marginTop="5dp"/> <Button android:id="@+id/btn_custom" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/colorPrimary" android:textColor="@color/white" android:text="Custom Snack Bar" android:layout_marginTop="5dp"/> </LinearLayout> </RelativeLayout>
4. Here is the code for MainAcitivy
MainActivity.java
package codes4.com.snackbardemo;
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.view.Menu;
import android.view.MenuItem;
import android.widget.Button;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity implements View.OnClickListener{
Toolbar toolbar;
Button btn_normal,btn_action,btn_custom;
private CoordinatorLayout coordinatorLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//Method for initialisation
init();
}
private void init() {
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
btn_normal = (Button) findViewById(R.id.btn_normal);
btn_action = (Button) findViewById(R.id.btn_action);
btn_custom = (Button) findViewById(R.id.btn_custom);
coordinatorLayout = (CoordinatorLayout) findViewById(R.id.coordinatorLayout);
btn_normal.setOnClickListener(this);
btn_action.setOnClickListener(this);
btn_custom.setOnClickListener(this);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
@Override
public void onClick(View v) {
if(v.getId() == R.id.btn_normal){
Snackbar snackbar = Snackbar
.make(coordinatorLayout, "Normal Snack Bar", Snackbar.LENGTH_LONG);
snackbar.show();
}else if(v.getId() == R.id.btn_action){
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();
}else if(v.getId() == R.id.btn_custom){
// code for custom snack bar
Snackbar snackbar = Snackbar
.make(coordinatorLayout, "Try again!", Snackbar.LENGTH_LONG)
.setAction("RETRY", new View.OnClickListener() {
@Override
public void onClick(View view) {
}
});
snackbar.setActionTextColor(Color.BLUE);
View sbView = snackbar.getView();
TextView textView = (TextView) sbView.findViewById(android.support.design.R.id.snackbar_text);
textView.setTextColor(Color.YELLOW);
snackbar.show();
}
}
}
5. finally add the following code to your colors.xml
colors.xml
<?xml version="1.0" encoding="utf-8"?> <resources> <color name="colorPrimary">#3F51B5</color> <color name="colorPrimaryDark">#303F9F</color> <color name="colorAccent">#FF4081</color> <color name="white">#FFFFFF</color> </resources>
Output
