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. Continuing on from where we left off in the last video, we will create the clickFunction method that we called when this button is clicked or tapped. And as a reminder, the onClick attributes, you can see here, we entered the name of the function as clickFunction, and that's why we're going to be naming the method clickFunction. If I called it something else, then I would have to name the method as that. So, let's pull up the MainActivity.kt file, and I'm going to create a function. See these open and close curly braces, the code for your function or method is included within them. So, I'm going to start my method after this one, after this closing curly brace. And I'll start by calling it fun for function and then clickFunction.
Then I'll put parentheses in there. And within these parentheses, I have to define what parameters this function accepts. And what is that going to be in this case? See here, we're dealing with a button, and a button is a type of view. So, we're dealing with a view. So, the parameter that I'm going to be working with is going to be of type view. And I can name it something. So first, in Kotlin, you have to provide whatever you want to name the parameter. So, I'm simply going to call it view, lower case view. And then a colon, and then I have to specify the type. And the type of a view is View, and you see it pops up over here, all right? So, I'm going to select that. Leave it as View.
And when I do that, you see how the import android.View package has shown up over here, all right? So, this makes the View type available for us to work with. And then, after the closing parentheses, I'm going to put an open and close curly brace. And that's it. That's the function that's defined. It doesn't do anything, but the function definition is there. Now, if I go back to MyActivity_main.xml, you see that the error is gone. The error that was saying that the function cannot be found is gone. So, back to my code. So here, again, as mentioned earlier, within the curly braces, the open and close, here is where all the code for the method is going to go. Now, for our first interactive element, what are we going to do when the button is tapped?
To start, let's notify ourselves that an event which is the button has been tapped or clicked has taken place. So, how would we know that? Well, we can make use of what's called the log screen. So, I'm going to go to the bottom of my page over here, and you see this option or this tab that says Logcat; If you click on it, here we go. Now, this is the screen that's going to log everything that goes on behind the scenes when your emulator is running. Right now, my emulator is not running, so nothing is going on here. If I started, if I click on the play button, you can see information is filling in as we go. The Gradle build is still running. And you see a lot of information popping up in the back as this is taking place.
So, all that is happening behind the scenes. I'm going to move it to the right over here, so you can see more clearly. Here we go. Pixel is finally starting up. The first time I run this or I start the emulator, it definitely takes a lot of time. It could be different for you depending on your system or the emulator that you've chosen. Might be a good idea to keep it running in the background. All right, now, if this message pops up, that's fine, you can just click on 'Wait,' and there it is. There is the emulator, and there's the button. So, what we want to do is, when we tap this button, or we press it, then we want a message to show up over here that says button clicked or something like that. That's what we're aiming for. And in Kotlin, as in Java previously, if you want to log a message to your log over here for the emulator, you can use the log class. See, right now, if I click on this button, nothing happens, all right?
Nothing shows up over here, but that will change as soon as we add some code here. So, I'm going to go into with my function and write here, tab in twice so your code is nice and organized. Within the function, I'm going to say Log, okay? And then if I do that, you see this pops up right here, Log (android.util). And if I hit 'Enter' over here, you see the package over here is imported. So, import android.util.Log. So, now I can use log in my code. And now, if you're interested, would be a good time to start referencing documentation. If you want to find out what this is or how we arrive here, you can pull up a new browser tab and type in Android Kotlin Log, hit 'Enter' or 'Return,' and there we go. There's the documentation from developer.android.com. And you see right here, it says that this is an API for sending log output. And generally, you would use these different versions or methods to write logs. And the one that we're going to use is Log.i and you can reference the other ones or read through them if you like. If I click on this one, you see that it sends an info log message, and that's all we need; There will be a tag portion of it and a message portion of it.
So, let's go ahead and add this to our code. Right here after Log, I'm going to say .i, and then you see the information pops up there, tag, and message. So, what I'll do is, within parenthesis, I'm going to open double quotes, and you see automatically fills in tag. I'm simply going to say info, and then I'm going to put a comma, and then put in quotes again. And there you go, message pops up, and here I'm going to enter in the message that I want to show when the button is pressed. And I'll simply say, Button pressed. A quick sidebar here.
The Gradle tag and message pieces of texts over here, these are hints for you provided by Android Studio. They're not actual code. See, Android Studio is smart enough to know what function or method you're working with, and it will provide a hint for you every now and then. The actual code is the portion within the double quotes here, "Info" and "Button pressed". These are known as strings. Most programming languages use strings to represent text or textual data, and you'll usually see them within single or double quotes like this. And that's it. So, let's see what happens. I'm going to apply changes and run. See if it gives me any errors. It says Gradle build running.
Okay, success. Operation succeeded. So, I'm going to pull up my emulator right here, and keep a lookout for what's going on down here in the log. I'll click the button. And there you go, Button pressed. I'll click it again. As many times as I click this button, the Button pressed message shows up over here. So, if you've managed to do that, congratulations. It's your first bit of Kotlin code that you've written and managed to work and add some interactivity to your app.
So now, we've covered a very decent amount, and we've come to the next practice task. And the task is simple. It's to sum up everything that we've done so far in this app, but in a new one. So, create a new android project, not this example app, create a new android project, call it My Temp Converter and repeat all the steps that we've done so far. You don't need to include the text and the background color, but definitely have a button in the app.
And when you click the button from the emulator, make sure that you are able to pull up a screen in your logs that says that button has been clicked. And you can use whatever message that you want. And once complete, please take a screenshot of your screen and post it in the discussions of this video so that me and other students can take a look. And feel free to reference back to any point in this video or in earlier videos if you get stuck, okay? Good luck, okay? Good luck with the project, and I'll see you in the next video, where we'll quickly run through the steps that I would take to make this happen. 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.