Android Studio, Kotlin, and Basic App Layouts
This course begins by downloading Android studio - make sure you watch the appropriate video depending on whether you're on Mac or Windows. Then, we'll take a tour off the Android Studio interface and see how apps are put together. You'll learn about text views, buttons, and images to build a user interface for our app, and we'll also write some code to make our apps interactive.
Then we'll move onto a practical project in which we make a temperature converter app, which converts temperatures from Fahrenheit to Celsius. You'll be able to follow, building the app, and then running it on your system.
This course is intended for beginners to Android app development or anyone who wants to master coding in Kotlin.
Since this is a beginner level course, there are no requirements, but any previous experience with coding would be beneficial.
Hello, and welcome back in this video. We'll continue where we left off in the last video and look at some more attributes ending in a mini project for you to do. As you can see there are a lot of attributes here on the right. When you expand All Attributes option above it, you have some common attributes and so on. So, basically when you select the TextView right here that we have, you can see the common attributes pop up and then All Attributes below that. And there are a lot of them over here, so I'm going to pick out a few that apply to not just TextViews, but also images and other contents that you may want to display in your app. So, let's find layout_width, okay?
So, we have this width that we set to the whole width of the screen. And in fact, let's start off by making some more room. Over here, I'll click on Project to get rid of that temporarily. And also we didn't really talk much about this here. You see we have two screens right now. The one on the right over here is Blueprint. All right, this is called the Blueprint and we'll be working with this more later. But you would use the Blueprint when you're trying to set up constraints and all that other stuff.
Right now since we're working purely with the layout, this is the design, all right? So, if you wanted to see just one or the other, you can go over here to this tab right here. It says Select Design Surface. If you click on it, you can see you can select Design, Blueprint or Design + Blueprint, which is the one that we have right now. I'm going to click on 'Design' to just display this so we have a better view, all right? Now, just like width for our TextView spanning the entire width of the screen, we can also select height.
So, if you scroll down among the attributes, you can find layout_height, okay? Here we are down in the Ls and there is a layout_height. You see that? We already have layout_width set. So, layout_height, if we choose the match constraint, you see it expands to the entire height of the screen. All right, I'll zoom in a little bit. We can also add constraints so we can link it or link this view to different parts of the screen. If I click on layout_constraints, you'll see a few of them are already set. We have layout_constraintBottom to the bottom of parent, the parent being the ConstraintLayout of the frame. Right here, the ConstraintLayout of the frame, so it's currently constrained to that.
Then if I scroll down, there's more, you see here we have layout_constraintLeft to the left of parent as well, parent being again, the ConstraintLayout then we have layout_constraint_toRight to the right and we have top to the top of the parent as well. Okay, you can also see this on top. Right here we have a summary of the constraints that we have for the left, right, top, and bottom. So, you can set these to customize the layout in many different ways and we're going to look at that in more detail later on in the course. But feel free to play around, and try different constraints out. You can also add margins. I'm going to scroll back down.
Let's put a margin in, so letter L. Right here we have layout_margin. I can click on this and then I will select from here, and check out all the different options we have. So, for Android, I'm going to scroll down. I'll select one of these. I'll put notification_large_icon_width, okay? And you can see that it has added some margins to my layout, and this as you can see from here when I hover over it, is 64dp, which is the option that we chose. And dp stands for density independent pixel. This is a unit that adjust to the pixel density of a device which can vary a lot from one device to another. To learn more about them, you can just google android device dp and you'll know more about them. But for now you can just work with them as if they're pixels, so that's the margin.
Let's take a look at padding. Right here, padding is not set, so I can add padding. And remember, if you haven't been exposed to padding before, padding is within the container. Within the view that we have. So, let's click here and add some padding. Let's try 20 and see what happens. Check it out, added some padding. How about 30, okay? We can also select an option, so I'll get rid of this and then select it from here. We can select one from here as well if you want, a preset one. How about this, okay? But let's just leave it at 20.
Okay, so, lots of options as you can see here and we're not going to cover all of them now. But another option that's worth knowing about is gravity. Let me pull it up. I'll scroll up to G. There's gravity and this allows you to play with how the content of the TextView floats around in the container that it's in. For example, we can move it to the bottom. So, I'll click on gravity. You see bottom is false. If I put bottom, then it's gone down to the bottom of the view that it's in or the container that it's in, okay? I'll uncheck that and move it back to the top. You can also move it to the right or the left. But doing right or left doesn't really do anything right now because the text is centered. But if it was free flowing then that would move around as well, right?
So, I'll uncheck them. So, gravity can be a very cool way to organize your UI elements. Okay, so now if you want to stop and look around some of the other options, feel free to do so but I'm going to move on and bring your attention back to those text options that we saw earlier. Scrolling down all the way, you see right here text and then textAlignment, textAllCaps, textColor, all these other options textSize. And one more that I want to show you before moving on is a background. I'm going to scroll back up all the way to B. And right here background. This is the background of this TextView that I'm in or the container. So, I can select this option and you can see I have drawable, but I'll go to color to select a specific color and you can select colors from here. There are lots of options.
I'll select this, okay? And you see the background changes to the color that you chose. All right, so hope that was useful and clear. And you got to see some of these options. There's obviously a huge amount that you can do with attributes of your views, and we've gone through some basics for now but we'll keep revisiting them as we move along in the course. So, at this time, we've come to the end of this video but also to your first challenge. A little challenge exercise for you before I show you what it is. I'll show you how you can get started. So, I'll first select this view and delete it from here. I can simply hit 'Delete' and the view goes away. As you can see from my component tree, I'll bring a new TextView over here. So, from text right here, TextView.
Bring it down here. As you can see as I move this around, lines appear on the screen that help you move the view along to place it where you want in the screen. This is the middle of the screen for example, and notice there's a message that appears over here. Let's see what does it say. If I click on it, it says missing constraints in ConstraintLayout. What this means is the view that I just placed is not constraints, it's basically not linked to any of the sides of the screen, okay? It's basically just floating around at the moment. So, a quick way to add constraints to a view is to add margins, all right? So, this is selected. If I scroll all the way to the top, you can add margins directly from here.
The Constraint Widget section, let's say I wanted to add a margin to the left, I could click this real quick this '+' button and you see there's a constraint that's been added. I can also add one to the top by clicking on this '+' and then I can change it. I can make it let's say 32 and you see it gets constrained toward the top of the screen, all right? So, that's how you do it. Now, let's get rid of this and give you the challenge. So I'll come here, hit 'Delete' to get rid of it. And the challenge is this.
I want you to create this TextView. So, you want to align this centrally and toward the top of the layout and it should say, My Temp Converter in green and bold font with an orange background. And while this is not necessarily beautiful, it'll give you an exercise and practice on how to edit and customize text and also place constraints. And once you've done that you can post an image of the preview of the app to the discussions of this lecture, all right? And that's where I'm going to leave it for this video. Good luck with the exercise, and I'll see you in the next one.
Mashrur is a full-time programming instructor specializing in programming fundamentals, web application development, machine learning and cyber security. He has been a technology professional for over a decade and has degrees in Computer Science and Economics. His niche is building comprehensive career focused technology courses for students entering new, complex, and challenging fields in today's technology space.