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.
Excellent. So, now you have installed Android Studio and you're greeted by this welcome screen right here. As you can see, there are lots of options, most of which are reasonably self-explanatory, but we're going to dive right in and select the option to create a new project. Once I click on it, it brings me to the screen to select a project template and here are some example templates. You'll see all of them have this keyword activity right at the end. You'll see Bottom Navigation Activity, Basic Activity, Empty Activity, Google Maps Activity. So, what is an activity?
An activity on android is essentially a screen, the screen of the app that you'd see. So, as you build different apps, you'll use an add different activities. So, when you start your app, you may use a basic activity such as this one, but then when a user wants to do something like use a map, you might jump to the Google Maps activity. You see other various kinds of activities here as well, some of which we'll see and use as we go through the course.
But for now, we'll start with the empty activity which is chosen by default right here. I'll click next. So, in the next screen it gives us the option to choose a name for our application. I'm going to call this Example App and right below it, you see package name. Basically, every android app has a unique application ID that looks like this package name, which in this case is com.example.exampleapp. Note here, the example part of it, this com.example. This is going to be your unique domain name which you may or may not have. But at this point, it can be anything. Down the line when you're publishing your app on the Google Play Store, you'll need to have your unique domain name here. But again for now it can be anything, so I'll just leave it as example.
Then you're given the option to select where you want your app on your hard drive. I'm just going to leave it as is as the default location here. Next you see under languages you have the option of Java or Kotlin I'm going to leave this as Kotlin. I'll explain what Kotlin is later on, but it works very well for Android. And then you have minimum SDK and the API version to use. If I click on this drop-down, the default is this one API 18. And you see below it, your app will run on approximately 98.4% of devices. Now, as you scroll down to newer versions of the API, the compatibility on devices will decrease since the newer versions will have more functions and features but these would not have been present on older devices.
So, for now we'll pick an API that's compatible with majority of devices which was picked by default here API 18. And then I'm going to click finish. Okay, now this might take a few minutes to boot up. Mine's going to say loading over here when it's all done, I'll return to the video. Okay, welcome back. Now that took a few more than just a few minutes. But here we go, your first glimpse of the latest Android Studio project. Now mine has opened up with two default files over here, MainActivity.kt which is a Kotlin file and an activity_main.xml which is an XML file but you may or may not be seeing the same. It doesn't always open up with these two files, so I'll close them for now and we'll open them up as we need later on.
Okay, on the left here on top you see this project tab, I will click on that as well so we can start off with this clean, empty development environment screen. So, let's go ahead and explore this development environment. As you can see, we have a lot of little tabs and options on the screen. Now, part of the journey as a developer for you is to figure out what's important and what's not particularly when getting used to a new tool or system such as this. Let's start on top here. We have this file structure or folder structure that leads to the MainActivity file which was open a few minutes ago. On the right here, we have a number of different options but the most important and exciting one is this green play button.
This is the one we're going to use very soon to run our app and feel free to hover over any of these options to learn more about what they are but don't worry too much about them at this time since we want to keep it simple. Then on the right here we have a few different options and at the bottom and all the way to the top left where we had the project folder. I'm going to click on this to view our project. Now we have two key folders over here. One is app and the other is Gradle Scripts and Gradle is an open source app building tool that Android Studio uses to build your app. Later on in the course will be customizing these Gradle build scripts to customize and add features to our app. But for the moment, we'll leave them as they are.
Let's take a look at the app folder. I'll expand it and this folder has three folders here. First one being the manifests folder. Let's click on it and this has just this one file which is the android manifest file. Let's take a quick look, I'll double click to open it. This is what's known as an XML file and it contains information about your app. You can see the package name, you can see the name of your app and a few other important things. We'll be editing this later on as we add more features just like the Gradle Scripts but for now we can close out of it. Of more interest to us right now is the Java folder. This is where the code for our app resides.
This has three folders in it, two of these at the bottom are the test folders which we won't be using right now, but the one of primary interest is the top folder right here which has a single file MainActivity and this is the Kotlin file. I'm going to pull it up. There we go; there is the MainActivity.kt file and this file has some code in it which sets up the MainActivity in our app. And we're going to be looking at this in much more detail over the next couple of videos. When I close out of it, all right. And finally we have the third folder which is the res folder and res is short for resources. This is where we'll keep things like images and music, but the most important to us right now is the layout folder right here within which resides the activity main file which we had seen earlier.
I'll double click on it. There we go and I will expand this area a little bit and as you can see this is where you can see a visual representation of your app. And this is also where you can get started editing the actual content in the layout of the app. So, this is where we're going to spend a lot of time working with the layout and then in the MainActivity Kotlin file which we saw earlier, we'll be working with some code to make the app actually do things. So, back to the activity_main.xml file, take a few moments right now to play around here. Maybe add a couple of buttons to see what they look like, take a look at the widgets, the text views right here. There are a lot of other things you can add to your app layout from here.
You might also want to look at how your app would look on different devices. Right now pixel is chosen as the default device right here, pixel 5.0. You can see there are other devices and their version numbers listed here. You can also play around with higher resolution ones if you like. You can even look at tablets, wearables and TV screens but we'll leave it at the default for now. Now, right next to it toward the left, you see the orientation for preview. You can select this to preview what your app would look like if you flip the screen. So, if I click on it, you see right now it's in portrait mode. I can click on landscape to see what the app would look like in landscape mode. But I'm going to move back to portrait All right, and then I can click on this plus button to zoom in so I have a clearer picture of the layout.
So, as you can see already there's a huge amount you can do here, most of which we're going to look at at various points in the course but for now, let's first run our app as it is within a phone in the emulator in the Android Studio itself. I'm going to go here on top, you see no devices. What we have to do is select the device that we want to run our app on and I don't have any phones or devices connected, so what I'll need is to use a virtual device. So, right here is an option for AVD manager. I'm going to click on that. And since I just installed Android Studio, I'll need to create a new virtual device.
So, let's do that. I'll click on create virtual device and here you can choose any phone and you can have an emulator for it. You can choose other types of emulators here, you can see TV, wearables, tablet, automotive but I'm going to stick with phone and the default option which is pixel 2. All right, so that's selected. I'm going to go to next. All right, and here we get an option to select a system image. Basically, what type of image we want our android device to run and I'll select the latest one right here which is R and if you already have one installed, it'll show up here since this is a new installation and I don't have any installed. I'm going to have to download and install this option. So, I'm going to click on it to download. Here are the terms and conditions. All right, I'll accept and click next and this is going to take a few minutes to download and install. So, I'm going to pause this video and return when it's complete. All right, there we go. It's installed. Now I'm going to click on finish to finish the installation.
All right, there we go. Now I should be able to use this version that I downloaded, okay? I'm going to click on next and this screen is just a summary of the options that you've selected so far. We have pixel 2, R, portrait mode then I can click on show advanced settings. I'm not going to be changing any of the defaults right now. All right, let's click on finish. So, that's the setup of our android virtual device right here, it's showing up. Now you can see I have this option of launching this AVD in the emulator but I'm not going to do it from here, I'll do it from elsewhere. I'll simply close out of here and over here you see now I have this option pixel 2 API 30. That's selected so to run my app, I'm simply going to click on this play button. And there it is. The emulator has popped up, you can control it using the icons here to the right. You can move it around as you see fit or need. I'll leave it here for now. And at this point we have to wait for our app to build using Gradle and this may take some time, a few minutes or perhaps a bit more the first time you load it up. You see in the bottom here it says, Gradle Build Running. So, I'm going to pause this video and return once the build is complete. I'm temporarily on pausing this video so you can see the emulator is starting up. There's the phone.
All right, the Gradle Build has completed with no errors. It's saying that it took 4 m 19s, I'm going to close this one. All right, now it's saying waiting for all devices to come online, there's my emulator. I'm going to give it a minute or so to see if it loads. If it doesn't, then I'm going to exit out and then just run it again to see if it works. There we go, the phone is starting. You may get this message that says system UI is not responding. That's fine, I'll just click on wait.
So, sometimes what may happen is your emulator may be ready to go but then it might not sink or the app won't play right away and at that point you might need to click run app again, but I'll give it a minute and see if it loads and if it doesn't then I'll click on the green play button. All right. So, what I'm going to do now is click on play run app. Gradle Build Running. Okay, it's completed. All right. Now I'm going to pull up the emulator And there it is. It took a few minutes but it finally showed up. You see the green success button operation succeeded and the app says "Hello World!". Congratulations, that took a while but we've just built and run our first app. Now obviously it doesn't do much yet, but that will change once we learn how to customize and code our apps in the next few videos. 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.