ALERT DIALOG - Android Fundamentals

[Music] hey guys welcome back to new video this video will be about how to show different kinds of dialogues to let the user enter some data the android framework provides the alert dialog class with which we can create lots of different dialogues very easily and I already prepared a little layout here our activity main.xml I prepared that little layout with three buttons because I want to show you three different kinds of dialogues if you don't know how to build this layout then I suggest you to watch my video about constraint layout and buttons first but here can have my XML code so you can just pause the video and write it off make sure to use a constrained layout here the first dialog I want to create with you is when the user clicks on that button dialog one here and that should be just a simple yes/no dialog where the user can either accept or decline a change so let's jump into our main activity Katie file and here we can create the instance of our dialog so well and I want to create and add contact dialog here so that just says do you want to add this person to your contact list and then you have that yes option or that no option so let's write well at contact dialog alert dialog dot Bueller so we don't use the alert dialog class right away instead it has an inner class which is called builder and that is a very common pattern that you will encounter very often in Android so in this case for dialogues we can set very many customized options that we can choose on our own and it would be a horrible style to put them all inside of a constructor to define how our alert dialogue looks like and instead that our our dialogue class contains an inner builder class with which we can only set the options for the dialogue that we wanted to have so you can see what I mean in a sec so let's call that constructor for that builder class and here we need to pass the context so we just passed this and now if we write a dot after that then we can see all the available functions we can call on that builder and you can see there are many many functions how we can customize our alert dialog and if you look at the return type of those functions so for example it doesn't really matter each function here returns the builder again so that means because that function returns that builder we can call each function again on that function so if you if you write set title for example to set the title of our dialogue to add contact then this function here returns such a builder - so we can write a dot after that again and call all those functions again on that set title function but let's actually use a new line for each function we call on that builder just for readability then let's call the set message function here that is just to display a general message that explains what this dialogue is for so in this case do you want to add mr. prove to your contacts list the next thing I want to do here is to add an icon to Eric at contact dialog so let's call the set icon function and here we need to provide an ID from our drawable folder so I will use our the drawable dot I see at contact and that doesn't exist of course because we didn't add it so let's go to your on drawable folder here right click new image asset and here you can see I already use that icon before if you don't have it like this then choose IC at contact as a name click on that clip art and you can use that search bar to search for person ad and that's the icon I want to use here but of course you can choose any icon that you want so select the item icon that you want click OK and make sure to select custom as a theme and use black s color for that icon because the background of our alert dialog will be white and this is why I want to set the color of that I can do black so it is visible on a white background then click Next and finish and now it finds our icon and the last thing that is missing now is the actual yes or no option so the user can choose whether he want to add mr. prove to his contacts list or not to do that we need to write that set positive button for the yes button and here we can choose a string that will be displayed so that is basically the title of that button which is just yes and here we need to pass a lambda function and we need you that now the function takes parameters so if you click at the right starting curly bracket here and press ctrl + space then we need to implement that dialogue interface and I variable here so just press ENTER here and you can rename them if you want I will just leave them like that we would need that dialogue interface parameter if we wanted to access the interface of our dialogue so for example if we wanted to dismiss that dialogue or cancel it but every time we use that set positive button function that means it will dismiss the dialog automatically if we click on it because this missing means for dialogues that the dialogues job is done and when the user clicks on yes or no then we know that the dialogues job is done on the other hand cancelling a dialogue means that the user wants to escape from that dialogue without choosing one option so for example if he presses a back button or something like that then we would use the cancel function so in this case we don't need that dialogue interface parameter and we also don't need that I here which just it which is just an integer that describes which button was clicked and every time you use a Kotlin lambda function like this that takes two parameters here and we don't need those parameters then we can replace those parameters with an underscore so just select that parameter and replace it with an underscore here and the same for I that code will now be executed whenever the user clicks on that positive button on that yes button and I want to display a toast so toasts that make text pass this as context and now we need to enter a text for that toast for example you added mr. poop to your contact list and toast at length short and make sure to call that show after that and of course we have to do the same for the negative button for the no button so let's copy that part where we set the the positive button here paste it below replace set positive button with set negative button replace yes with no of course and let's write you didn't add you didn't add mr. prove to your contact list and that's actually it to create that customize dialog but actually there's one more step we have to do to actually create the real dialog because currently we only created the builder of that dialog because that set negative button function also returns a builder and currently that add contact dialog here that object is a builder to and to actually create a dialog that actually returns an alert dialog and not the Builder we need to call dot create afterwards and you can see that returns in alert dialog and now we can set an onclicklistener to our button dialog 1 so to show our first dialog which we just created so button dialog want that set on click listener and inside here we just need to call at contact dialogue so our just created dialogue dot show then let's run that app to demonstrate you what happens so if we now click on dialogue 1 then this ad contact dialog will show and I think it looks really cool so here is your icon then the title at contact and it says do you want to add mr. prove to your contacts list and now we can choose either no or yes so let's choose no and then a toast appears you didn't add mr. proof to your contacts list if we choose yes here then it says you added mr. proof to your contact list the next dialog I want to show you is a single choice dialog which is very similar to radio buttons just in form of a dialogue so where we have several options to choose from but you can only choose one of them for that we first need to create an array of strings that define the different options so let's write well options is equal to array of first item so for the first item then second item and third item then we need an a lot dialog builder again so let's write well single choice dialog is equal to l word dialog dot builder has this for the context again we can set the title to choose one of these options and then we can set single choice items as you can see and that function is overloaded with very many versions of it I will choose the version of that function that takes that array as first parameter which is just our options array then the next item is which item should be checked by default so let's just choose zero for the first item and now you know you have to add an onclicklistener again so in this case it's actually an on item checklist now that is called whenever we check a different item so let's pass this as a lender function again and inside of those curly brackets press control space and choose those two variables here dialog interface and I so press ENTER here I leave the names like that and go inside of that block here I will copy that toast from above and just paste it so I just want to display a toast message here whenever we check another item and this toast measured message short say you clicked on and now we can pass our options away at the index options dot and then that index at the index of I and that I that is passed here as a parameter to our long at lambda function is the index of the item that was currently checked so if we want to get the actual item name then we have to access our options away at the index of I so if I is zero then that would mean we just clicked on the zeroeth item and options at the index of zero would just be first item so it would just show toast you click on first item here and then we also want to add a positive and negative button to that single choice dialog so we are able to dismiss it and for that I will just copy what we have above here and I will also copy that create and just paste it below here and of course we can replace those text for example the positive button with accept and change the text of that toast to you except that the single choice dialog and change this to decline and this to you decline the single choice dialogue then we can add an onclicklistener to our button dialogue - and here we want to show that single choice dialogue so single choice dialogue dot show let's run our app to show you what happens so if we now click on dialogue - then this dialogue will show up we can choose between those three items every time we check another item it shows a toast you click on second item you clicked on first item and you click on third item so that works fine and if we decline that dialogue then it tells us to decline the single choice dialogue if we accept it you accepted the single choice dialogue and of course if there is a single choice dialogue then there's also a multi choice dialogue for that I just want to copy that whole single choice dialogue because we don't need to make much changes for the multi choice dialogue let's rename this to MultiChoice dialogue and we can leave that we can leave it like that just replace that set single choice items function here with set multi choice items and this takes our options array again for the different options we can check and those options will now be like checkboxes so we can check several of them now we need to provide a boolean array to determine the initial state of our options so which options are checked initially and which not so let's write boolean array off and because we have three items in our options array here we also need to add three billions into that boolean array and I will leave them all unchecked initially so let's write false false and false so that just means that the first item is unchecked the second item is uncheck and the third item is unchecked if I wanted to check this the second item initially then we would need to replace this false with true but I want to leave them all unchecked after that we have to use that lambda function again so what happens if we click on one option here so let's open curly brackets press control space to insert those parameters in this case there are three parameters the dialog interface which we don't need here because we have a positive and negative button which will dismiss that dialog anyway then we have that variable I which refers to the current index of the item that is either checked or unchecked so we need that variable I and we have that variable B which is just a boolean that says whether that item was currently checked or unchecked so we could also rename this to is checked so it's actually a little bit more clear what this is for then we can go into that block and we can create a toast again so toast of make text pass this as context and as a message you checked options at the index of I and toast dot length short touch show and of course we only want to show that toast if we actually checked that option one so we don't want to show that toast if we unchecked it because of that we need to check if is checked so if is checked is true then we know that this current item was checked from false to true and in that case we want to show that toast and we could also write an else case here so if we unchecked an item then we could also display a toast but replace this with unchecked and also rename the single choice dialogue to MultiChoice dialogue copy it and paste it below finally we can add that on click listener to our button dialogue 3 oops button dialogue 3 here the odd set on click listener and here we can just call MultiChoice dialogue - show so let's run our app and if we now click on dialogue 3 then that MultiChoice dialogue will open and you can see those are all checkboxes we can check several of them and every time it all shows up you check the first item you check the second item if we uncheck them you uncheck second item you check third item you uncheck first item so you get it and if we click on decline it says you decline the MultiChoice dialogue if you click on accept you accepted the magic choice dialogue so I hope this video was helpful for you if so please comment below and leave a like also if there's anything I can improve on then please let me know that would really help me have a good day see you in the next video bye

Channel: Philipp Lackner

Views: 8,679

Keywords: kotlin, newbie, beginner, 2020, tutorial, android, android studio, coding, programming, development, developer, ui, ux, xml, alert, dialog

Id: PqRp3-t9GPM

Length: 18min 47sec (1127 seconds)

Published: Sun Mar 01 2020