Android custom dialog - Create Android Alertdialog with a custom layout

hey welcome to coding demos in this tutorial we're going to learn how to create a custom alert dialog in the previous tutorial we will learn we learn actually how to use how to create a basic or standard alert dialog but in this video we're going to go to a next level where we create a custom alert dialog so let let me open up the emulator and show you the app that we will build in this video so here let me lay till we have a simple button says show dialog you click on that then we have the alert dialog here it's that has a login login laid out based basically the login doesn't do the actual logging operation here so here we have the to edit text we have the email password and we have the login button so when you fill for example your let's say email right so let's say I put the email here and then you put the password alright and they click on login then you get a successful toast message saying that login is successful now if you left any of these fields empty then you get another toast saying please fill in any empty fields all right cool let's go to Android studio and build the project so we'll create a new project here and then we'll call this custom alert dialog tutorial all right now click Next and we'll leave everything as it is just click on next click on next and click on finish ok build is complete and now we'll do two activity on the screen and then we'll delete this that feel and we're going to add a button that says show dialog so to the button drag it to the center all right then go to text and then just close this all right and then he will call it show that log and let me extract this strike show that log wait okay and then not to change the ID for this notes but ensure dialogue and we're going to okay so it looks good next is we need to go to make the main activity and when you define the button here so we call it a pattern and then am show dialog equals to catch the button and find view by ID r dot ID dot button show their log and then we need to set an onclicklistener for the the show dialogue so IM show dialog dot set on click listener ok so inside the onclick method here is where we're going to show the alert dialog so before we create the alert dialog we need to actually create a layout since this is a custom day lab so we need to create a separate layout that will act as the layout for the dialog let me show you so we'll open up the project side here go to resource go to layout and then right click and here we need to create a new layout resource file click on that and then we'll call this dialog login right and the euro element will be linear layout that's good now click on OK alright next thing is we need to add a title so we'll drag a text field ok and then we'll change that to across this we'll change this to login okay and then we'll change this to login I think is we need to make it center right so it's Android layout gravity and then we'll do Center and then let's make sure that centered it's not centered I will need to change this to instead of the width match parent will make it web content go back to design all right so we have a center that's fine another thing is we need to increase the text size for this so it's Android to exercise and we need to do it let's say 20 SP and we crease it a bit let's save 30 St ok that looks quite all right it's a bit smaller to reduce the size to 25 2015 all right and then we'll need to extract this so click on that starts to my sauce ok all right and then now we have the login button let's I change the text style so we'll make it bold Android text style and then we'll choose bold ok and let's give a space between the two between the text field and the top here so I'll just give a margin top Android then unmarshal top of 5 DP ok next thing is we need to add to Technic edit text one is for the email and one is for the password so scroll down a bit and look for the email so this is the amount just drag it here this is for the email and this is for the password this is password ok now we'll go back to text again and the way to quit give a hint for this in the text so the first thing is email so we'll do Android and and then we call it email then I mix track this phone as well stress string resource click OK then change the ID so instead of edit X we'll call it et email and then go to password let me just copy this and then change this to password they extract this drill assault so extract click ok and then choose the ID for the password edit tax or Duty password password let's go back ok let's give a space between the email edit text and the title which shows the log in word so an email give Android motion top I will say 5 DB I will make it 10 then 10 DP ok so that's good for the email now we'll do the password passed between the password and the email edit X will give a bit space it's no space so we'll use Android motion and then we'll just put it in the password edit text but we'll reduce it to 5 DP ok another thing is ready to now we have an email address word we need to add the button the login button so this is the button then put in me right here and then we need to change the color so well so the first is the text so you may call it like in extract the string resource as usual okay your source for general exists so we'll just call it a login and the score label all right and then for the button change the ID so it's it button login and then we need to give a color background color so we do android background and we'll use the color accent let's go to design I wanted to change the text color for the login pattern so it is Android text color text color and we'll use the built in and red colors or just we're looking actually for the white cover that's what that's the one so Android current Android color / white okay let's leave a space between the buttons when the button and the password let's copy this and we margin and then we'll give 10 DP okay another thing is we need to give some padding for the lay out so that the the edit text and the buttons will not stick to the edge of the screen so we'll give a padi for occurring in the route light out so that will apply to every view inside that inside that lay of five so do Android padding and then we'll do a simple 5dp okay so now it's not sticking that much to the edge of the screen which is which is really good alright now we have the layer already and now we'll go to the main activity here inside the onclick method is where we're going to create the other dialogue the customer love dialogue so we'll do alert dialog dot builder I'll call it m builder two new and our dialogue but builder they will give with the context which is main activity main activity in doctors okay next we need to create a view a call em view so this view is we need to inflate the be layout don't just created so it is a get layout inflator dot inflate so in the fight here with the text tool values why it takes the resource file you just created and then a view goo so the resource file would be the dialog and the school gate so it is r dot lay out dot dialogue and the scroll again and for the second value the new group the which is the the view group but for now we don't have the bugler because it's eating the other dialogue so we'll just pass in now okay now in fact we have inflated the layout next we need to define the views inside that layout inside the dialogue login dot xml file so we have to edit text so we define them right here inside the LI dialogue so get attached and then we call it an email equals two we need to cast it because it's edit text and then but please pay attention here that we're not going to do the usual defined method which is find view by ID they add or ID dot and then we look for the email and that's good this tell this will not work because why because what we're doing here is like this way actually referencing and email edit text and the activity underscore main here but in reality it doesn't have any edit text inside this layout so you basically get an exception because you try to refers a value in trying to good friends a UI view you should which doesn't exist inside that layout so what you're going to do here is that we're going to add be M view and you don't find view by ID so we do this means that you are actually going through the n view and then you try to bring reference of that but a specific UI view under the B layer deflated that will just inflated and the delay I'll go with just inflated so you need to add this M view or whatever letter that you use to define the view here because without it then you will get an exception so please don't forget that and we'll do the same thing for the other views which is the password and the button so for this one I'll repeat it so it's any text and then we'll change it to M and password and then we'll change the ideal order ID dot et password and then we'll do the same thing for button so let's change this to button and then we call it M login change the cast to button and then change the ID to button login ok so now we have defined D views next is we need to set an onclicklistener for the login button because right here when we go to the dialog lets collodion when they click on the login button here that's where we're going to show a toast message so if we if used to have successfully filled this both edit text then we'll show a success toast message otherwise will shall be the failed text a toast message so here we're going to set it on click missile on site and login dot opps M log n dot set on click listener you know on click listener so inside this on click listener method this will go to check for the we're going to check if the email and password fields are not empty so do that right here so if if would you need to use the explanation mark let me we start with an explanation mark and then we'll do a check and so f email dot get text dot to strain dot is empty so you see why we're using this explanation mark we say that if the email dot get texted the two string dot is empty when we use this which means it is not empty the opposite all right so I'm saying if the email dot get X to do strength is not empty and we do the same checking for the password and M don't forget the explanation mark so M password dot get text dot two string dot is empty okay here is where we're going to do the table one image of the container class edit text' okay so just put a final okay so inside here inside this F condition we're checking if the email is not empty and the password is not empty then sure toast message toast dot to make text and then give the context main activity dot this and then we'll give the message log any successful and we'll set the length which we choose short then we'll call this show method so it's the same to asteroid v like on print password login successful okay successful did I miss something let me check sperm I change it to I'll keep it sorry about that so we have the Toastmasters now login successful otherwise would you let me just copy this toast and then we'll change this to please fill any empty fields all right let me extract some resource let's try this and then we call it a success login message and then this one is Error login message okay so if it's if everything is good email password on an entry then you get this message otherwise you show this error message okay and then now outside the unclick let's know the login button is we're going to create the we need to set the you for the layout well track says need to reflect the end builder that set view so inside the set view method is where we're going to pass in the Ambu so let's say for example if you forget this line then you won't you won't see the dialog being popped up in your screen because of this line so you need to set this life okay now after that we need to show the other dialog so just create on the dialog call it dialog equals to M builder dot create now we're creating the other dialog and then we'll need to show the damage so it's dialog that show okay so we have the button here show their log and inside the button white waiting week waiting the other day log and then we are referencing the custom layout of just created where the fire would define the email password and the buttons we set the onclick listener for the button and then we're checking whether the email password are are filled correct are filled if it's true then show a toast my fish FBL if they are left empty then show a different toast message and then we're setting the view for the end builder which you need really really really need to you really need to remember this line and then we are showing the download okay so let's run the app okay so we have the app here so click on the button show their log all right so we have the box here we have the title we have the email so I will say your email at yahoo.com my password is one two three or four or five six and click on login login is successful let's leave the password empty please fill in the empty fields let's put the password but we leave the email empty and we get the same message please fill in empty please fill in empty fields if you want to dismiss the dialog you can either click on the outside space here or you can click on the back button okay that's it for this tutorial if you guys really like this tutorial please give a thumbs up if you want to see more of these awesome tutorials please hit the subscribe button thanks again for watching and happy coding

Channel: Coding Demos

Views: 212,518

Keywords: android custom dialog, android custom alertdialog, android dialog, android alertdialog, dialog android, alertdialog android, android popup, custom dialog android, alertdialog builder, android dialog tutorial, android dialog example, android alertdialog example, android popup dialog, dialog example, dialog box in android, android popup window example, android dialog box, android custom dialog example, android alertdialog builder, android show dialog

Id: plnLs6aST1M

Length: 21min 29sec (1289 seconds)

Published: Sun Oct 16 2016