All right, so I hope you managed that. Let's do a quick walkthrough of how I would go about doing it. So, let's fire up a new app and call it Login Demo App. So, I'm going to go here File New New project and I'm going to start with the empty activity template. So, I'll select that. Next, I'll call it Login Demo App, leave all as it is Finish. This is going to load it up. There you go, as you can see, as we do more and more of these, the process of creating apps and running the emulator, all of that gets faster. So, I'm going to pull up my layout right here, make some room. 

All right, I'll get rid of the text view. So, let's start up with the text for email. So, I'm going to go to Text and there is an E-mail element. So, I'm going to drag this over and you can see it has shown up here under Attributes, it's of type EditText, which is what we want. Let's add some constraints. So, right here I'll do this, this, and this and then adjust them. So, let's try 32 on the left, 32 on the right, and 100 on top. Now I want full width, so layout width, match constraint. And for the hint I wanted to say email so I'm going to scroll down there is my hint, I'm going to say Email. There we go, all right, that's the first part, let's make sure we're reasonably close to what we are aiming for. 

All right, so again, reasonably close is good enough, now let's work on password. Back to our demo app. So, right here among my widgets, you see there is password right there there's Password for numeric, but I'm going to grab the regular password one. And the difference between an email or a Plain Text and a Password would be when you're typing this in in the app, it's going to hide what you're typing in. All right, so I'm going to drag this over here, same thing, I'll go and add some constraints. There we go, this one we know we did 32, let's keep it uniform 32 and on top we'll link it to email. So, I'll make this let's say 8. And then layout width, match constraint, perfect. Scroll down to hint. I'm going to say Password. 

These two are now done, let's work on the Button. So, I'm going to go to either Common or Buttons and there's the Button. I'll drag it down here and then the text currently says Button, I'm going to change this to sign in or register, SIGN IN OR REGISTER, bring it more towards the middle, then add some constraints to this, I'm going to scroll up, make this 55 and on the right 55 and on top let's make it 50. All right, so that's looking good. Now, I'm going to scroll down and change the color to match the gray. So, if I scroll down we have textAppearance fontFamily. There's a textColor. The textColor is dark gray I believe, yep, dark gray and light gray background, so let's do that. Right here, textColor, cardview_dark, also like this one there is dark gray. Now, the background, I'll make it gray. So, scroll down. Now, this background is, actually, not this one but backgroundTint. So, I'm going to have to find that. So, I'll scroll down and try to find background tint.

Now, this background color, this is, actually, something called backgroundTint and it wasn't showing up and then I clicked around with it, I don't know what happened. Maybe something got updated or whatever but after playing around with it, under All Attributes or if you look on top under Common Attributes, you'll see this background tint show up, right? So, this is the color of the button. So I'm going to select it and make this light gray. Scroll down until I find it. There's a darker gray, maybe there's a lighter gray or we can use the darker one. There we go color button normal, let's select this. So, the layout portion is pretty complete. I'm going to go to onClick right here and we'll use the same function name, clickFunction and we don't have it defined, so it's going to be red. 

So, let's pull up our main activity or our Content file and we'll define our functions. So, fund and then clickFunction(view:) is going to be type view. You see it's red because it's not imported, so right here unresolved and it's saying option Shift+Enter to get it. That's the shortcut, you might get a different one. So, I'm going to do option Shift+Enter and this should import view the view class right here. There you go, android.view now available to us and then open and close curly brace. So, now that we have this defined and the layout ready to go, we haven't written anything there but let's just make sure our app works and looks the way that we want. So, I'm going to run this. 

All right, looks like it's a success. So, grab the emulator and here we go. Login Demo App, we have the Email and Password fields showing up. Obviously, nothing happens when we click the button because we haven't implemented that functionality but this is what I was talking about with password. Let's say I enter in a password, you see how it's hidden, right? So, that's the functionality you get by choosing the password Widget instead of a regular one. All right, looking good so far, back to our main activity, but before we do that I want to show you what these IDs are for email and password. If I select Email, you see over here, if I scroll up right here, editTextTextEmailAddress if you want to update it and then password is editTextText password. 

Now, I don't have to copy any of this because since it's already here it's going to be available when I start typing in here. So, now I'm going to show you how to do this using findViewById, but I would encourage you to do this using viewBindings which is what we covered as the preferred way a couple of videos ago. But if you run into issues with that, no worries, you can use this method as well. But again I would encourage you to solve this using viewBindings all right? Let's use a variable like we did before for the view. So, var emailView and I'll set it to, I'm going to go a little faster here since we've done this before, findViewById. This is of type EditText ,which we know which we saw here in our activity right there, that's of type EditText. And then resources so R.id. and when I do this you see the two show up over here editTextTextEmailAddress and then TextPassword. 

So, I'm simply going to choose this one. EmailAddress, so that's the view and when we want to get the text and convert it to string we have to do some additional work which we'll do later. Let's get the password view as well. So, val passwordview = findViewById, this is of type EditText as well and R, capital R.id. and this one is password editTextTextPassword. All right, now we want to log these two. So, I'm going to say Log and I have to make sure that it's imported, so if I do that this line shows up so Log is now available to us. So, Log.i and the tag I will say "Email", so, let's handle email first. And then, remember this is the view, so I need to first get the text and then convert it to string. 

So, emailView.text, and we're doing it slightly different from how we did it before. In our practice, we had done this in a separate variable and then used that over here but we can just do this here directly text.to to string and then Log.i, we'll say password and then passwordView.text.toString. So, that completes our code. Let's see if we got everything right. I'm going to run this, here we go, run app and it looks like we have a couple of errors. It says unresolved reference, editText. And can you see why we're getting this issue? It's because we have an imported editText over here, Android doesn't know what to make of this. We need this imported and you see when I click on it, it shows up android.widget.EditText. So, to get that shortcut option Shift+Enter and there we go. 

Now, we're importing android.widget.EditText, so this should be available to us. So, let's try again, make sure it works. We're going to run it. Now, this is the build output screen showing up. If you don't want to see this, you can minimize it. It's saying process 'app' is running, do you want to terminate process 'app'? So, there's an existing process that was already running, we made changes, let's terminate it. Operation succeeded, let's take a look. Let's pull up the emulator. Here we go so we can use this. I'm going to pull up my log screen, I'll minimize this and we'll go to our log right here, scroll all the way to the bottom. So here's my emulator, there's the log, let's type in mashrur.hossain@example.com and password, I'll say password, SIGN IN OR REGISTER, there we go. 

We have email mashrur.hossain@example.com, we have password as password. Let's try something else. Let's get rid of this @ over here, SIGN OR REGISTER and I'm going to scroll up a little bit. I think there's a lot going on in the logs mashrur.hossain@example.com. There's password, all right, brilliant. So, we're now able to make a more interactive app but you're probably thinking, the user can't really see this info, so is it really that interactive, right? And we are logging these entries in our log, which is kind of the back end, the user is not getting any feedback or any messages. They're not getting any info whether they're logged in or if the button was pressed or some other message, any of that, so that, notifying the user that something has happened, is exactly what we're going to do in the next video, see you there.