All right. Hello everyone. So, we're going to talk about TextViews in this video. We've done components on Android Studio. In the last video, we mentioned layouts. We will now talk about Android components to place on these layouts. All right. And one of them happens to be TextView. So, what is TextView?

You might guess, but it's basically a component to show text to the users. Now, you can use TextViews as a label, or to print some results on the screen, or print some notifications on the screen. All kinds of different things. TextViews can be used in a lot of different areas. It's probably the most commonly used component. So, let's get used to it. All right, go to Android Studio and we will explore TextViews while we practice. So, let's just create a new project and I'll explain TextView components in this new project. To do that, I'll choose 'File', 'New', 'New Project' options to create a new project. Choose the 'Empty Activity' from this window, click 'Next'. And from this window, we can configure the project. So, first off, I want to name this project TextViews. I'm not changing the project package name  and the file path. It is where the project will be saved just like we had it before. Programming language will be Kotlin. Minimum SDK can be 23. All right.

So, we created the project just by clicking the 'Finish' button. Of course, you could continue with your previous project, but since I'm going to be sharing with you all the different processes that we've done, I just want to explain them through as many different projects as possible. In any event, project is now created. So, go ahead and close the previous project, unless that's the one that you're using. And I will just choose 'File', 'Close Project' as my option. All right. So, let's have a look at this TextView component through our new project. Open up the design area, activity_main.xml file. So, first, let's turn the design area into a real phone screen. So, for this, I just click on this eye icon up here and select the 'Show System UI' option. Now I'm going to delete the TextView component from the design area because we're going to do everything together. All right? Okay. So, we can add TextViews in two different ways for an Android application. First one is the drag and drop method from the Palette, just like this. Just drag the TextView and drop it under the ConstraintLayout.

Now, by using the drag and drop method, you can drop components directly into the design area or into the Component Tree, as you've seen me do before. All right. So, now we have a TextView and its text is also TextView. So, we can change this text whenever we want to. So, this was the first way. Also, there's another way, always. So, I'm just going to delete this TextView and create a new one using XML code. So, that means I'm just going to go over here to the XML site by clicking the 'Split' or 'Code' option  at the top right of the page. Now, if you do select the 'Split' option, you can view the XML and design area together. All right, cool. So, now I'm going to add a TextView inside the ConstraintLayout. So, ConstraintLayout must have a body. And for this, we must close the ConstraintLayout's tags. That way, we can write code in it. So, I'm deleting / and > from here. And I press the 'Shift' and '<' keys on the keyboard together. And as you can see, we have closed the tags of the ConstraintLayout. But this time, we can write different XML codes in it. So, we can actually add different components. Now, let's add the TextView component. To add a component using XML code, you got to first create a new tag for the component that you're going to add.

So, to do that, I'll press the '<' key on the keyboard. Now we've got to write the name of the component that we're going to add. So, when I start typing TextView here, the code editor offers me the TextView component, just like that. So, I'll select it. Press 'Enter' on the keyboard. When we add a component, we need to specify its exact width and height. So, for now, we'll make the width and height wrap_content for now. And let's close the tag of the TextView component. And since the TextView component will not have a body, I close the tag by pressing the '/' key on the keyboard. All right. Now we have a TextView here, but we don't see it. Why is that? Well, just because we didn't write any text. So, I'm going to add a new line inside the TextView using XML code. Now to add a feature to the components using XML code, you just type the name of the feature you want to add. And then, choose the most suitable feature from the features suggested to you by the code editor. So, in this example, I'm just going to add text to the TextView component.

And that's why I'll just write text here. And just like that, as you can see, the code editor offers many features related to text. That's cool. So, from here, I'll just select 'android:text' as my feature, press 'Enter'. So, now we need to define the text that we're going to add. And as tradition dictates, I just write "Hello World" as the text of the TextView component. Now, whatever I write inside a quotation marks, the text of the TextView will be what I write. You follow? So, now we have a TextView on the design area, and the text of the TextView is Hello World. I want you to notice something else. We've set the width and the height of the TextView component wrap_content. So, setting a TextView's size to wrap_content is going to force it to expand only far enough to contain the values that it has. You follow?

