How to make your first app?


And now we are going to expand the build pane and we’re going to wait for all the tick marks all right everything’s done successfully it’s installing our app on our phone and launching the app and now let’s start the app function and oh watch this you notice something that the image has stuck to the top left of our screen so this extra white portion is because that’s part of the image but it’s stuck to the top left but Rohan didn’t we keep it in the middle well that’s a quiz question so what exactly should we do so if you attended last week’s session you can think about it I’ll give you some time we have figured it out yes constraints.

So now you see these uh circles here they are empty and if you see this error response message here it says the view is not constrained so it will directly jump to zero commas zero which in computer science all screens for 0 0 is not here as in math or science it is always the top left hence our image is jumping to the top left so now to keep it centered select the image and center it within our screen so constrain the top to the top-bottom to the bottom so now it is pulled equally from both directions vertically so now it will be centered vertically now center it horizontally as well so now it is centered uh it is being pulled from the right and from the left there’s a question somebody’s asking uh flutter extension here isn’t is there a flood extension I’m assuming so a good question so this is like completely native development.

So we aren’t going to use like anything related to flatter here um you can build android apps with flutter of course that’s a very good technology but this whole uh 10 week session is going to focus on native development but a good question right uh perfect so here we have constrained our image uh horizontally uh so it’s being pulled from the right and from the left with equal amounts pull from the top and from the bottom with equal amounts you can always change the bias by clicking on the image and pulling it more from one direction and you can mess around with these double click to reset it to 50. now you might be asking like why we have to do these constraints so.

I’m sorry to bother you there’s another question uh somebody’s asking what type of image what image types does android love very good question so here i didn’t mention it as such let’s uh it’s best to always stick with inflation types like jpg and png and any usual image types sometimes if you download an image from google sometimes it returns something called a wb w ebm format format image or something wbp so be sure to download something that’s like this may not always work in android studio so the usual formats like jpeg and png’s work all the time so it’s best to stick with that very good question that’s good so next here so perfect so now we see that our image is centered however we didn’t even go into why are we constraining our views on our screen now this is something we’re going to talk about in our layout in our preview pane you notice at the top it says pixel.

So click on it and here it shows you all the devices that you can use to show your preview here so um now it’s a 5 inch screen it’s a pixel now what if you go on a taller a 6.3 inch pixel 3 xl you notice now the image is still centered let so it’ll be more apparent when we choose like a tablet that’s even more wider you see 2560 times i mean this you see now it is still centered so instead of specifying absolute values like if you if you always build your layout for this phone and specify keep it like 50 pixels from from the left and 50 pixels from the right it centers it but the thing is when you go on a larger device then it will uh give you problems so that’s why we use constraints so always constrain our views very nice now if you look at our layout the thing is this image it takes the entire screen.

So now we’re going to talk about these things wrap content and match constraint so let us go back here and now you notice this width and height so now we want our image to stretch all the way towards its constraints so you can specify absolute values such as how we did here right changes it here or you can use something called match constraint so your width of this view match constraint it now stretches all the way to the end of its constraints and it says zero but it’s technically mass constraint now for height choose match constraint so it will stretch all the way vertically and now you have stretch all the way vertically very nice now so i hope all if you’re here and yes malusia and judas at any point uh any questions uh.

So please interrupt me i’ll be happy to help so um i assume everything’s all right so far so now we have our image that’s ready however these white corners at the end it doesn’t look very beautiful like i selected match constraint so why isn’t the image stretching all the way to the edges of our container now that’s a very good question and that depends on what kind of image we have downloaded so let us double click on this you notice this this image is much more taller than it is wide this is the actual aspect ratio of it so here it is trying to fit in fit the image within a container now we want to get rid of this white this white borders it doesn’t look really good so now we’re going to learn a new thing called scale type so let us see what those are.

So our scale type so images don’t always fit in the containers sorry got you off rohan absolutely is there a particular size that that we should consider when you’re adding an image because if you have a very small like 50 by 50 pixel and it’s just not gonna look too well right absolutely absolutely very good question so uh this we always prefer to use like larger images that you can scale down because when you scale down an image it doesn’t uh everything is still clear however if you if you have like a really small image like as you just give an example a 50 by 50 and if you expand that image to fit the size of this container then it gets pixelated.

And you you can actually see the individual pixels and it isn’t clear so always we should try to use like larger images so a trick on google is if you are here then you see like uh there’s a place where uh shows similar this uh you can mess around with these settings and it’s a favorite it shows you all the available pictures on the internet of the same image and with different dimensions so there’s a way to do it you can see that but yes the answer is always try to take a big image that you can scale down good question so now in our image scale types when our image doesn’t fit in our container we must scale the image as you just said if our 55 50 image is too small we must scale it to be much larger to fit in our container and so it doesn’t give that uh very ugly white borders at the end we want our image right the beautiful colorful image to fill the whole container