Hello and welcome. In this video, we'll get started with the app and its layout. First create a new project. I'll call it MyTemperatureConverter. So, I'll go to File, New, New Project. I'll select Empty Activity and I'll name it MyTemperatureConverter. You can select whichever minimum SDK you like. I believe the default is API18 which is fine, finish. All right, I'll close this. Let's pull up our layout. Get a little bit bigger. Okay, now let's run it and make sure we're hooked up correctly. I'll click 'Play'. All right. Looks like it worked. Let's take a look. I'll pull up my emulator. There it is, MyTemperatureConverter. Hello World. Great. Next we're going to get an image for our app. 

So, right here I'm going to add an ImageView. First, let's grab an image that we can use. I'm going to go to Unsplash. So, unsplash.com. Remember again with images, if you are looking to push your app to the app or Google Play Store later on, make sure you own the rights to the images you work with. But for tests and and for our own use for our learning purposes, we can use anything we want. So, I'm going to look for Fahrenheit. There you go. That's the image I'm going to use. Download free small. Now, I already have it downloaded, so I'm not going to download it again and I'll pull it up in my preview. There we go and if you need to resize it again, in the Mac it's super easy. You can go to Tools, Adjust Size. 

And I've set my width to 500, which adjusts the height as well, so feel free to do whatever you like here. I've named this temp_f_c, so I'll copy this from my Downloads 'Cmd+C' and then back to Android Studio. I'll go to Project and in my resources Drawable, and I'll paste it right here, so 'Cmd+V'. Last view to verify the Drawable folder. Okay, all this looks good. Refactor and there it is. There's the image that's showing up. Great. When get rid of this... Okay, now let's drag an ImageView over here. Actually, I'll get rid of this. Hello World first. All right. So, let's drag this in here and there is my image temp_f_c. I'll move it over here, and then I'm going to move down and look for a scale type. It's under Common Attributes, Scale Type. I'm going to select, FitXY. There you go. 

It fits the entire box that I was in. And when I say box, I mean container. And you're going to just this as you like. I'll probably make this a little bit smaller, so I'll move it up just a little bit. Okay, that's good. Now, let's set the margin constraints right here. I'm going to select the left of zero, top of zero, right of zero as well. Okay, so now that's pinned in place. Next I'll grab a TextView below it and I want it to say entered the desired temperature to convert. So, there we go. Let's grab a TextView. Bring it down here. Change the text here to enter the desired temperature to convert. Okay, I'll move it towards the middle. I'll increase the font size, so scroll down to Common Attributes, and you see the text size is14sp. And sp, if I haven't mentioned it before, stands for Scalable Pixels. 

So, it adjusts according to the screen size that it's displayed in, so it looks relatively the same size on each screen. And sp is used exclusively for text. So, I'm going to use 18sp. All right. Move it over there towards the middle and then I'll textAlign to the center and let's set up some margins and pin it in place back to our Constraint Widget, add a left top to constrain it to the view and then the right. And I'll change this to something smaller. So, two on the left, two on the right, and top 30, let's make it 30. 

Okay, that looks good. Enter the desired temperature to convert. Next let's add in a text field here. So, from our text, we're going to add in one of the widgets from here and that will be for the users to enter the number that they want to convert. And I'm going to choose the type number, decimal from here, this widget. And what this will do is it will ensure that the edit TextView that we get will pop up the numbered keypad instead of the text keypad when a user tries to enter in a number, all right? So, right here I'll drag this in, okay? 

Let's add some constraint margins. On the left, I'll make this 95; on top, I'll make this 24; and on the right, I'll make this 95 as well, all right? And you see there seems to be a bit of a render issue right now and this can be a bit buggy with Android Studio at times with certain widgets. Now, what's happening is I am using the preview version of Android Studio, this isn't the official releases yet. So, by the time you get to using this, this may be resolved or may not, but it's really only a render issue, so not a big deal. In order to actually see this, I can click on this and check out my Design and Blueprint side by side. And you see here in the Blueprint you can clearly see there is my field right there. All right, so not a big deal but it is a bit buggy at the time of this recording and I haven't looked into how to resolve this is yet, but if I do in a later video, I'll post it. 

