‫-: Hi. Within this lecture,
‫we are going to design our first app.
‫So what I'm going to do, I'm going to delete this button,
‫and I'm going to delete this text view as well,
‫because we are gonna start from scratch.
‫So we're going to build an app
‫in which we will display an image,
‫and we will have a button,
‫and when user clicks on that button, the image will change.
‫So basically we will need two images in order to do that,
‫and an image view,
‫that is a view to contain images, and a button.
‫Okay? So when a user taps on that button
‫the image will change dynamically.
‫So that's what we are going to do.
‫So in order to do that,
‫I'm going to drag in some of the views from here.
‫And as you can see, there are a lot of views.
‫There are a lot of segments over here,
‫like buttons, texts, common, and you can search
‫for reviews from here, like that image for example.
‫And we are looking for an image view.
‫So this is one of the most popular views
‫that we are going to use during this course.
‫And this will contain some images.
‫So when you first drag and drop the image view
‫into your layout, it will ask you what kind of image
‫do you want to choose like this?
‫Okay? And as you can see, there are some prebuilt images
‫like this one, but obviously we don't want that.
‫We want to use an image of our own.
‫So let me bring in a button,
‫and then we will find some images
‫to use inside of this application.
‫So basically what we wanna do is
‫to click on this button and change the image view.
‫So let me go to google.com
‫so that we can find a good image for ourselves.
‫So I'm gonna go for Metallica, which is my favorite band.
‫So you can do it for your own favorite band as well.
‫So I'm going to download two image of Metallica.
‫So one thing you should look out for is
‫that you have to find a small image, like you don't wanna
‫go for two megabytes, three megabytes of images.
‫Like, a 400 kilobytes or 500 kilobytes is okay?
‫So, Android Studio actually doing a very bad job
‫dealing with big images, okay?
‫So you have to do additional things
‫in order to make work with big images.
‫So I believe this is cool, I'm going to download this.
‫And of course, after downloading your image
‫you can check for the size.
‫And I believe this isn't completely downloaded,
‫so let me go to that website.
‫Yeah, it opened Facebook.
‫So let me find another one like this.
‫Okay? Yep, this is cool.
‫So let me try and download this and say download.
‫Let's see if we manage to download this. Yep, here you go.
‫And I believe this is small as possible.
‫So let me rename this or let me do the info first.
‫Yeah, this is 100 kilobyte. As you can see, it's very small.
‫And this is what we need. After you download your image,
‫just right click on that one and say, Get Info on Mac
‫or Properties on Windows and look out for your image size.
‫So let me just find another one, another small one as well,
‫like maybe this one or that one.
‫It really doesn't matter what I choose,
‫but I'm trying to find a good-looking image
‫with a small size. So let me download this one as well.
‫And let me get this. Here we go.
‫So let me see the info of this as well.
‫Yep, this is 200 kilobytes, so this is small as well.
‫So up to the one megabyte is okay, but after one megabyte
‫Android Studio starts to get weird on you.
‫So make sure you name it, make sure you just
‫find a small one and make sure you name it right,
‫like this metallica.jpg or metallica2.jpg.
‫You shouldn't use like big capitals or uppercase letters
‫or special characters or spaces in your image names.
‫Just something like image1, image2 is okay,
‫and you can copy it by Control-C,
‫and go into your drawable folder over here
‫and hit Control-V.
‫So it will just show you two selections.
‫Make sure you select the drawable, not drawable24,
‫and it will put your image inside of your drawable folder.
‫So this is where we store images
‫or any other media like that.
‫Remember you don't use any uppercase letters
‫or something like that.
‫Later on, you can go to your image view,
‫and on the right hand side, as you can see,
‫we see the properties of that image.
‫So find the source compat and choose one of the pictures
‫that you have just downloaded and say, okay.
‫And here you go. Now we see the image inside of our app.
‫Make sure you resize it like this in a way that you want.
‫Okay, And that's it. Here you go.
‫Now we see the image,
‫we see all the attributes of that image from here.
‫For example, we have this width and a height of the imagery.
‫We can actually actually change it
‫from the right-hand side like this.
‫You can write something like 250 dps
‫and 250 dps over here.
‫DP stand for Density-Pixel.
‫And so it's like pixel. It's very similar to pixel,
‫but it can be adjusted for different screen sizes.
‫So make sure you choose dps like this.
‫300 dps, 300 dps.
‫So if you wanna use pixel, it's fine too.
‫You can just write 300 px.
‫But we are gonna go for dp.
‫So if you click on this button,
‫you can see all the attributes, all the properties,
‫all the options of the image view over here,
‫but we don't need anything else.
‫Okay? We have changed the source compat,
‫but we have made the thing, right?
‫So right now I'm gonna go for button attributes.
‫So you can change the text
‫from here like this, change for example,
‫because it will change the text when we click it, right?
‫So let me make this a little bit bigger and
‫let me zoom in a little bit more so you can see it better.
‫Here you go. So I believe it's looking nice, right?
‫And when you click on this, it will change.
‫So I believe we are done over here.
‫So one last thing to do
‫before we go is to give some constraints.
‫So as you can see, we are getting some errors
‫and that is the reason why we got a button
‫over the left-hand side when we first run this on Emulator.
‫So you have to click on this button
‫in order to make some constraints.
‫So constraints define where our views
‫will be located on the layout.
‫So if you don't give some constraints,
‫then it will appear on the left-hand side of the Emulator.
‫So that's what we are going to do over here.
‫We are gonna click it.
‫As you can see, we already did actually,
‫we're gonna run it on the Emulator,
‫and you will see they will appear
‫on exactly where we have put them on the screen like this.
‫Here we go. Now we have a working app.
‫Of course, we haven't written any code yet,
‫so when we click on this, nothing happens.
‫That's what we are gonna do in the next lecture.