1. Home
  2. Training Library
  3. Programming
  4. Programming Courses
  5. User Interactions in Android App Development

Dialog Messages

Contents

keyboard_tab

The course is part of this learning path

Start course
Overview
Difficulty
Intermediate
Duration
31m
Students
3
Description

This course covers the different types of messages that you can use in your Android app, namely toast messages, snackbar messages, and dialog messages.

Intended Audience

This course is intended for anyone who wants to learn how to start building their own apps on Android.

Prerequisites

To get the most out of this course, you should have some basic knowledge of the fundamentals of Android.

Resources

Course GitHub repo: https://github.com/OakAcademy/android-app-development-with-kotlin/tree/main/Section%205%20-%20User%20Interactions/UserInteractions 

Transcript

Hello everybody. If this is the next video, you must be on the other side, welcome. So, what are we going to do? We're going to talk about Dialog Messages. So, dialog message is another message type and it's going to give some information to the user. But unlike these other messages I showed you, the user interacts with some kind of a dialog. So, in this dialog message, a small window opens up to the user and then the user is informed from this window. Then after this information is, I don't know, digested by the user, well, that user is going to decide what will happen next. So, you can see dialog messages in a bunch of different applications that you probably already use. For example, if you wanted to eat something, well, a dialog message is opened and it asks, "Do you really want to eat this?" And of course after that, if you wanted to eat it, you click 'Yes' or if you don't want to eat it, you click 'No'. Now, another example could be like this, when you want to close an application, a dialog message pops up and after that you can choose to close it or not. Sometimes that saved my bacon. So, dialog messages are one of the most used messages like ever. So, why don't you just go to Android Studio and see how to make one. So, you know that we already have a project, let's just continue with this one. So, first of all, let me just show you a small example, application here that we're going to do for this lesson, there's a button here called Show Alert Dialog. So, when you click on this button, let's say that we want to change the text of the button, so I'll click the button and as you can see a dialog window opens. Now, let's examine this dialog window a little bit. See how there's a little icon here. You can, of course, use any icon that you want here. So, I will also show you how to use icons in this tutorial. Let's do that too. So, here's the title of the dialog window and the message is given to the user. There are also two kinds of buttons here, Yes and No buttons. So, if we press the No button, of course there's not going to be any change, the dialog window will just close. If we press the Yes button, the dialog window will close and the text of the button will change. Now, I do want to show you one more thing in here. When the dialog window is opened, even if we click anywhere on the screen, well, that dialogue window will not be going anywhere anytime soon so, we can achieve all this with the codes that we will write. My friends, if you're ready, let's do it. So, we'll first add a button to the design area and I'll just change the checks to the button and I'm typing Show Dialog Message. I'm also going to set the idea of the button as buttonDialogMessage. Now, we've got to determine the constraint value so, I'll just right click the button with the mouse and select 'Center', 'Horizontally' and we can also set the constraint value for the vertical plane, set the top constraint value to 70. Cool. All right, my friends, that's all we're going to do here. Let's move on over to the MainActivity.kt file. Hopefully, you're already there. Now, we've got to define a variable first of all. So, the name of the variable is just going to be for me showDialogMessage. Now,

