1. Home
  2. Training Library
  3. Programming
  4. Programming Courses
  5. Introduction to Android Studio, Kotlin, and Basic App Layouts

Complete Project Solution

Start course
Overview
Difficulty
Beginner
Duration
3h 39m
Students
1
Description

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.

Intended Audience

This course is intended for beginners to Android app development or anyone who wants to master coding in Kotlin.

Prerequisites

Since this is a beginner level course, there are no requirements, but any previous experience with coding would be beneficial.

Transcript

Hello, and welcome back. In this video, we will apply an if else condition here in our changeWeather method to check for the image that's being displayed and change it accordingly. So first, how do we check what image is being displayed on the screen?

Let's take a look. We're going to go to the app layout and here you see the UI view or the graphical view that we have of our layout file. That makes it easy for us to use by dragging, dropping widgets and moving things around in a visual way. But this is an XML file and there's actually code behind the scenes as well. And you can see the code directly by clicking here on this 'Code' tab on the top right. If I click on that. There we go, there is the XML for that file and you can also click on a split view to have the app view and also the code side by side by clicking on 'Split'. There we go. Now here, the image is clicked so you can see it points to 'ImageView'. 

This is the view itself and you see all of the attributes, properties and all that good stuff that we added here. Then, if I scroll down, and click on the 'Button', you see all the properties of the button here. So, you can add code directly over here as well. You don't necessarily have to do it using the layout. So, in this ImageView, we're going to add an additional property called Tag. We're basically going to tag this image so we can identify it later on by that tag. So, over here, under this android: scaleType, when I go to the next line and start typing tag. And you see as I type this, android:tag pops up. I'll hit 'Enter' here and within quotes, I can enter in a tag that I want for this. So, I'll say, "storm" for starting off. 

Now that I have a tag of storm to start off, I can check for this in my MainActivity. So, right here, after this, I'm going to write an if condition, 'if ()  { }, and within here you can write the condition. So the condition is, I have my ImageView object right here, 'if(image.tag== "storm") { image.setImageResource(R.drawable.sunny_image_2)}.' So, if the tag is storm, then change it to this image. But we also need an else condition for the other situation, right? So I'll say 'else e{ image.setImageResource(R.drawable.sunny_image_2)}.' All right. So, if it's not storm, that means it's sunny. And then, I want to set the ImageResource back to storm. So, command C, I'll paste it here, and instead of 'sunny_image_2,' I believe I called it 'stormy_image,' but I'll check. I'll go to 'Project.' There we go, 'storm_image_1.jpg.' So I'll close this. So, back here, I'll say, storm_image_1, okay. 

But although this logic looks sound, it's not going to work as it is because you see, after I'm setting the image resource to 'sunny_image_2,' my tag is still remaining as storm. My tag isn't changing, right? So, remember I have just set the tag for the ImageView as 'storm.' I need a way to change this when the other image is being displayed. So, how do we do that? Well, we can set the tag from here. So, as I change the image to sunny_image_2, I want to set the tag to sunny. And I can do that simply by saying, 'image.tag = "sunny." So, now the tag for that ImageView will be sunny if this happens. 

And then, when I try to change it back, I click 'Change again', it's going to come to this. This is not going to be true. It's going to see that it's sunny. It's going to go to the else clause and it's going to change it to 'storm-image_1.' But once that happens, I have to set the image.tag back to storm. RSo, that's it. And would recommend if it didn't make sense the first time or some of it is unclear, take a look at the last few minutes of this video again to see how we developed this code block. And don't worry if it doesn't make complete sense right now as we build more of these things and more of these conditional, it'll get easier and clearer each and every time, all right? So, let's run it. 

I'm going to apply changes and restart activity, pull up our app. All right, there we go. Let's click on, 'Change me,' changes to sunny. 'Change Me' again. Boom, perfect. It's changing back and forth every single time. All right, great. So, we've successfully modified our app and added some additional Kotlin logic over here to our code. Hope you enjoyed that. We've now approached the final project for this section, which is the temperature converter app and we'll get started with it in the next video. See you there.

 

About the Author

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.

Covered Topics