Just like anywhere else. So, if I add new words to the text, such as to the human, the size of the TextView will be bigger. If I change to a bigger number size of the text inside the TextView, well, the height of the text view will also be bigger. And if I were to change the text size to 40, the TextView size gets bigger. I change text to 20, the TextView size gets smaller. Now, on the other hand, I can choose the width of the text view as a match_parent. So, if I write match_parent here, the TextView component will cover all of the device screen from left to right. Now also, when I write match_parent for the layout_height, TextView component will cover all of the device screen from top to bottom. So, now I'll choose wrap_content for layout_height. And also, we could give numerical values for height and width. So, I'm going to give 150 for width, 75 for height. Also, I'm going to drag the TextView to the center of the screen. Now of course, since our main layout is the ConstraintLayout, we do need to determine the constraint values of the components we add to the design area.

Otherwise when we run the application, components are going to move right back to the (0,0) point on the screen. And that is by the way up here, the upper left corner. So, when I click TextView, I can see the Attributes section on the right side of Android Studio. I can also see the operations I can do on the TextView here. So, for example, I can change the layout_margin here. I change the layout_margin, the TextView position will change on the screen. I write 250 up in here, well, the TextView's position is going to go down. I write 150, it'll go up. I can give numbers from here for left, right, top and bottom. The layout_margin property defines the position of the TextView on the design area. But also, there's another attribute I want to show you. It's called padding. And padding basically defines text position inside of the TextView. So, let's say I write 25dp for the paddingStart attribute. Well, the text is going to go 25dp from left to right. If I were to write 10 for the paddingTop attribute, of course, the text is going to go 10dp from top to bottom. Also, we can change the text size using the Attributes section.

So, if I choose 24, the text is going to get bigger. When I choose 14, the text is going to be smaller. Now, by the way, all the changes that we've made in the Attributes section will be added in the background as XML code. Of course if you want, you can write XML code to do some operations, or you can use the Attributes section. Let's see what we can do in the Attributes section. We can change the background color from here. So, why don't we choose purple_700 as a background color? Now, see how the background of the TextView has changed. Using this property, you can change the background color of the components. Here's something. It's called gravity here, you can define text position automatically inside the TextView from here. So, I'll choose this center and text will take the center position vertically and horizontally. But if I choose this, I need to change the padding property to zero. So, we can change the text color from here. For example, I'll choose white, and text color will be white. We can do a lot of operations from here. But also, we can do these operations on the MainActivity.kt file. But before we start working with Kotlin code, we do need to give an id to this TextView.

In order for the TextView component to be recognized in Kotlin, we got to define its id here. So, I will give textExample as its id. So, now our id of TextView is textExample. And the text of the TextView is Hello World to the human. Now, let's go over to the Kotlin side. Don't be shy. We're going to start to write code now. That's why I want you to follow the lesson pretty carefully from now on. So, if you notice, there is a class called MainActivity. And inside this class, there is a function called onCreate. Now, this onCreate function is also created automatically when we create an activity. So, what do you do with the onCreate function? We're going to talk about this function in the lifecycle lesson. But for now, I just want to explain it briefly. So, basically in Kotlin, every activity has a lifecycle. That is, until you open and close an application, some threads, in other words functions, are going to be called. The first three of these functions is the onCreate function. In the onCreate function, our activity is still under creation, and the user wouldn't be able to see at this stage. But we also want the codes that we write to be ready until the activity is shown to the user.

Therefore, we generally write our codes inside the onCreate function. Now naturally, there are many more functions in the lifecycle. We're going to learn about all of that in detail in the lifecycle lesson. But, for now, it's enough to just know that the onCreate function is the very first function in the activity lifecycle. And we usually write our code inside of this function. So, that's a short explanation. Let's just figure out how we can access the TextView component in the design area. So, above the onCreate function, inside the MainActivity class, we're going to create a variable from the TextView class. That's why I'm typing var here. The keyword var represents variable. So, now we need to just give it a name, to this object that we're going to create. Well, you use this name on the Kotlin side, so you can give it a name, whatever you want. I'm going to call it myText. And now I'll just put colon and write TextView here. So, why don't we type TextView? See how the code editor offers us TextView, one of the android widgets. So, from here, you can just select TextView and press 'Enter'. But now, at this point in time, I do want to tell you one more thing. Just to squeeze it in. In order to use different packages in your project, that is to use this TextView component here, well this package must be imported into your project. Now, an import, I think you might have heard this for the first time. Did I just say import?

