Hello everyone. All right, welcome to the next video. So, we're going to talk about EditText in this video. So, EditText are Android components and these are basically used to get data from the users. You can see EditText in many Android applications to get data from the users such as the name, the last name, the password, address, whatever that might be. Now, there are different types of EditTexts and we're going to see these different types in this video and practice with them. So, let's go to Android Studio. All right, so naturally, I created a new project for this lesson. The name of this project is EditText. All right, so, you can also create a new project. You could also continue from the previous project, whatever you want. You would probably be teaching this course already. All right, slow down, not so fast, that's okay. So, let's have a look. You can see EditText here on the left side of android studio in the Palette window under the text section, the name is Plain Text. So, under this Plain Text there are other types of EditText such as Password input, Email input, Phone Number input, Multiline input, Time, Date, all these.

So, before we start EditText, we got to change the ConstraintLayout to LinearLayout. so, this way we can learn to work with LinearLayouts at the same time. So, I'm just going to delete ConstraintLayout from the XML side and write LinearLayout here. Also, the orientation of this linear layout will be vertical. Now the layout is ready. I'm just going to drag and drop a Plain Text under the LinearLayout. So, now we've got an EditText. Idea of this EditText is EditTextPersonName and the text of this EditText is Name. So, when we run this application, users will enter data from here such as name. So, let's run it and see what happens. There is the application running and you can see here, users will enter data from here. Now, I will delete the word, name, that we wrote before. I could actually write anything here. Also, I could enter numbers from here too. All right. So, let's add another EditText. This time we're going to add Password EditText. Also, I will add Numerical Password EditText. So, Numerical EditText, that you can just enter the numerical number from here and also Multiline EditText. Also, let's increase the height of the Multiline EditText a bit because we're going to write multiple lines in this EditText. All right, so, let's run the application with these EditTexts and see what happens. So, the first one is a standard EditText. You can enter numbers and characters. The second one is Password EditText. So, when you enter the password in this EditText, numbers and characters, not going to be seen. You can enter numbers and characters, of course, into the Password EditText. You're just not going to same. That's the nature. So, the third one is also Password EditText but users can only enter numbers not characters. Also, these numbers will not be seen in this type of EditText.

Now the last one is Multiline EditText. Users, of course, can enter more than one line of information in this type of EditText. So, I'm going to write in here some text lines just to show you how it works. And you can see here after the first line, the second line continues under the first line. For example, let's say you could use this type of EditText to just bring on some user comments or maybe an address or maybe a complaint if you're so open. Anyway, in the first one, when the user enters more than one line, after that line is finished, well, the head of line is not going to be seen. You see how that works? Now we're not done just yet. We've only placed it EditText in here. We have to take this information and use it somehow. So, how do we use it? We're going to do that on the Kotlin side using Kotlin code. So, we're going to continue with an example. I'll delete EditText except for the first one. So, I will add a button and a TextView. All right, so, we're going to develop an Android application, right. User will enter the Name into the EditText and after they click the 'OK' button, the name is going to be seen on the TextView.

So, I'm going to delete the text of the EditText but it's not going to be empty. I'm going to add a hint property to this EditText. So, the hint is a tip given to the user to understand what the user will write in the EditText. So, I'm going to write in the hint section, "Please write your name. All right, so, I'll change the text of the button to be OK. I've also deleted the text of the TextView. Let's change the design of the application little bit. So, let me do 50dp the layout margin, top property the EditText. Also, I'm going to give some space between the EditText and the button about 30dp. And likewise, I will give some space between the button and the TextView and I'm going to do 50dp height of text view. I'm also going to change the width of the EditText. I'm going to give that 200; it's a little small so, I'm going to give it 300. That's good. So, I'm going to change the height of the EditText to 60 and in the same way I'm going to change the width of the button to 300. Now for the TextView, we're going to do the exact same thing. So, I'm going to place these three components right into the center of the screen horizontally. Now how do I do that? I first select the LinearLayout, then I'll go to the gravity property from the Attribute section and I will choose the center_horizontal option. So, now all the components are placed in the center. And I will add a text on the TextView and let's just call it Result. And we might as well also center the text of the TextView component. For that, I can just change gravity property on the TextView component to center. Now also I'm going to change the background of the LinearLayout. Now from here, you can choose any color you want. I'm going to just choose a color in shades of blue. I think that color is one that I was looking for so, after choosing color I'm just going to press 'OK'. right, So, let's change the background of the other components too. So, I'm going to choose white for all three components. And first we'll make the background color of the button white. Portion to the text, color of the button is white, the EditText is not going to be visible so, I got to make the text color be black. So now, let's make the background color of the EditText component white. See, so, notice now that we change the background color of the button using the background tint property, Yes, cool. So, for the other components we use the background property. So, finally I'm going to change the background color of the TextView component. The button's a little big, don't you think?

So, I'm going to change the width of the button to 200. So, now I will give an idea to these components. For the EditText component, I'm going to write editTextName, button OK, that's for the button and TextView result is for the TextView. I think that's going to be okay. So, let's run it and have a look on the phone. So, you can see the application is working. You can see the hint here. When I write arnold here and click 'OK', arnold should be seen on the textView instead of result but the application is not doing this now. Why is that? Well, like I told you earlier, we haven't written the Kotlin code yet. All right, so for that, let's go to the MainActivity.pt file and we'll write some code. First, I'll define these three components. I'll define EditText. Now after I write lateinit var, I need to give a name to this EditText. It can be name, simple as that. So, after the colon, when I write EditText and choose from the auto complete,  Android Studio imports the required class android.widget.EditText. We're going to do the same thing for the button and I'll make its name OK. Last component TextView write lateinit var result : TextView. All right, so now, I'm going to assign the XML components that I designed before to these names using the findViewById function and that's inside the onCreate method. Now it's all falling into place so, here I write name = findViewById( R.id.editTextName). All right, second line, ok = findViewById(R.id.buttonOk). And just like I did before result = findViewById(R.id.result). You with me so far. All right, because so far so good. So, I'm just going to add the ClickListener to the OK button. All right, ok.setOnClickListener or choose the ClickListener that's offered to us by the code editor automatically and then auto complete will take care of the rest. And I will write code inside curly braces. So, now we can start coding. So, first I have to get the data that the user enters in the EditText. How do I do that?

Well, I'll just write in here name.text.toString. So, this code will take that text that to the user enters in the EditText and then convert it into the string. So, now I want to write this string on the result TextView. But before I do that I'm going to need to define a string container named userName. So, I will assign the text that I took from the EditText to this Username string and then because of this, I will write here, var userName : String = name.text.toString. So, I can set this username on the TextView. I will write here result.setText and then inside the parenthesis I will write userName. Also, you can write this code instead of the setText function result.text = userName.

Now, I know it's a bit complex. But really hope you understand this part. It is very important. Go back over if you need to. But basically I define a container and it's name is userName. Then after that, I took the text, the user entered and converted it to a string. And then I assigned this text to the userName container, that is, variable and then lastly, I set this userName to the TextView. All right, so, let's run the application and see how it works. So, the application opens. I'm just going to write in here a name and click 'OK'. All right, so as you can see, it works. Takes the name that I wrote in the EditText and writes it to the textView instead of result. So, that's enough for this video. EditText, like I was saying is complex but you got to master it. So, go back over if you need to and I will see you in the next video.