let's match it to its id in the onCreate method, showDialogMessage = findViewById (R.id.buttonDialogMessage). So now, let's add in a click listener to the button and I'll just type in showDialogMessage.setOnClickListener. Alright, so now, we can write the code required for the dialog message here. However, the code that we're going to write for the dialog message will not be as short as a toast message or even a snack bar message. So, what I'm going to do then and therefore and so on and so forth, I will hereby tell you that you need to define a different function for the dialog message and then write the necessary code in that function, then we can call the function. So, I've created it here. Let's create a new function outside of the onCreate function and we use the fun keyword, not for fun but for creating functions. So, let's give this function a name, pretty much the name of the functions going to be ShowAlertDialog and you can give whatever name you want but literally, it's good to be literal sometimes. So, this function is not going to have any parameters, it's not going to return any value. I'll define the scope of the function though with curly braces and I'm going to write the necessary code here but first, let's create the icon that we're going to use in the dialog window. So, what you do is you right click on the drawable folder. I'm going to choose New, Vector Asset, then click just on the Clip Art section from here. What do you see? Well, there's many, many different icons that we can choose in our projects. So, you can choose whichever icon you want. You could even choose a different category. For example, I'll just choose a category Alert and again here, you can see the different shapes of the icons. So, from here I'm going to select the round option. And after selecting desired icon, just press the 'OK' button. So, here you can change the name of the icon. For example, I'm going to write a warning here. Well, you can also change the color of the icon if you'd like. I'm going to choose a red color. So, after performing these operations, what do we do? Hey, click on the next button, indicates where the icon will be created. So, we create our icon by clicking the finish button and we're going to use this icon shortly but first we're going to start creating a dialog message. So, for the dialog message, we're  going to first need to create an object from the alertDialog.BuilderClass. Name the object, can be alertDialog and after the equal sign, I'll write AlertDialog.Builder. So, the Builder class here is an inner class inside the Alert Dialog class, we use the Builder class to customize a dialog window, that is, to create information such as header messages. Since the Builder class is also an Inner class, it's not possible to access it directly. So, access the builder class, we need to use the Outer Class Alert Dialog. Of course, the Builder class will take one parameter and this parameter is context parameter, you probably guessed that. So, you can write this@MainActivity right here. So, let's customize the dialog window using the Alert Dialog object that we created. So, I'm going to write in here the alertDialog.setTitle and whatever I write here, it will be shown as a title. You can see the title of the dialog message as change. So, I needed to find this title. I will write inside the quotation marks Change and I'll continue right here, .setMessage and I will also write here my message which I do want to show to the user by the way. Now, you can see the message here. The message is, Do you want to change the text of the button? So far so good. After the message, I will define the icon, you see how this is all fitting together. So, I'll write the .setIcon. Inside the parenthesis, I should write the path of the icon that is R.drawable.warning. Now, I also need to prevent the dialog from closing when clicking anywhere else on the screen. Now for that we can use the set cancelable method. So, we must also write false in parenthesis. So, we have defined all the parameters except for the Yes and the No buttons. So, that means I will now define Yes and the No buttons namely the positive and negative buttons.

Generally, the Yes button will be defined as a positive button, the No button is defined as a negative button. And how will I define these buttons? Well, just by writing in here, setNegativeButton. I needed to find the text of the button, I will write inside of these quotation marks, No. So, then after that I'll just need to add a listener to the No button. And, then when the user clicks on 'No', it's going to sense that and it'll do the particular operations that gets set in motion. So, after putting in a comma, when you press the control in space keys from the keyboard, the code editor offers us this click listener option. I'll just select it, press 'Enter'. Now, did you notice there are two parameters here? So, the first parameter is the dialogInterface parameter. So, this parameter represents a dialog. The second parameter is the variable of type, Integer, represents the No button. So, when you click the positive or negative button an integer value gets returned. So, then you can use this variable to get this value. Now, it's even going to make more sense if we just change the name of the variable, let's write the code. When the user clicks the No button, we just have to make the dialog close. So, with this I'll write dialogInterface.cancel. So, don't let me forget we needed to find the positive button that's also called the Yes button. And, if I write in here .setPositiveButton and then inside the parenthesis I will write the text of the positive button and of course, that would be Yes. I'm going to add a clickListener to the Yes button too. So, when the user clicks on 'Yes', well, it's going to know what to do. But, it's only going to know what to do if I write it in. So, now when the user clicks Yes, the text of the button should change. So, for this I'll write in here showDialogMessage.text because the name of the button is showDialogMessage. So, after the =, I will write the new text of the button, so, I write Alert Dialog inside quotation marks and that way the text will change, my friend,so that's customizing the dialog message using the builder class. And we have gotten to a great point so far but, we haven't yet written the necessary code to show the dialog message, have we? So, we're going to go write that, right now. So, here I'll just write in alertDialog.create.show. So, our dialog message is ready, now we can call this showAlertDialog function. We've already written the necessary code for the dialog message wherever we want the dialog message to be displayed. So, we want a dialogue message to be created when we click on the button. So, that means I am going to call it in the clickListener method of the button. So, I'm writing in showAlertDialog right here. So, why don't we run it and test it out.

Make sure it works as expected. So, the application opens, I'll click the 'Show Dialog Message' button and what do you see? Well, there's a dialog message. So, I'll click anywhere on the screen, dialog message doesn't close. So, now let's hit the no button and as you can see the dialog window gets closed. Now, if I click the button once again, this time we'll click on the 'Yes' button. There you go. So, when you click on the yes button the dialog window was closed and the text of the button changes. Alright, my friends, that was good. Good work. So, that's how you do a dialog message. We're going to take a break here if you want to. See you on the other side of this one because we got a lot in store for you in the next video. We just keep building and building. Alright, cool. See you then.

 

About the Author
Students
86
Courses
23
Learning Paths
1

Mehmet graduated from the Electrical & Electronics Engineering Department of the Turkish Military Academy in 2014 and then worked in the Turkish Armed Forces for four years. Later, he decided to become an instructor to share what he knew about programming with his students. He’s currently an Android instructor, is married, and has a daughter.

Covered Topics