Hello and welcome back. Previously, we saw how to add some basic interactivity in our app by getting the user to press a button and then displaying a message in our logs. So, over the next couple of videos, we'll build on that and add another layer of interactivity by getting input from the user using a text field and then doing something with that enterText once they press this button.  All right, let's get started. In the layout over here, we're going to look at text and then plain text. 

I'll drag this over and place it somewhere in the middle, above the button. Let's place it in the middle. Let's make it full width and set the margins.  I'll create a left constraint and right constraint and then I will decrease it to let's say eight. And then eight on the right as well. And then layout width, I'll extend it to the full width so match constraint. There we go. And I'll also add a third constraint at the bottom linking it to the button. So, I'll do this. That looks good. Now, we have this UI element, this text field, we will need to be able to refer to this from our code. So, for the first time, we're going to be looking at the ID attribute of an element of this particular text field and you can see it on top here, you see Id. So, this one is called editTextTextPersonName. 

That's what it was entered by default and we can change that and we will, but I'm not sure if you've noticed, but each element, each UI element that we've worked with so far has an Id. If I select the button, for example, you see on top here this button has an Id of button. So, I'll go back to our text field. I'm going to be updating the ID over here and since we'll be dealing with a name of the person, I'll call this editNameField.

And if I hit 'Enter', now it's asking me if I should change it anywhere it's referenced. So, I'm going to say yes over here. Scope. Let's say all places. Refactor.  Okay. So, then this change should be reflected everywhere. I reference this view and this hasn't updated yet. Maybe let me go to the button and come back. Hopefully, it's updated then.  Yes, there you go. It's updated now. Now, the format that I used for the name over here, I don't know if you've noticed, but this is called camel case. And there are two types of camel case. One where each word within the name is capitalized. The other one which is more common and is used in languages like JavaScript as well where the first letter is lower case, the first word, but each following word, the first letter is capitalized. So, we have editNameField with N and F as capital letters. And why is it called camel case? Well, you can see that it resembles the shape of a camel. 

Now, for this view that we've added, we can add a hint associated with it, which can be useful. So, I'm going to scroll down to find the hint attribute, right here, under common attributes I have hint. And here I'm going to say your name. And currently this field has the text of name that's there. So, if I get rid of that text then you'll see a lighter display of the hint text showing up over here. Great. Now let's quickly run the app and see how it behaves. I'm going to apply all changes and restart activity.  [no audio] I

have this message showing up, session 'app', changes were not applied, whatever I'm going to reinstall and restart app.  [no audio] Process 'app' is running. Do you want to terminate the process 'app'?  Okay. This just means stop the process that was running the previous app and run the new process to restart the app.  [no audio] Success, operation succeeded. Let's take a look at the emulator. There we go. So, the text field shows up and as soon as we start typing, the hint should disappear. So, I'm going to say Mashrur and the hint is gone. Great. So, we've created a text field which we can edit and we've named it and the next step then is to capture the text or the value of the text that I'm entering over here and display it in the logs.

So, we're going to do this within our click function method right now, if we click the button, nothing really happens, whatever was happening before is what happens, which is we have the button clicked message showing up. So, let's pull up our code in main activity and there are a couple of ways to do this. I'll show you the older and easier way first, then in a later video, we'll cover the newer and Android preferred way. So, within our click function method, which handles what happens when we press the button, we're going to use a variable to refer to the new view that we've just added. The new view right here, which is named editNameField. 

There we go, back here. So, we're going to use a variable to refer to this view and the way you set a variable whose value you don't want to reassign is val. Now, if we were going to reassign this value, then we could use var instead. But since we're going to refer to that one and only view, I'm going to use val and I'll name it, editText following the same naming convention of camel case. And I'm not going to specify the type, I'll let Kotlin figure out the type based on what I assign it to. So after this, I'm going to say equals and I'm going to assign it to the view of editNameField.

The view that we just added, this view. And this is where I'll show you the older, more commonly used method. In the future, I'll show you how to use what's known as bindings. But the method I'm going to use is called findViewById. You see it shows up right there, findViewById. If I hit 'Enter' and within this left and right angle bracket, you have to write the type that the view is. And this view that we added is of type editText. If you look at it on top right here, you can see it says EditText, capital E, capital T. 

So, that's the type of this field. So, I'm going to go back here and type in EditText and you see it shows up. And if I hit 'Enter' over here, you also see that EditText, the widget has been imported, so we can use this type in our code. And you see here, we have some more information on EditText if you want to read it. Next, within the parentheses, we have to specify the Id of our field, and the Id is editNameField. So, I'm going to simply copy this with the intent of pasting it over here. But you don't just directly paste it. First, you have to type in capital R for resources. So, from our resources, we are selecting Id, which is one of the choices. So, R.id. and then the name of the field. You see it shows up over here, editNameField. Great.

So, that's for the first line and this line right here, this will give us a way of referencing this particular view that we added to our layout in our code using this editText variable name, but remember this is a view that we added. Right.

What we want is not just the view or the UI object, we want the text value from the UI object, so whatever the user is entering. So, we'll use another variable for this. I'm going to say val nameText, you can name this whatever you want, and we want to get the text part of this view or our edit text variable. So, I'll say editText. All we have to do is say .text and this will give us the text from that view. And then the next part is simply to log this. So, I'll go to the next line and say log.I and for the tag I'll say, Entered Name comma space and here I'll say nameText for the message, but this variable nameText is of type text, but our log method is expecting type string. So, we have to convert this text to string, so it can display it. To do that, all we have to do is say .toString, right there. All right.  So, this will convert the text toString, so it'll display in our logs. And that's it.

So, take a moment to look at that code again and the steps that we followed and don't worry if it doesn't make sense right away, it's going to make more and more sense the more code we write, but feel free to review the last few minutes of video if necessary, to see how we got here.  All right. Now, let's run it. When I go over here and then click 'Run App'  [no audio] I'll pull up the emulator as well. Process 'app' is running. Do you want to terminate process 'app'? Terminate. Launching activity. Success, it work. 

I pull up the emulator. There we go. I'll also pull up the log, so we can see this. Now, first let's press the 'Button.' There you go. Button clicked is showing up. Now, let's enter in a name. I'll enter my name, click the 'Button'. There you go. Entered Name, Mashrur, button clicked. Great. So, we've added a bit more interactivity to our app by adding a text field, so users can now enter information and we are able to process this information as well which means we're able to do something with it and we're going to leave it at that in this video. In the video coming up, we'll be building a mini project to practice what we've learned here so far. See you there.