Skip to main content

Android SnackBar Example


Android Snackbar:

    you can Download the complete Android Studio Project here.




Few Things About Android Snackbar:

Snackbar is an Improved Toast message, where you can  make the user respond to an action with the actual message. A snackbar appear over all layout , in the bottom of the mobile screen. 
Like a Toast message, you can only display one snackbar at a time.

SnackBar can be dismissed by swiping it to the right.

You can able to display Snackbar inside Any layout of your choice, So in this example we have two Layout CoOrdinatorLayout which is inside Parent Linear Layout.

On clicking the First two  button ,Snackbar will be shown  inside  bottom of the CoOrdinator Layout ,  And Last button Will display snackbar in the bottom of parent Layout.



You can Display Snackbar inside Fragment and Activity as well , but in case of Activity, your Activity must extend from AppcompatActivity.


You can set a  Snackbar to display only message by doing the following.
  Snackbar.make(coordinatorLayoutForSnackBar,"Message",Snackbar.LENGTH_LONG).show();  

To make the action inside your snackbar works you have to create an Listener , and assign it to the action view of the snackbar.

You can Also Change the backGround color of the SnackBar and Text color By doing the Following.

Code Snippet:

final View.OnClickListener snackbarClickListener=new View.OnClickListener() {  
       @Override  
       public void onClick(View v) {  
         snackbar.dismiss();  
       }  
     };  
 snackbar=Snackbar.make(coordinatorLayoutForSnackBar, "Message", Snackbar.LENGTH_INDEFINITE).setAction("Dismiss",snackbarClickListener);  
         snackbar.setActionTextColor(Color.RED);  
         View view=snackbar.getView();  
         view.setBackgroundColor(ContextCompat.getColor(MainActivity.this,R.color.colorPrimaryDark));  
         TextView tv=(TextView)view.findViewById(android.support.design.R.id.snackbar_text);  
         tv.setTextColor(Color.RED);  
         snackbar.show();  

In this we have an Action named Dismiss in the right side of the snackbar, on Clicking it, the snackbar will get dismissed.

LENGTH_INDEFINITE- Show the SnackBar indefinitely and non dismissal by swipe, useful when user action required from Snackbar.

LENGTH_SHORT- Show  SnackBar for short period of time.

LENGTH_LONG- Show SnackBar over Long period of time.
CoOrdinatorLayout:
CoOrdinatorLayout is a Super Frame Layout, in which the view inside this layout can communicate with one another. 

If you want to  use Floatable Icon and SnackBar together in your layout , you have to use
android.support.design.widget.CoordinatorLayout.

1. build.gradle:

    If you are using Android Studio add the following line as your dependencies inside app gradle 
folder , if eclipse download the Volley Libaray and add it  to your Project. 

dependencies {
    compile 'com.android.support:design:22.2.1'
}

2.activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>  
 <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:id="@+id/linearLayout_parent"  
   android:orientation="vertical"  
   android:paddingRight="@dimen/activity_horizontal_margin"  
   android:paddingTop="@dimen/activity_vertical_margin"  
   android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">  
   <android.support.design.widget.CoordinatorLayout  
     android:id="@+id/co_ordinated_layout_main"  
     android:layout_width="match_parent"  
     android:layout_height="match_parent"  
     >  
     <LinearLayout  
       android:orientation="vertical"  
       android:layout_width="match_parent"  
       android:layout_height="wrap_content">  
       <Button  
        android:id="@+id/show_snackbar"  
        android:text="show snackbar"  
        android:textColor="#000000"  
        android:textSize="13dp"  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"/>  
     <Button  
       android:id="@+id/change_snackbar_text_color"  
       android:text="Change SnackBar Background and text Color"  
       android:textColor="#000000"  
       android:textSize="12dp"  
       android:layout_width="match_parent"  
       android:layout_height="wrap_content"/>  
     <Button  
       android:layout_width="match_parent"  
       android:layout_height="wrap_content"  
       android:id="@+id/snackbar_in_parent_layout"  
       android:text="snackbar on Parent Layout"  
       android:textColor="#000000"  
       android:textSize="12dp"  
       />  
     </LinearLayout>  
   </android.support.design.widget.CoordinatorLayout>  
  </LinearLayout>  

3.MainActivity.java:


public class MainActivity extends AppCompatActivity {  
    Button showSnackbar,changeSnackBarTextColor,snackBarinParentLayout;  
   CoordinatorLayout coordinatorLayoutForSnackBar;  
   Snackbar snackbar;  
   LinearLayout parentLinearLayout;  
   @Override  
   protected void onCreate(Bundle savedInstanceState) {  
     super.onCreate(savedInstanceState);  
     setContentView(R.layout.activity_main);  
     showSnackbar=(Button)findViewById(R.id.show_snackbar);  
     changeSnackBarTextColor=(Button)findViewById(R.id.change_snackbar_text_color);  
     snackBarinParentLayout=(Button)findViewById(R.id.snackbar_in_parent_layout);  
     coordinatorLayoutForSnackBar=(CoordinatorLayout)findViewById(R.id.co_ordinated_layout_main);  
     parentLinearLayout=(LinearLayout)findViewById(R.id.linearLayout_parent);  
     showSnackbar.setOnClickListener(new View.OnClickListener() {  
       @Override  
       public void onClick(View v) {  
        Snackbar.make(coordinatorLayoutForSnackBar,"Message",Snackbar.LENGTH_LONG).show();  
         }  
     });  
     final View.OnClickListener snackbarClickListener=new View.OnClickListener() {  
       @Override  
       public void onClick(View v) {  
         snackbar.dismiss();  
       }  
     };  
     changeSnackBarTextColor.setOnClickListener(new View.OnClickListener() {  
       @Override  
       public void onClick(View v) {  
         snackbar=Snackbar.make(coordinatorLayoutForSnackBar, "Message", Snackbar.LENGTH_INDEFINITE).setAction("Dismiss",snackbarClickListener);  
         snackbar.setActionTextColor(Color.RED);  
         View view=snackbar.getView();  
         view.setBackgroundColor(ContextCompat.getColor(MainActivity.this,R.color.colorPrimaryDark));  
         TextView tv=(TextView)view.findViewById(android.support.design.R.id.snackbar_text);  
         tv.setTextColor(Color.RED);  
         snackbar.show();  
        }  
     });  
     snackBarinParentLayout.setOnClickListener(new View.OnClickListener() {  
       @Override  
       public void onClick(View v) {  
         snackbar=Snackbar.make(parentLinearLayout,"Message",Snackbar.LENGTH_INDEFINITE).setAction("Dismiss",snackbarClickListener);  
         snackbar.setActionTextColor(Color.GREEN);  
         View view1=snackbar.getView();  
         view1.setBackgroundColor(Color.GRAY);  
         TextView tv=(TextView)view1.findViewById(android.support.design.R.id.snackbar_text);  
         tv.setTextColor(Color.GREEN);  
         snackbar.show();  
       }  
     });  
   }  
 }  

This is how Snackbar works. 

Comments

  1. Inspiring writings and I greatly admired what you have to say , I hope you continue to provide new ideas for us all and greetings success always for you..Keep update more information..
    Click here:
    angularjs training in sholinganallur
    Click here:
    angularjs training in btm

    ReplyDelete
  2. Very informative post.
    Thanks for sharing this!
    It helped a lot

    ReplyDelete

Post a Comment