Import it into the project? Well, because you have to indicate to the code editor that you're going to be using this package, because there are just well thousands of packages that can be used in android, and we really only should be using the packages that we need. So, if there were no imports, then we would just have to define thousands of packages here, which as you might imagine that could get rather complicated quickly. So, I just want to show you the import process. Not going to choose the TextView component that the code editor recommends. As you can see Android Studio is going to say, "Hey, wait a minute." So, we have to import the TextView class. Of course, there are different ways of importing, but the first one is to select the TextView suggested by the code editor and press 'Enter'. Second one is to move your mouse over the TextView and select the 'Import' option from there. Third, select the 'More actions' option here and select the 'Import' option from the pop up.

Fourth, if there is a red light bulb that appears on the left, well just go ahead and click on that light bulb and select the 'Import' option. So finally, you need to click on the TextView expression here and then press the 'Alt' and the 'Enter' keys on the keyboard. Cool. So, when you do any of these operations, you can see the imported packages in the import section right here. So, that's pretty much the import process. You do it as you go. That's cool. But look at this. We're still getting a warning. Well, why is that? I did everything like you said. Well, because in Kotlin programming, if we're going to create a variable within the class, we must initialize this variable. But we sometimes want to initiate variables later. So, we'll just initialize variables later. So, in this particular case, we've got two different options in this example. The first is to use the lateinit keyword. When you use lateinit as your keyword, the code editor understands that you're going to define the variable later. So, it no longer throws an error. The second is a method that we use very frequently. That is, to assign a null value to the variable initially. So, for this, all you have to do is write equals null, after placing a question mark just to the right of the TextView class. Now, we will usually use the lateinit when describing components.

So, we created a variable from the TextView class. So now, let's match this variable to the TextView component in the design area. And as always, there are two different ways to do this. First one is to use the findViewById() function. The second one is to use viewBinding. Now, I would like to mention here viewBinding. That's going to be a whole separate lesson in the future. So, don't get too hung up on that. I'm not going to use that for now. It's enough to match the variable we defined here with a component in the design area, just to first write the variable name. After the = sign, we use the findViewById() function. So, this function uses the id of the component in the design area to match the variable that we defined here. So, we've got to write the id of the component in the design area in (). So, for this, I'm writing (R.id.textExample). Here, the R will represent the resources folder in the project directory. The id represents the ids that we defined for each component. And finally, we select the component's id, whichever component that we're going to match a variable with. Very cool. So now, we assigned the TextView component to the myText variable we created on the Kotlin side. Now, I can do all the operations I have done on the XML side here. But how am I going to do that? Well, let's see what happens if I write myText here. I will add a dot here. After the dot, I can see all the operations automatically. That's pretty cool. Look at that. There are plenty of operations here I can choose from. For example, let's say I choose setTextColor. So, I can choose the color writing, (Color.BLACK). Boom. When I write this code, nothing has changed on the XML side. Changes will be applied when I run this application on the device. So, let's have a look at that. Let's run the app. And I'll click 'run' after the device opens, and I can see changes on the application. Of course, it might take a little time to come online. And there you go. Now, you can see the text color is black. Now also, I can change the text of this TextView. So, for this, just use the setText function or just the text option. If we use the setText() function, we've got to write the new text that I want to change inside the (). So, I'm going to write ("This is an example"). But you got to be careful, you need to write the text inside the quotation mark. You see that. Because this is a string expression after all. Now, if we use the .text option, we write the new text after the = sign. Also, you must write the new text between the double quotes. Okay. So, I'm going to run it again. And there you go. You see the text change. Now, in addition, we can add a feature to the TextView. If we click on TextView, we can start an operation. For example, when I click on TextView, we can open a new activity or we can change text size or text color. Why don't we give it a shot? Are we going to do this?

So, just add a click listener to this TextView. I'm going to write myText.setOnClickListener. So, notice there are two setOnClickListener properties here. You can choose both. But I usually choose the option with {} next to it. And if you select this, press 'Enter', you will add the click feature to the TextView component. So, now I'm going to write new code inside the {}. So, these codes will work only when I click on the TextView. Follow. So, I will write inside the {}, myText.setTextColor. Inside the (), I write Color.WHITE. So, I'm going to click 'run' again. And after a little while, the device is up and running. And you can see here, there are no changes to the TextView. After I click on the TextView, the code will work and the text color will be white. So, let's change the background color of the TextView. So, I'm going to write myText.setBackgroundColor. Inside the (), I write Color.BLACK. I'm going to click 'run' again. Now, you can see, after I click TextView, the text color will be white and the background of the TextView is going to be black. Now, we can do more and more and more operations here. But I think that's enough for now. There are many more other components that we need to learn before we get too involved with all the detailed options. So, I want to see in the next video.