Android Pop-up messages Tutorial for beginners

Since the very early years of computers, we started getting familiar with the term ‘pop-up’. Back then it was something you wanted to block by all means. Most of the time it was related to publicity or malware. Now in the era of smartphones, we have alerts and dialogs, in which I created a three-part tutorial previously. In this tutorial, we will learn of Android pop-up messages.

Android gave a new meaning to the term pop-up. In my opinion, their definition is way more accurate, and it is related to showing a message that pops from the bottom of the screen. This is better described with an image, so take a look below.

Snackbars were introduced alongside material design in 2015. Before that, the preferred method for showing a brief message was a toast (Here in part 2 of Android Alert Dialogs in Kotlin I explain briefly what Toasts are). An advantage of Snackbars over Toasts, is that they can contain buttons.

In this tutorial, I will teach you how to create these pop-ups to integrate with your app. As in all the previous tutorials, we will use it as a starting point the project explained in the “New Android Studio project for Kotlin and Java” resulting file.

If you need the file you can download it here:

Download: Starter project

This project is written in:

• Android Studio 3.6.1
• Kotlin 1.3
• Compat Library: AndroidX

It is a good starting point to build and run the starter app before starting the tutorial for ensuring everything is working correctly. The screen that you should be seeing is illustrated below in Image 2.

Using a Snackbar in a coordinator layout

Android recommends using snackbars inside coordinator layouts. You will still be able to use a snackbar in any other kind of layout, but according to Android’s documentation, the coordinator gives two advantages:

1. Snackbars can only be dismissed if they are in a coordinator layout.
2. The coordinator layout takes care of pushing some UI elements to the top when the snackbar appears so that you have a clean layout.

By default, this project and most Android starter projects, have a Constraint Layout. The first thing you need to do is change it by opening activity_main.xml, you can find it in app > res > layout > activity_main.xml as shown in Image 3.

Once you open the file you will be able to see the root tag of the XML which is a ConstraintLayout (Image 4).

Replace the constraint layout with the following code:

<androidx.coordinatorlayout.widget.CoordinatorLayout 
  android:id="@+id/myCoordinatorLayout"   
  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" 
  tools:context=".MainActivity"> ... </androidx.coordinatorlayout.widget.CoordinatorLayout>

If you run the app after this change you will notice the label changed places (Image 5). Actually, all the constraints are useless now, so you can go ahead and delete the following lines:

app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"

In case you have errors take a look below (Image 6) at how your code should look after these changes.

Adding material design to the project

In order to use snackbars in any project you first need to add the material design dependency in your app’s Gradle file. The file can be found in Gradle Scripts > build.gradle(Module: app), you can see it in the image below.

Once you have that file open at the bottom, inside dependencies add the following code.

implementation 'com.google.android.material:material:1.0.0'

Android Studio will request to Sync the project, go ahead and do it. Nothing will change, but now you will be able to use Snackbars.

Create a Snackbar in MainActivity

With all this setup done you can now add your snackbar. Open MainActivity.kt, located in app > java > c.e.android.myapplication > MainActivity.kt as shown in the image below.

At the top of the file we will need to import the dependency for Android Snackbars with the following code:

import com.google.android.material.snackbar.Snackbar

Then create the snackbar and show it with the code below:

//1 
val snackbar = Snackbar.make(findViewById(R.id.myCoordinatorLayout), "Hello snackbar world!", Snackbar.LENGTH_LONG) //2 
snackbar.show()

Let’s review this code:

1. You will store the snackbar in a val variable. Then you use the Snackbar.make, the method to create a snackbar, it receives three parameters:

• The parent view, which as mentioned above is recommended to be a CoordinatorLayout, but could also be a LinearLayout, ConstraintLayout, or any other you could think of.
• The text you want it to have — in this case, “Hello snackbar world!”
• The length of time in which the snackbar will be shown which can be LENGTH_LONG, LENGTH_INDEFINITE, or LENGTH_SHORT

2. You tell the snackbar to show.

Notice you could do instructions one and two in only one line, but for clarity, we are separating it in two lines here.

After these changes, you can run the app and will see the snackbar appear for a couple of seconds after the launch of the app.

Adding an action to the Snackbar

As mentioned in the beginning, Android Snackbars can also have an action button. So in this part of the tutorial, we will be adding one.

First of all, go to activity_main.xml and in the TextView tag add an id:

android:id="@+id/text_view_welcome"

Then go back to MainActivity.kt and import the ‘View’ class which is needed to manipulate the snackbar.

Next, inside the onCreate method, add the snackbar button with this code:

snackbar.setAction("Click me", View.OnClickListener { 
    text_view_welcome.text = "I changed the text!" 
})

This code has two parts. First, you set the action and the text of the button, which in this case will be “Click me”. Then you create an onClickListener, which will make reference to the id added to the text view. By setting this property you will be changing the text in the screen by clicking in the button of the Snackbar.

Run the app and click the button, you can see the result below in images ten and eleven.

This is it! You have covered everything you need for Snackbars. If you want to see how the project should work at the end you can download the finished project here:

Download: Finished project

If you have any doubts don’t hesitate to leave a comment and I will reply as soon as possible.

Until next time!

Evana Margain Puig