Wednesday, 25 April 2018 / Published in Android, Java, Programming Languages, Tutorial

Using Snackbar

Android Snackbar is an interesting component introduced with the Material Design. Snackbars are very similar to the Toast messages with a few exceptions but the biggest is that provide action to interact with. Snackbar will be displayed at the bottom of the screen and can be swiped away in order to dismiss them.

Major Difference between Toast and Snackbar messages

Toast message can be customized as well as displayed anywhere on the screen, however, Snackbar can be only shown at the bottom
Toast messages cannot display action controllers but Snackbars optionally can display them
Toast message remains on the screen until their time limit is mean but Snackbars can be swiped off before time expiring

note: similar to toast you have three different values for time limit

Implementing Snackbar

To begin this project is being created in Android Studio but any IDE that has the SDK for development can produce the same result. We begin by opening the ide and selecting “Create New Project”. Select “Empty Activity” and fill out the detail of the application and make sure with “Language” you select Java.

note: if you’re using Kotlin please review this tutorial

After the project is created open build.gradle and add the latest stable Material Design Dependency.

dependencies {
     implementation 'com.google.android.material:material:1.3.0'
}

By using the material dependency, you can also create components like Cardview, Recyclerview, and other things as well… If interested in learning to incorporate other material components review the below links.

Styling the App

<style name="AppTheme"
    parent="Theme.MaterialComponents.Light.NoActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimary</item>
    <item name="colorAccent">@color/colorPrimary</item>
</style>

Method Creation

Open your MainActivity.java and we will begin by creating the following methods:

Basic Snackbar
- As you can see the syntax is the default setup of the Snackbar. Please take note of the make function which accepts the following parameters. View, expected message to display and then the duration of the message to display.

public void basicSnack(View v){
    Snackbar sb = Snackbar.make(cl, "This is a basic Snackbar Display", Snackbar.LENGTH_SHORT);
    sb.show();
}

Action Basic Snackbar
- Within this method, we reference a callback interaction using setAction(). This allows you to take a certain action when the user interacts with a Snackbar

public void basicActionSnack(View v) {
    Snackbar sb = Snackbar.make(cl, "Snackbar with Action Feature", Snackbar.LENGTH_SHORT);
    sb.setAction("Undo", new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Toast.makeText(getApplicationContext(), "Undo action", Toast.LENGTH_SHORT).show();
        }
    });
    sb.show();
}

Custom Basic Snackbar
- By default, Snackbar text color is set to white with the default background #323232 but these features can be overwritten

public void basicCustomSnack( View v) {
    Snackbar sb = Snackbar.make(cl, "Custom Snackbar", Snackbar.LENGTH_SHORT);
    sb.setAction("Undo", new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Toast.makeText(getApplicationContext(), "Undoing Action", Toast.LENGTH_SHORT).show();
        }
    });

    sb.setActionTextColor(Color.CYAN);
    View sbv = sb.getView();
    TextView tv = sbv.findViewById(R.id.snackbar_text);
    tv.setTextColor(Color.GREEN);
    
    sb.show();
}

Let’s check the completed code

<!-- main activity xml-->
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/app_Coordinator"
    android:fitsSystemWindows="true"
    android:orientation="vertical">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary">

        <androidx.appcompat.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:id="@+id/toolbar"
            android:theme="@style/ToolbarStyle"
            app:title="@string/app_name"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

    </com.google.android.material.appbar.AppBarLayout>
    <include layout="@layout/app_content" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="10dp"
        android:src="@drawable/ic_add_black"
        android:contentDescription="TODO" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

<!--container xml -->
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:padding="10dp"
    android:orientation="vertical">

    <androidx.appcompat.widget.AppCompatButton
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/basic_snack"
        android:onClick="basicSnack" />

    <androidx.appcompat.widget.AppCompatButton
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/basic_action_snack"
        android:onClick="basicActionSnack" />

    <androidx.appcompat.widget.AppCompatButton
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/basic_custom_snack"
        android:onClick="basicCustomSnack" />

</androidx.appcompat.widget.LinearLayoutCompat>

// main activity 
public class MainActivity extends AppCompatActivity {
    private CoordinatorLayout cl;
    private Toolbar tb;

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

        cl = findViewById(R.id.app_Coordinator);
        tb = findViewById(R.id.toolbar);
        setSupportActionBar(tb);
    }

    public void basicSnack(View v){
        Snackbar sb = Snackbar.make(cl, "This is a basic Snackbar Display", Snackbar.LENGTH_SHORT);
        sb.show();
    }

    public void basicActionSnack(View v) {
        Snackbar sb = Snackbar.make(cl, "Snackbar with Action Feature", Snackbar.LENGTH_SHORT);
        sb.setAction("Undo", new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getApplicationContext(), "Undo action", Toast.LENGTH_SHORT).show();
            }
        });

        sb.show();
    }

    public void basicCustomSnack( View v) {
        Snackbar sb = Snackbar.make(cl, "Custom Snackbar", Snackbar.LENGTH_SHORT);
        sb.setAction("Undo", new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getApplicationContext(), "Undoing Action", Toast.LENGTH_SHORT).show();
            }
        });

        sb.setActionTextColor(Color.CYAN);

        View sbv = sb.getView();
        TextView tv = sbv.findViewById(R.id.snackbar_text);
        tv.setTextColor(Color.GREEN);

        sb.show();
    }
}

To conclude

I hope you found this reading helpful and if you need further assistance don’t hesitate to contact me for additional assistance. If you are also interested in seeing other tutorials that are not present please hit my line and with