Jetpack Compose Canvas UI Challenge - Draw an animated Water Bottle

hey everyone welcome back to new video on land of coding in this video I'm going to show you how to implement this water bottle UI injectable compose and we're gonna animate this so let me show you how that's going to work as you can see we have the shape of a bottle and we have this water then we have the amount of water we have in this bottle then we have the total amount that this bottle can have so now if we click on drink as you can see we raise the amount of of the water inside this bottle with nice animation for both the text and the water so as you can see and when when we just exceed the half of the bottle we change the color text to White and we're gonna Implement all of that okay this sounds very exciting so let's actually get started so now I'm inside an empty composer project and we just want to create a new file here and call this water bottle okay so let's actually add this to get yes and let's create a composable function for our bottle and call this water bottle so for the parameters of this function we want to allow the fire to control this one this composable and we can assign a default one and we want the total amount the total water amount so we can get that in here and this is going to be integer and we also want the unit of the water so that will be a string we want the used water amount and this one will use to just calculate the percentage of the water I will do that logic later but now let's complete with the our with the parameters now here we want the color of the water so watercolor and we can make this color we can give this a default value and I will just select this value then we want the bottle body color so bottle color and I will make this white and we also want the cap color this will be blue but another level of blue and I will make this a dark blue color make sure to just choose any value you want here but I just like these colors for our design okay that's it for the parameters now let's actually start drawing the bottle shape okay now how do we achieve that how can we draw the bottle obviously we can do that with boxes and rows and all of these default composables because we have just a strange chip the water is just different shape from the box and the other layout we know for that we want to draw our own uh our own UI using canvas so canvas is an API that allows you to draw custom shapes and it would be perfect for our use case so we're gonna use canvas now and before anything I want to wrap the design or the bottle with the box and we can give this the default modifier we can just assign default width and height so let's give this 200 DB of height of 33 and 600 DB of height let's import DB and then we can just create our canvas inside here so we have the canvas composable function and here we want to fill the max size so modifier dot fill in Max size on the draw we can delete that and just open color brackets like this and here we have this draw scope which allows us to draw many shapes so if we type withdraw as you can see we can draw rectangle we can draw an arc we can draw a circle image line oval path uh points we can also draw text and we also can draw images but before we start drawing we want to get the the maximum height and the maximum width of of this canvas so to do that we can see width equals to size the 12th as we want to get also the height size the type those values will be used later and now we can actually start drawing the body of our bottle so to do that we want to use a path now we can say Val body path or I would say bottle body path we can use path and we can say apply in here we Define what this path looks like now we can actually move this path to a specific point we can make a line from point to point and we have so many options for this path okay so let me show you the bottle as you can see now what I'm done what I'm gonna do is to move this path to this point and then draw uh the bottom starting from this point so we will move this path from to here then we'll draw this line then we will draw this uh curve and then we will draw this line we'll draw this little curve at the bottom we'll draw this bottom line and we'll draw it in this curve we'll draw this vertical line we'll draw this curve and we just draw this one and then we close our path so to move our path to here to this point we can just use move to the X point would be a width we multiply that by 0.3 and for the Y value that would be the height and we multiply that by 0.1 okay now we want to draw this line this one so let's actually say line two and for the x value that would be width we multiply that by 0.3 and for the Y value height we multiply that by 0.2 we need to make this float okay now what we have done is this part we have uh drawn this line now we want to draw this curve so how do we do that in path we obviously can't do that with a line because we want this to be a curve so we can use a function called uh quadratic bezier 2. let's use that and here you need to specify basically Four Points uh you need to specify X1 and this would be the point where you want to make the curve to so in our case we want to make the curve up to this point and let's pass that so that would be zero f and for the y1 value that would be height multiply that all point three f for the X2 and Y2 that would be the final point where you want to draw this curve so as you can see we want to draw it to this point so we will pass the coordinates of this point here so let's do that so X2 here would be zero f and Y2 would be height we multiply that by 0.4 f okay so now we want to draw this vertical line from here to here so let's do that that would be line two X would be 0f and the height here would be height and we multiply that by 0.95 now I mean y not tight okay now the same thing we want to draw a little a little curve here this one so let's just copy this function paste it here and we want to change X1 so in this case X1 it will be zero f um this would be height so the curve point would be here that's what type is then we want to pass X2 so X2 would be wet we multiply that by all Point O five and for Y2 that would be the height okay let's keep on now we want to draw this bottom line let's do that copy this line to paste it here so the width would be width multiply that by 0.95 and for the Y value that would be the height now we want to draw this curve so we can copy this we're just gonna do the same thing but we want to change the coordinates so for X1 would be wed for y1 would be the height or X2 that would be the width and for Y2 High to multiply that by all point nine five F now we want to draw this line here so that would be line two X would be the width and the Y value here would be height and we multiplied that by 0.4 now we want to draw this curve here so let's just copy this paste it here and for X1 now that would be the width for y1 height and we multiply that by 0.3 f um for X2 that would be width multiply that by all point seven f and for the height here multiply that by 0.2 F okay now we finally want to draw this line so let's do that you can see a line to width would be or the x value would be width we multiply that all point seven F and for the Y value height times 0.1 F and finally we close our path okay now let's actually call this one from the main activity to see what it looks like so let me just create a column here and let's add a modifier of this column to modify the fill Max with or for the next size horizontal alignment make this Center horizontally and vertical Arrangement make this Center then let's call the water bottle here and let's just pass any values here 0 unit pass empty string use demand quarter past zero and let's launch the app okay so as you can see nothing is shown the reason is because we have not drawn this path yet so to draw this path okay now we can call draw path but that's not what I'm gonna do instead I want to call it clip path so clip path is a function that will basically cut off anything outside of your shape so let me go back here as you can see if I click it drain go up as you can see the water doesn't go outside because we clipped that path so anything goes outside of this path will not be drawn that's why we want to clip our bottle buddy path so now anything you draw inside this JavaScript would be inside the bottle body path even if it's a size larger than that so we can just draw a rectangle for our background of this uh shape we can make this bottle color size is the maximum size and top left yeah that would be by default value 0 and 0. let's see our app and as you can see here's our bottle um it looks as we actually expect now we can of course from the main activity we can just change the width and the height of this so let's actually that's modifier we can actually change the width to 300 DP for example and as you can see let me make this 250 and let's get back here now next thing is to draw our water so let me go to the app and as you can see we'll draw this water uh we can do this we can do that inside the path inside the clip path here because as I said we want to cut off everything outside of our path and let's actually do that in here and before that we want to create or we want to calculate the water percentage so let's go up here and let's create a value water percentage and we want to animate this value so we will use animate float animate float as a state for the Target value that would be the actual water percentage we can calculate that by the used water amount we convert that to float and we divide that by the total amount we have so total water amount and we convert that to float now here we want to pass a label and this label is just a string to tell you why you use this animation uh so we just want to animate the waves we can say animate waves or water waves animation and now we Define the animation spec in here we'll make this twin and for the duration let's make this one second now we can just save value we get the value of this and let's go down here to just draw our water so we want to calculate the Y position of our water and we will create a new value here we say water waves position the Y position because as you know whenever we drink or whenever we click on a drink we want to change the white position and here we just calculate that so we calculate it and we calculate this by one minus water percentage and we multiply that by the height of our bottle so size dot height and by the way I added this 1 minus water percentage because we want to draw the waves or the water from the from the bottom starting from the bottom now we want to create a path for the water so let's say waves or water path and we can say path apply um we want to move this to X would be zero f and the Y value would be water waves y position now we want to create a line X would be size to 12. so we basically just uh drawing a rectangle here but y would be size the tight now let's draw another line here X would be zero and Y would be the size height then we can just close our path and here now we want to draw this path we can say draw path for the path that would be the water path and for the color we want to make this the water color Okay so let's actually go back to the main activity and let's actually here let's just increase this uh total amount for 2400 and they used uh water mount we want to make this 400. let's see if we can see the water and we should be also okay uh we're missing a line here let's go back to our water bottle let's see what line we are missing okay so here we are missing a line we're going to add that size the 12th and the Y would be the water waves position okay let me just to relaunch that and as you can see here's the water but now we want to also add a button to animate this and to test the animation so let's do that here so let's just add the spacer and give this height of 20 DB and let's add a text to show the total amount of water and let's create a state for that so I would say VAR used amount by remember and I will make this state initially let's give it 400 and I also want to make Val total water mount we remember this value and we give this 204 2 400. let's pass these in here and this would be the used amount and let's just pass the total amount of water here then we want to create a button so only click every time we click on that we just want to increase the used water amount by 200. and let's add a text for our button and say drink so here we want to make this equal we I forgot to add the equal sign let's relaunch the app and click on a drink and here you go so we have this nice animation for our water okay let's get back to our UI and now we want to draw the cap it's very easy for the cap we just uh in here we can just say draw round rectangle for the color that would be the cap color uh for the size we want to make the size of uh let's actually create two values here we can say cap width we make this size the width now we multiply that by 0.55 f for the cap height size DOT type I multiply that by 0.3 F you can use these values but I just I I found them uh fetch our design now let's pass this in here cap width and cap height okay now for the top left so the top left here determine the top Corner coordinate of your field rectangle so we want to make sure to show this uh cap in the center so the edges of the cap would be equaled from the left and from the right for that I made the simple calculations here so we need to pass an offset first uh for the x value that would be the size that width multiply that by 2 minus kept width we divide that by 2f uh for the Y we test zero f now for the corner radius let's pass 45 f for X and Y now let's see our cap and as you can see this is our cap okay so finally we want to draw the text so let's do that and if you can notice that in the text we have the we we have two sizes in our text a big size and a small size and in compose we can just do that with build annotated string so we can say text build and look at string in here we want to append two Styles the first one for the big uh style let's pass style span Style and for the color so when the water which the half of the bottle we want to change the color to white so in here we want to make a check if water percentage larger than 0.5 F then we want to make this the same as the bottle color else we make it as the water waves color or watercolor for the font size make this 44 SP now we can open color brackets to aband the string so in here I'll be color bracket we can say append and we want to obtain the used water mount to string now we can copy this style and let's paste it down here for the font size we want to make this 22 and we want to append a space first then we want to append the unit now we want to place this text in the middle of our bottle we can do that in here buy a box we can say modifier.fill Max size for the further counted alignment we make we want to make this Center and finally we can say text and we show our text and that is it now let's launch the app let's click on drink as you can see the amount here increases if we reach them the the health amount of the bottle then we change the color to white but this looks dry because we don't animate it so let's actually add a little animation to our text in here we can copy this and we can paste it in here we can name this used water amount animation and for the Target value let's make this used water amount and let's make this float for the label here let's also just change that to used water amount animation now we want to replace this value here by our new animation value let's see our app finally and as you can see okay um we wanna actually make this integer so let's say animate integer as a stead and let's remove this to float let's realize the app and here you go so this looks actually as we expect the unit is not shown here because we are not passing it so let's just pass Mill later and let's see it and here you go click on the drink and everything just works as expected okay everyone so that was it for this video If you find these type of videos helpful then make sure to like And subscribe to my channel you can also join my Discord Community the link in the description I hope you have a great day and catch you in the next video [Music] thank you

Channel: Land of coding

Views: 5,544

Keywords: Land of coding, Lofcoding, Android, ui, canvas, drawing, shapes, animation, compose, custom, path, draw, guide, tutorial, curves

Id: vmT0SScA2lA

Length: 23min 22sec (1402 seconds)

Published: Thu Sep 07 2023