But again, in all likelihood by the time you use this it will be resolved. Okay, and for this one I'm going to add in a hint as well, so I'll scroll down to find hint right there and I'll give the hint of temp. All right, so now that we have a few view items, let's run it and make sure it works exactly as we want. I'm going to run app. It's a good idea to frequently run your app just to make sure that you haven't missed any margins or anything like that and the different view components are showing up in the right place in your layout, all right? Looks like everything worked. Let's pull up our emulator. There we go. MyTemperatureConverter, enter the desired temperature to convert, and there is the temp field and when I click on it you see the number keypad shows up. Great. 

All good so far, let's move on. Next, I'm going to add in the two buttons: one to convert to Celsius and the other to convert to Fahrenheit. So, I'll go to Buttons there is a button, I'm going to drag one in here toward the left, right here. And I'll drag another one to the right over here. Now, let's add the constraint margins for these, so I'll select the first button and let's say we want to add the left margin 82, let's make it 72 and then the top to the input field, okay? That's 24, let's make it 28. And I'll select the next one. We'll add margin to the right 72 and top 28 as well. Now, let's change the text and then we'll add a constraint that links one button to the other. 

So, first I'll start with this button, I'll change the text to Celsius and I'll change this to Fahrenheit, okay? Now I can add the margin to the right, 19. That looks right to me, so I'll leave it at that. Now, let's work on the buttons and change their color. I'll change this to a purple color, the Celsius button, so I'll scroll down to colors right here background tint. I want to change this to purple. There we go. And to this one fahrenheit, I'll change it to teal right here. Okay, so let's apply these changes and see what our app looks like. Here's our emulator. Okay, it looks like we have to reinstall and restart up, and that's fine, and here we go. 

There are buttons that are showing up and you can see why it's important to run this. You see that the buttons are on top of each other, even though in our layout  it looks like there's a bit of a margin in reality on this particular phone screen. In our preview we can see that there is no space in between, so let's do that. Let's make sure that we have some space in between the buttons. So, with this one let's see you can add margin left of 19, let's see if that works. Now, we have margin on both. Maybe that should do the trick. So, I'm going to apply changes and run. There we go and we have some space in between, so now I can enter in a temperature let's say 52, and I can tap either button. 

They don't do anything. So, that's the next step, let's go ahead and add the onclick methods. When I click on 'To Celsius' I want it to be handled by a To Celcius function or method that we're going to add, and similarly on click 'To Fahrenheit' I'll use a To Fahrenheit method for that. So, let's go to Celsius and look at on click. Here we go, we'll have this handled by toCelcius, and Fahrenheit will have this handled by toFahrenheit. So, we have to add these two methods. Right here in our main activity Kotlin file, I'm going to say fun toCelsius  and this will take in parameter view of type view open close curly brace, and then fun toFahrenheit  same view of type View, and I need to import this. So, there we go. Now, it's added open close curly brace. 

So, now our two methods are set up, and the last bit that I'm going to cover in this video is to set up the view binding. So, I'll enable this in my gradle file first, and we've done it a few times so far. So, I'm going to go a little faster in project gradle scripts, build.gradle, and within android we're going to paste this in, build features, view binding true Now, you can get this code from this video or you can get this code from your prior apps where you've done this, or you can also look up android view binding and it will give you this code to set it up, all right. 

So, we'll sync this now that we've updated the gradle file. Okay, it's synced, I will close the project tab. Close out of this file. Now, back here, I'm going to set up my variable private lateinit var binding: ActivityMainBinding. All right, I'll put some space in there. Now that we have our binding variable, we're going to go in our onCreate function, and then binding =  ActivityMainBinding.inflate (layoutinflater). And the last step setContentView right here and we say (binding.root), okay.

So, our view binding should be set up and ready to go, and I'm going to leave it at that. In this video, I have one task for you which is in our two methods right here, log and info and a message when the buttons are clicked, right? So, in the emulator right now, if you click on any of the buttons, nothing happens. What you want to happen is in the logs that's a lot of logs. All right, we're going to scroll all the way to the bottom. Let it do its thing. So, when you click on any of the two buttons, you should have a log message that pops up over here with a message that says which button was clicked, all right. And that's it for this video. Our layout is now done. And in the next video we're going to build out these two methods to perform the conversions, and in order to do that, we'll need to learn about number types and conversions from one type to another, which we're going to cover in the next video. See you there.