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

Image 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

So, hope you managed to solve that. No worries, if you didn't. Here is how I would go about doing it. First, I want this image to span the whole screen so I'll use an option from the scaleType. I'm going to select centerCrop right here, and you see it spans the whole margin of the ImageView. But that also means, I have to drag this ImageView all the way to the bottom. There we go. All right? So, now we have this image spanning the whole screen. Perfect. The next step is to drag the Button to the bottom. So, I'm going to take a button and bring it down here; toward the bottom right of the screen. And I'm going to change the backgroundTint to, white. So, right here, I'll select 'White'. 

And now the text is gone, so I'm going to change the text color. So, scroll down, right here, textColor; I'll change this to something dark, black is a good option or dark gray I'll use dark gray. There you go. Now in terms of the text you can change the text of the button from here but I'll do it the preferred way: by declaring a string. So, in my Project under: Resources, Values, Strings. I will 'Open editor' and then add a new string. And the key I'll say, 'change_button' and the default value, what I want to display, is 'CHANGE ME!'. So, that's added. So, back to my 'activity_main', I'll get out of this project tab. Here now, I can update the Button to have the string from my 'change_button'. 

There you go. 'CHANGE ME!' And I'll drag it back a little bit. Now, in terms of ID, I will change the ID of this Button from just being 'button' to 'WeatherChangeButton'. Rename ID Resource 'button' and its usages to this and scope 'Project Files'. 'Refactor', so it gets updated everywhere it needs to. That's good. So, one problem is this is not constrained to the bottom right over here. If I run the app right now you'll see it, let's just make sure everything else is okay and then we will constrain it to the bottom right of the screen. Okay, looks like everything worked. Let's pull up the emulator. There it is. So, you see the images showing up like we wanted, but the button is all the way to the top left, So, let's pin it to the bottom right. 

So, in the Button I'm going to look for ConstraintLayout. If I scroll down, you see the Constraints, right now, are zero and what I'm looking for are layout constraints. So, if you look under, All Attributes and scroll down to the 'L's, you'll see layout_constraints. Right here you see, I have no constraints, no margins. So, what I'll do is: add some layout_constraints and scroll down and I'm going to make some more room here. So first, 'Bottom_toBottomof' right here. This one I want this to be: instead of the 'imageView', I want it to be the 'parent'. And, the 'parent' is the ConstraintLayout. Okay, Not this image. Otherwise it would have tried to put this at the bottom of the ImageView and that's not what we want because that would have been outside of the screen. 

That's one. And then, 'Right_toRightof', also the ConstraintLayout. So, I'm going to scroll down layout_constraint, I want 'Right_toRightof' right here, and I'm going to say, 'parent' as well. This way it's, to the bottom and to the right of the screen. Now, the other thing is I want some margins. This is all the way to the right and to the bottom, let's add some margins. So, I'll minimize this. And now, layout_margins, right here. Here we go. 'Layout_marginRight', I'm going to say 20dp: that moves it a little bit away. Actually, let's do a little more, let's try 25dp. And at the bottom, I'll add some margin at the bottom; 'Layout_marginBottom'. Let's do 25dp here as well;  so it moves it up a little. Good. So, now it's toward the bottom and to the right. Great. 

Now, let's try rerunning this and see if it looks good. I'm going to apply changes and restart activity. There's my emulator, I want this button to be down and to the right. [There you go. Perfect. Now, the next thing is to switch the image once this button is clicked. Right now clicking this button, does nothing. So, I'm going to go back to the Button and I'll go to 'onClick'. So, under Common Attributes, should have an 'onClick'. Right there. And I want this to call a method and I'll call the method, 'changeWeather'. Obviously, I don't have this declared anywhere, so I'm going to have to do that. I'll pull up my 'MainActivity.kt' file. I'll say, 'fun_changeWeather( )' There you go. 

And, it's going to take in the view which is of type of View. 'Android.view', right there, pulls up automatically. I'm going to hit 'Enter' so it gets the package. Right here, you see, 'Import android view'. .Great. So, now we're set to go with our method and what do we want this to do? The idea is, in our ImageView, right here; which is the container, there is an image right now and the image is the storm_image_1, which we have. You can see right here, if I go to Project and under Drawable, you see storm_image_1. That's the image that's showing up in my ImageView container. So, once the button is clicked, I want to change what's in the container to be the other image which is, sunny_image_2. And that's it. So, let's do that. I'll go to my method, right here. First, I will grab the ImageView in a variable. So, 'val' I'll call it 'image' you can use 'viewbindings' here if you want, but I'm going to use, 'findViewById'. 

So, 'findViewById'. The type of the view is, ImageView. You can always look at this, to verify. If I click on this and go to the top, you see the type over here: top right is, ImageView and the ID also happens to be imageView but this ImageView class; capital 'I'. Just like we had seen for EditText. Keep that in mind. So, ImageView, and you see it pops up right there, if I hit 'Enter' over here, it will import the package for us as well. So, now I have to do 'R', resources, dot 'id', and the id of that ImageView which happens to be, 'imageView' as well. Right there. And again, you can verify this. Right here, the ID is imageView. You can change it to whatever you need. 

So, now I have a reference or a variable that references that ImageView. So, all I have to do is change the image in that ImageView to be the Sunny image. So, I'll take this ImageView and then the method to set the image is, 'setImageResource( )' And, what do we want to set it to? Again, we can look at this. It's in our Resources, Drawable, sunny_image_2. So, right here, 'resources.drawable. sunny_image_2'. There you go. And that's it. Let's try it out. When I apply changes and restart activity. All right, looks like everything went well. So, let's go ahead and click on this, 'CHANGE ME!'. Boom. It works; changes to the sunny image. Great. And that's it for what we are going to cover in this solution video. But notice something here. 

If I click on this button again, nothing happens; It doesn't change back to the storm image. It stays here. And to fix this, we're going to need to add some additional functionality which will require us to explore a new programming concept in the next video; which is called branching. Hope you're excited. I'll 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