Loading Images - everything you need to know - Jetpack Compose #7

hey guys welcome back to an new jitpack compost video which is about everything you need to know about images from loading local images to remote images icons handling States like if your image didn't load or if your image is still loading what you want to display instead of it so we'll see all of that and we'll cover all of that in this video so let's get started okay here we are in underw studio and the first thing we'll see is just if we want to load a local image that we have in our project so as you can see if I go to my drawable I have this image here it is and I want to display it for that it's really easy I'm just going to use an image composable and I want painter or also I can use bit map if I have a bit map and we'll see what image Vector as well in a moment now let's start with painter which is the one that we'll use the most okay for that we'll use a painter resource and then we can actually use our image by writing r. drawable do image for the content description we can either leave it null or write the description of our image in this one is for accessibilities so if someone can see fine and this content description can actually tell them what this image about if they can see it right so we can leave it at null or we can write for example image of camera like this but please do not leave it an empty string like this leave it now or write something as you can see here is our image it's very simple we can put this image ins inside a box or something to give it some rounded Corners so for that we can just write box like this and then we'll give our box a modifier dot let's say clip round this corner shape and then 20. DP so we'll clip our box like that and then we'll put our image inside it as you can see now we have rounded corners or we can assign this modifier directly to our image like like this and then we can get rid of the box if we want to so it's still the same thing uh in my case I'm actually going to put the Mina column so you can see all those images so like this and then I'm just probably going to give it some horizontal alignment alignment do Center horizontally and then fill the max size do fill Max size like this so here is an image that we have in our project which is simple okay now what we want to see is if you want to load an image that is not in our product so an online image you can say for that we need a dependency or a library so we'll go to our grd file and I have pasted this one it's called Quail which is exactly responsible of loading images just like Glide from XML if you came from XML this is the alternative to that so in compose so we use Quil to load images and I also pasted this one which is extended icons that gives us more icons that we can use in our project so so we don't have to actually go here and then write new uh Victor asset and then import an icon no with this Library we can use all the icons that we want which is this one there are already icons but this one gives us more icons that we can use just spacee these if you want now to load an online image and to get more icons in your project and then sank okay now for our online image first when the URL that you want to load it from for that I'm just going to paste it and here is the URL so each just a gpg image nothing special and to display it and first put a little spacer to separate this one from the previous one height and then I'm going to go for 50. DP I'm going to use an assign image which is this one this image needs a model and a Content description and the content description is clear can be null or what the description of our image is and then the model and this model will be responsible of loading this image and of course this asan image is coming from the Quil library that we pasted here okay because that's the one that is responsible of loading remote images and the model now is going to be an image request. Builder and we need to pass the context to this Builder and to get context in compos we can write local context docar and then. data the data now is our URL so image URL and then the size so size is going to be size do original like this and then do build now as you can see we get an online image from this URL and it's very simple we can apply also some padding not padding I'm sorry but clip its Corners like this so it looks great as you can see we get it from this URL with quail and this is the model and right now we don't really know when our image is loading so if we for example 5 put a wrong URL then I just don't display an image there's nothing that tells me there is no image or for example if the image is still loading there's nothing that tells me that for that I'm going to load this image in a different way I'm not going to use an assign image okay and how do we do that first of all we still need this model so instead of writing it twice I'm just going to extract it from here and then create a variable for it so V model is this one and then pass it right here so model like this so I can reuse it because this is always how I'm going to load my image okay now to know if my image is loading or or it's not loaded or it's loaded I need a state of my image and to get that state I need to create it by writing V for example image state is going to be remember assign image painter and then pass in my model which is exactly that one we've created so model like this Dot State now I get this state with this state I can get my image I can tell if it's still loading I can tell if it didn't load or anything with just with this state and now I need to check my state so if image state is assign image painter. state do for example success now I can actually show my image now like this I know that my image is loaded when I have a success and I can just copy this one two more time so when it is loading and when I have an error okay so when I have an image I can simply show it by writing image and I'm going to use again painter and to get that painter I can use my image state so image state. painter to displayer content description can be null and as you can see I have my image I can always give it some around those Corners like this and then let me just put a spacer between them so this one like this to separate those two images so when I have an image I can just show it using my painter to get my state to get the painter I can always use my state to get the result dot drawable now I have my drawable dot to bit map dot as bitmap now I can get a bit map if I want that in my case I only want a painter like this and now when my image is still loading I can show a circular progress indicator that of course can also take a modifier and let's just give it some size do size let's say one handed. DP like that and then I can give it a color so we can say for example color is equal to material theme. color scheme. primary so uh if my image is still loading when an error happens so if I don't have an image then I can show an icon that tells me there is no image icon and now I want image vector and then my image Vector is going to be icons Dot and here I can get several types of icons like rounded default outlined filed anything for me I personally love using rounded ones so do for example image not supported that I don't have an image and here I can just write null now we display both of them but if I for example remove this one and then I pass a wrong URL as you can see it's to a progress bar and then when the image filter load we showed this icon right here okay since we don't want that assign image anymore I just deleted it what I can do now is let's actually make this better by putting everything inside a box like this modifier and that let's give it some size of 300 for example DP let's put everything inside our box right here and then let's give it a background so do background material team. color scheme dot let's say secondary container let's give it some rounded Corner shape let's just take it from here since we don't want it there anymore like this and then I will just make this image fill the max size and then I can use a Content scale this one is like Center crop from XML maybe that's what it's called so you have to fill the whole size of my uh container now I can align this one to the center so do align uh alignment do Center I will do the same with now the icon right here so it looks now a lot better and if I have an image then I just show it if I don't I show something like that if I have it I show it so that's how you can show images that you have locally in your device and also online images with URL and this can also be an image that you have in your device and You Get Ur to it so this is exactly how you can load it as well we can also actually something we can also write this in a different way so just a quick thing so we can write when image State and then we can use and Studio to give us as the remaining branches so when when is loading success empty error uh these two are actually the same thing so when an error and uh empty that's the same thing so for that I can use an else like this and then I can just do this with these two and now we can just take that same code from here and put it right here take this circular progress part put it when okay this one actually has to be right here and then when an error happens I can take this one and put it here it's just a matter of how you like to do that so it's going to be the same now let's run the app and see that as you can see I have an image if I put a wrong URL that's how it looks like and yes this is it for this video we show how to load images so see you in the next video and bye

Channel: Ahmed Guedmioui

Views: 543

Keywords: android studio tutorial for beginners, android studio project, android studio app development, android studio app, android studio app project, kotlin android tutorial, kotlin tutorial, kotlin multiplatform, kotlin full course, jetpack compose tutorial, jetpack compose android, jetpack compose mvvm, jetpack compose state, jetpack compose viewmodel, jetpack compose vs xml, jetpack compose app, api key, jetpack compose animation

Id: AGVVDkQpo8A

Length: 10min 58sec (658 seconds)

Published: Wed Mar 06 2024