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 the last video we had built and run our first working app which says, "Hello World!". I'll pull up the emulator, this is where we ended. Let's do a quick refresh. I'll exit out of the app in the emulator and I'm going to rerun it. So, if I press this button, it exits out of the app and then I can go back use the play button to run the app again. Then you can see at the bottom here, it says Gradle Build Running. Process 'app' is running, do you want to terminate?
Blah, blah, blah, I'll just hit 'Cancel'. There we go, "Hello World!" and you can also see the success operation succeeded message there. So, all working well. I'd recommend running through this process a couple of times. Basically, after the first time I found this process to be pretty smooth. The first time the emulator loads up with all the processes that happened in the background, it might take a little bit of time, but that's okay and it's expected, especially after the first installation. All right. Now, moving on in this video, we will be looking at text views.
A text view is what we use to display text in our app and that's a very important fundamental element of the UI or the user interface or layout of your application. I'm going to zoom in and make some space over here so we can see clearer. All right, let's make some space on the left and right over here. All right. And then if I want to move around on the screen, I can click on this pan screen, the hand over here and then drag it, all right. So, a view is pretty much anything we put on the screen. So, whatever you see here, CheckBox, ToggleButton, Switch, anything that we put on the screen.
So, in this file activity_main.xml where the layout is displayed, if we tap on the screen right here and make sure you're zoomed in so you can really look at this properly, okay? You can see Hello World is displayed. That's the text on the view. And on the right here you see, under layout, we have the constraint widget. You can see the margins that we have on all four sides and some other settings for the text view. I'm going to scroll down. Right here you see the common attributes and the most obvious of them is a text content itself which says "Hello World!" right here. Text you can see "Hello World!" and we can update it right here and say something else.
So, I'm going to say Hello Mashrur! Hit 'Enter' and you see the change is reflected here right away. Now, we can also run this and see it reflected in the app. So, as a reminder our app says Hello World! right now, but since we've made this change, if I click play, the Gradle Build is running. Okay, we got the success message, so I'm going to pull up the emulator and you see it says 'Hello Mashrur!' Great. Next, right below the text field, you have this text with a spanner next to it and if you click on it and then hit 'Ctrl + Space', a whole bunch of options show up. Essentially you can choose some prefilled common pieces of text from here. Let's say you wanted the copy text so I can select that, hit 'Enter' or return, you see the copy text shows up over here. You can zoom in some more. There it is.
Now, I'm going to select something else. Let's say you wanted dialog_alert_title, hit 'Enter'. Here we go, attention shows up. So, you can see some prefilled text that you can use. All right. I'm going to get rid of that, leave it as Hello Mashrur! Then moving on, we can add a description for the text content over here. We'll leave this blank for now. We can also change the appearance, you can choose from a range of different options here. Right below it, text appearance. I can make it large, I can make it something else, let's say medium and so on. And then below it you can customize it further.
You have font family so you can select a different type of font, let's say we use monospace and here you'll be able to use your own fonts as well which we'll explore adding later in the course and you can further play around with the various options here. You have typeface, text size, you have line spacing but this option will not make a difference right now since we only have a single line. Below it, we have text color and you can choose from some prefilled options, so I'll hit 'Ctrl + Space' and you can see there are some different color options. Let's go with primary_text_light or we can go with something else. Let's try a different one. Let's go with @color/purple_700 and you can see you can get a different color. You can also click on this option right here, right before the color type and you can customize this further. If you click on custom, you can select a color that you want specifically from here.
So, let's see. You can click here. That's more of purple or pink or you can go to blue like a blue that's over here. Okay, so as you can see you can select multiple options from here. Next you have the text style, bold and italic, you can also use caps to make it all capital letters or leave it as it was before. Next we have text alignment and you can choose an alignment here. Let's say left or center, but it won't make a difference at this time because if you scroll up. Look at the layout, it's currently set to wrap content that's why it doesn't matter what alignment I'm choosing, it's keeping it in the center. What I can do is change this layout with, I can say match constraints and I'm going to minimize this a little bit so you can see that the text has moved to the left of the screen.
Basically, the option we chose match constraint has stretched out the text field to the entire width of the screen. And we can also change this alignment now to the right, let's say. It's right aligned or center, so it's center aligned and so on. Then after that you have alpha and then a whole list of attributes right below it. So, alpha, you can alter the visibility of your text view using this. There's some preset defaults that you can look up using 'Ctrl + Space'. Say 'Ctrl + Space' and let's say we choose material_emphasis_disabled and you can see you get a more transparent or lighter 'Hello Mashrur!' to display.
You can also type in a number here, if you want it to be invisible, you can make it zero, hit 'Enter'. And you see it's full transparency. The text is still there, it's just not visible. You can make it 0.5 for a lighter version or you can make it 1 to get a full opaque or fully visible text. Okay, next we have a lot more attributes here and since we have covered a decent amount in this video, we're going to leave it here and in the next video, we're going to look at some of these other attributes that are going to be useful. See you there.
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.