Get Started with Canvas API in Jetpack Compose

salum friends and welcome back to the channel my name is shus and in this video I'm going to show you how you can get started with the canvas API in Jetpack compose let's get started so I'm having simple compose application and I can directly start with the canvas API so you can call canvas composable function and this function takes modifier of course let's pretend we do have a modifier and Lambda to draw stuff you can delete it here and have it like f you notice that we have a draw scope here it means with this scope we can start drawing stuff on the canvas right for example you can start with the draw and you can see all the available options you have you can draw path OV images circles rectangles for example and so on but first how this is implemented actually You' be surprised that it's simply spacer with the modifier that is called Draw behind this is the actual modifier that is doing the big thing okay and here in this modifier you can see it is given us scope of drawing here in the scope of course you'll have access to everything you saw like Drawing the Line and everything and there is basic implementation that is called canvas the draw scope okay this is the thing on how it should work all right so we don't care here but this is the thing if you want to draw something let's say you have a component and you want to draw something behind it for example let's say add lines or stuff like that you can use this modifier this is great big modifier nice so we can start drawing things let's try to build a house as an example you remember when we were in the primary school and you told to create house draw house are going to do that in compose compos primary school so we can start after doing this fill Max size right we can start by drawing a simple rectangle right here is you can draw rectangle with this color and this offset like with the offset which is at the top left make sure that in compose and this drawing library is that X and Y Z 0 start here right so this one is X and this one is uh y right and here is the positive value and here we have positive value so positive values are like that make sure to understand that because previously in the math they were on the other side like X is here well the positive of X is here but the positive of Y it was up there so make sure you understand that then since we are in this draw scope you can use the width and you can divide it by four for example height and divide it by four and you can see this is the top left it is here in the height and it is taking fourth of the screen if you divide the screen by four like that right you understand that this is the from there we can decide that this is the size for our thing this is just basic calculation right and then let's pretend you are going to create kind a triangle above it right you can't create a triangle there is nothing as draw triangle we don't have that we have triy text but what we have we have something called path right you can create a path on your own and connect the dots and then T compos draw it that's why you have something called Draw path right but before that let's create an Android path it will be the roof path like the following and then here we can do some kind of apply and there you can start doing stuff you can move to certain X and Y that's first thing I'm going to move to this point so I'm going to past the same offsets here right this is the first X and Y now I am at this point I'm not starting yet I'm going to create a line from this one so it will be like the following then another line and simply then simply I'm going to do close this will create the path so what will happen going to draw this path the path it will be path the thing then we need a color I'm going to choose a blue color like we did and this will draw a blue color as you can see here is the rooft so by default the sty is filling with the color what we can do we can change the style in order to make it only a stroke I don't want the full color right so I can use something called stroke like following and here I can provide certain values for example I'm going to use five DP and then from this DP you can convert it to pixel like following here you go here's the thing but you notice that there is an actual missing Point here so this is due to the size of the stroke but it's fine for the moment and then of course you can draw other stuff for example you can draw door windows for example you can draw background circle of the sound for example the old picture we have been drawing right you can for example add background well here you can add background you can start by doing draw big rectangle right rectangle like following and make sure only to give it the size to be the size it will take the full composable and here of course you have just to give it a color for example you can give it a color of for example s and this will draw a big S color in the background right you can also for example draw like a sun here can do it with the draw uh what you call it uh Circle right draw Circle and then you give give it parameter like the following for example with radius color and offset this is particular simple Offset you can choose you can also do it on z0 that would work so the center of it will be immediately here and you can see we can draw stuff now of course it involves some kind of math and sometimes for complex screens to devolve complex math for example especially with drawing with coordinates right at the end of the video I'm going to give you two exercises you can Implement on your own with the solution of course so you can grasp this a faster there is nice article I read in which the author was drawing social media icons right you can see it here this is the article by FAS com you can see he's drawing all kind of components for example he's drawing this Instagram stuff then he's drawing Facebook this is really cool exercise you can check it on your own with specific stuff for example drawing curves like that involve busier like this is the path right if you remember I'm going to show it to you this is simply the path here we have path using different path and you can see simply moves cubic cubic cubic this is the cubic stuff right there is quadratic and you can see with the draw Circle path stuff like that you can come up with big really complex thing such as this one right let's try this Instagram because Instagram is cool yeah this one you can see he's creating a rectangle and then for this rectangle specifically he's using different brush which is gradient right this is the cool thing let's try to implement this Instagram stuff so you can see here is the X and X we do have this kind of rectangle and you have this kind of circle and another Circle they are basically rectangle circle circle it's so easy so let's try to implement it let me delete everything from here now for the first step we limited the canvas to this only 100 DP right and then we can start drawing stuff we are going to start rounded rectangle right and here we can specify certain things first we can specify what is the color for example I'm going to use the red color for example as first thing and also I'm going to select this style since I don't want a full icon exactly as you can see I want just a simple stroke okay and this stroke need to be a little bit big so are going to use 15 as the author is using Okay so this will be the first step in order to create this one now you can see we needed rounded stuff so here you can use Corner radius and of course Corner radius you have to provide some Corner radius right and we can provide 16f as the author is using so this one will create for us this thing rounded stuff now for the color it isn't exactly red it is gradient as you know in right so here in the color we are not going to use a color are going to use a brush you know brush so here you can specify brush equal and you have to remove this one because this draw rectangle has two signatures one of those is brush and the other is color okay and here in order to create this thing you need to import from the brush there is lot of brush you can use radial gradient vertical gradient you are going to use linear gradient and you can see it's taking a list of color so we can create the list of color from here and the list of color will be simply yellow red and magenta as the author is using for sure it will draw that stuff exactly as you can see this is pretty awesome that's the first thing now we need another Circle exactly at the center so we can draw circle from here now for the brush we are going to use this same brush so I'm going to take this brush right extract it you can extract it with control+ v like following and it will be extracted like that brush so you can use it here with the brush okay that's the first thing of course the radius is too big so we need to control the radius also so it will be 45 this will impact it nice and of course we don't want full circle like that we need just stroke so we are going to use the same thing here awesome we need only the last one which is another Circle let's copy and paste this one so this circle it's a little bit smaller so it will be for example 12 or 13 as the author is using but now we want the position now we don't want stroke it will be the full color the full brush of course so here you can pass the center from where is the center of this one it will be an offset and you can pass the different stuff now in order to control it he's what the user is using he is using percentage right so this one for the X it means we are in the width we are taking almost 80% okay so what going to do we are going to take the size property and take the width and multiply it by 80% this will be the X the same thing for the Y it will be around 20% this is the values picked by the author of the article of course here it will be the height instead of the width and here it will be just 20% so it need to be here and there you go here is the Instagram log okay so as you can see you can draw anything you want right so the first exercise for you in order to get cool with this API is to draw the remaining icons this is one thing and the other thing which is a cool composable also which is the following speedometer with compos right you will create this full thing this is really a cool one and it involves some kind of not complex math it's if you remember polar coordinates right in order to draw this line with this inclination so this is really cool the author provide the solution and step by-step stuff so this is really cool in order to create you can see like there is some kind of math involved in here but it's not something big it is high school math of course you can copy and paste but at least you understand what you are copying and pasting another cool composable you can create which is this one this involve some random letter switching this is really cool One is using the draw behind modifier it's a little bit complex but you are going to learn a lot from such a thing this one is combining many stuff from the canvas API which is the draw behind and also some layout stuff so this is really a cool thing in order to learn more about compos and its API okay so this it for this video thanks a lot for watching this video to the end don't forget to subscribe to channel and always see you in the next videos Sal

Channel: Charfaoui Younes

Views: 569

Keywords: android tutorial, android clean code, android model view view model, android mvvm, android, studio, development, dev, app, data, views, jetpack, library, explained, explain, how to, guide, tutorial, kotlin, java, mobile, splash, screen, fetch data, network, animate, animation, compose, api 31, api, android 12, api 21, splash screen, android splash screen, splash screen android studio

Id: NAKOhe4bpT0

Length: 11min 36sec (696 seconds)

Published: Tue Mar 05 2024