Reading Time: 5 minutes

In the first part of this Android Alert Dialogs in Kotlin tutorial we talked about the importance of Dialogs in Android and Kotlin, the setup we did in that part of the series, is the building blocks of any other work you will need to create alerts.

This is the second part of this tutorial, if you want to see the first one, take a look at it in here:

Let’s stop for a moment and think of the first thing that comes to our mind with the word dialog, or alert. Now compare it with the result of our last post (Image 1), if you need a reminder here is the result of the last tutorial:

Image 1. Result of the last tutorial

The question is… What is it missing? What do alerts typically have that this one lacks? The first thing that comes to my mind is ‘buttons’. Most alerts are interactive, with this we mean they give you options and the possibility to choose among them. You are probably familiar with the functionality we implemented, dismissing by clicking on the gray area around, but it is not the best idea. As app developers, we have to prioritize User Experience, abbreviated as UX.

Buttons and UX

Buttons are a very interesting element of the digital world, but if we look into the origin of buttons, it is not part of the post-computer era, buttons existed way before computers and smartphones. This is the magic of buttons, they belong to the physical world, and that’s why everyone knows how to use them almost intuitively. On the other hand, clicking on the gray area outside a dialog is something we have learned with technology and modern design practices, but is not necessarily intuitive.

Buttons are a common element of interaction design. While they may seem like a very simple UI element, they are still one of the most important ones to create.

https://www.smashingmagazine.com/2016/11/a-quick-guide-for-designing-better-buttons/

Setting up the project

In case you didn’t follow along with the last tutorial, or simply want to start from where we left off, here you can download the project. Like the last time the specifications for this project are:

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

Open the project in Android Studio and wait for it to build, if you are wondering how to know when your project is ready, take a look at Image 2. This small window is called the ‘Build Output’. As long as everything has a checkmark next to it you’re good to go.

Image 2. Android Studio Build Output

Run the project with the play button at the top and ensure your app is working as it does in Image 1 above.

Adding buttons to your alert

It is important to remember that buttons give us choices, most alert dialogs will make you choose between two options, that usually are ‘yes’ and ‘no’. Note that these words could be replaced by others more according to your actions.

Pro-tip: use words that actually tell the user what the button will do, for example: ¿do you want to delete this file? good label: “delete”/”don’t delete”, bad label: “yes”, “no”. It may seem silly but for some users, this may be the difference between accidentally losing a file, or keeping it safe.

Once you have opened the project go to the file ‘MainActivity.kt‘, and locate the showBasicDialogFragment(), after the ‘builder.setMessage(“your message”)‘ instruction and before the ‘builder.show()‘, you will be adding the options for the dialog. Add the following code in there.

//1
builder.setPositiveButton("Yes") { dialog, which ->
    //2
    Toast.makeText(applicationContext, "Yes", Toast.LENGTH_SHORT).show()
}
//3
builder.setNegativeButton("No") { dialog, which ->
    //4
    Toast.makeText(applicationContext, "No", Toast.LENGTH_SHORT).show()
}   

The app will also most likely be marking the term “Toast” in red, this is because of a missing import, so add the toast import at the top. You can also use the shortcut option+intro or ctrl+intro to auto-import it.

//5
import android.widget.Toast

Note: I have added a section below explaining what is a Toast in case you are curious about how this works.

Now let’s review this code part by part:

  1. You are telling the builder object, to create a ‘positive’ button. Android by default already knows what a positive button is, and sometimes depending on the system or accessibility settings you can trigger it by voice commands or other ways. You are indicating that the text to display is “Yes“. and then adding two parameters, the first indicating it is a dialog and then a ‘which‘ parameter for telling it what to do when clicking it.
  2. This is the action that will be executed when clicking the “Yes”/positive button. In this case, you are creating a Toast item that also has the text “Yes” to test the functionality of your button.
  3. This code is the same as number one but in this case, you are defining a “negative” button, with the text “No”.
  4. Just as in the previous one, this is the same as number two, but with the “No” text.

Run the app and check the result. Below you can see a gif on how your app should be working by now.

Challenge

Add a maybe button to the dialog!

Click on the buttons below to get a hint or view the full answer. But before try to do it by yourself!

Hint: Just as Android has methods for positive and negative buttons, it also has a neutral button that you can set.

builder.setNeutralButton("Maybe") { dialog, which ->
	Toast.makeText(applicationContext, "Maybe", Toast.LENGTH_SHORT).show()
 }

Just as in the elements above, the neutral button is set with the text and action. Look at the gif below to see the behavior after running the app. Did you get the same result?

Toast items

Toast items, also known as toasts 🍞. Are elements used in Android to show something during a moment and dismiss it automatically afterward. A couple of years ago, they were the standard for quick messages, but now they are mainly used by developers to either show errors that are not so important to the user or in development to test things.

That’s it for today! I hope everything has been easily understood and this Android Alert Dialogs Kotlin Tutorial was useful to you. If you want to see the result of this tutorial, you can download the item below:

If you liked the content on this post, please subscribe at the bottom of the page. If you have any doubts don’t hesitate to leave a comment and I will reply as soon as possible. You can also donate a coffee to support me so I can keep on creating things like this!

Until next time!

Evana Margain Puig

(Visited 14 times, 1 visits today)