Canvas Basics in Jetpack Compose - Android Studio Tutorial

hey guys welcome back to a new video this video is part of my new canvas course which is paid but i want to also provide you some free content of that this is a very basic video but it should give you a rough understanding of what a canvas is when you could need it and yeah just just some basics and you can see how how the videos are like in this course as i said this is a very basic video if you want to learn much more advanced stuff with canvas like how to make such a weight picker here for example a custom weight picker or this custom gender picker or just a tic tac toe game if you want to learn stuff like that and a lot more then check down the link below till sunday so when this video comes online till tomorrow you can still get 20 off of all my courses including the new canvas one then the prices will rise again and there is also no plan to decrease that and give a discount in the near future so if you want to get my courses for a cheaper price and especially the new one then check down the link below until tomorrow you can still do that and now enjoy the video alright welcome to the first coding part of this course now that you roughly know what a canvas is when you need it and how it works and also how the coordinate system of it works we can actually start learning how to simply draw some very basic shapes like rectangles circles ovals and some more you will see these all in this video so as a little recap a canvas is just an area we can draw things on and in this video we will just draw shapes and give these colors give these contours or stuff like that in jetpack compose we have different ways two different ways essentially to create an area we can draw to create a canvas the first option is the very obvious one which is just using the canvas composable so let's let's just make that our own composable here this is just an empty composed project and by the way you will also find the source code down here i'm not sure yet if i will just make this a gist because we will just have a single composable for most videos or if this will be a separate repository but you will find this down here whatever it is so let's have this composable here that we can just call my canvas and in here we will then use this canvas composable and that will give us the option to pass a modifier and for canvases we need to pass a modifier because obviously a canvas well it's an area we want to draw on and that area needs to have some kind of size so what i will do is i will attach a modifier here the compose one and i will say let's just uh not like this let's just give this a little bit of padding like 20dp we import dp here and then we give this a size of let's say 300 dp so our actual area is a square that is um 300 db wide and high and just giving it a little bit of padding so we it doesn't start at the very top left corner of our screen i'm just doing that because that helps you to understand how this canvas coordinate system works because that is in the under local coordinate system so it doesn't take the top left corner of our screen instead the top left corner of this canvas but you will see how this works um let's format this a little bit or not let's do it like this and then we can simply open a lambda block here and you can see it gives us a draw a scope and the draw scope is something we only have on the canvas and this gives us access to functions to actually draw on a canvas so if we just write this dot you can see we have functions to draw a line turn over an arc a circle rectangle and so much more and in this video we will go through the most important ones of these and which options you have with these but as i said we not only have this option to define a canvas of making that its own composable we also have another option that we can choose i will show you that up here and that is by simply choosing a box you can choose anything you like because what we can do is we can simply create a canvas using a modifier so if we apply modifier to this box and let's say we want to fill the maximum size and then we can say that draw behind so this draw behind function that we can apply to any composable because of the modifier also gives us this draw scope and well what does this function do we can as well just access these draw functions in here and it will draw all of that stuff behind the actual composable so behind this box in this case behind whatever composable you use so when should you use which version here if you really want to have an area to draw on and the only purpose of that area is to draw on then i will always use this canvas this is much more readable and you can decide if this is actually on top of other other things other composables or below them but if you have a composable that actually has some content and some other configuration and you just want to draw some specific shapes or stuff like that behind the composable then you can just do that with a modifier and you basically don't need this extra canvas composable in that case so yeah you can just play around with that i won't use this way of doing it here i think we will use that later in this course but for this video i will just show you this here in a canvas but anything we write in here you can also write in here so we're moving this and let's jump right into it two important parameters this drawscope also gives us is on the one hand the center um we can press ctrl q here to get more info about that you can see that is of type offset and an offset is in the end just a coordinate so with an offset we can pass an x and y value to define a specific position on the screen and yeah this center obviously refers to the center of this canvas not to the center of the screen instead to the center of this canvas and that is just very often very useful because it helps us to draw things on our screen another parameter this drawscope gives us that is very helpful is size you can see that's not an offset that is of type size and well it just contains the width and the height it will give us the the measurements of our canvas of the of the bounding blocks so in this case it would be 300 dp times 300 dp and that's also just very helpful to simply make some calculations with coordinates but let's actually start to draw some simple shapes starting with the probably most easy one is a simple rectangle and what i want to do is i just want to paint the background of our canvas in black so we actually see how big our canvas is we can do that with a simple rectangle so we say draw rex and here we can define a bunch of parameters we can give it a color for example of color.black so we draw a black rectangle then for rectangles we need to define the top left corner of that you can see that is in form of an offset and by default it's set to offset at zero so just x coordinate zero y coordinate zero and from there on we can define a size that gives our rectangle a width and a height we want to do this because we obviously want to draw this rectangle at position 0 0 because it should fill our whole area and to define a size here we can simply set this to size so this size is the size of our canvas and yeah it should be the same size as our rectangle so yeah let's take that my canvas and put it in set content launch our app and just see how that looks like now and you can see we just get a black square um if you take a look here this is because of our padding so our canvas is moved a little bit more into our actual screen and the size is 300 dp times 300 dp so this is now our canvas the black box and the coordinate system starts in the top left corner so it doesn't start here in our screens corner it starts in the corner of the of the canvas and from here we can the the x-axis increases here and the y-axis increases here so let's actually draw a rectangle inside of this box maybe just the contours of a rectangle now so let's go down here and we say draw rect another one give this maybe a color of red and now the top left is not zero anymore instead we can define our custom offset just defining x and y let's say a hundred and a hundred we can define a size let's set this to a size of let's say also a hundred f times 100 f so square and well this would simply draw a rectangle with um the color red filled but if we just want to draw the contour then we can do something we can apply something called a draw style you can also see you can play around with the alpha value so transparency color filter blend mode we will get to this later i want to apply a style now and you can see by default it is set to fill so by default shapes are filled in jetpack compose we have another option which is called stroke so we only draw the stroke of the rectangle in this case so let's apply that styles equal to stroke and here we have a bunch of options for that stroke we can define width so how wide the stroke should be and that should for example be 5f and by the way that is important to know all these values that we have here are pixel values those are not dp values so in case you have dp values then you can simply convert these if you want this stroke to be 5 dp wide you can simply do something like 5 dot dp dot 2 pixel that will make it 5 dp wide but because the stroke function wants us to pass pixel values we need to convert these dp values to pixel let's maybe make it 3dp because that is else already quite thick um we have some more options for the stroke we will actually get to these later so what these mean um i think i will talk about that more in the the paths part of this course because there we will um we can better see what these options actually do for now let's just start our app again take a look here and you can see there is our rectangle that is just drawn with a red stroke so we set our draw style to stroke so jetpack compose will only draw the stroke and not the fill okay so let's get back here and let's draw a circle so we say draw circle and this gives us similar options again a little bit different of course the circle has a radius and not some other measurements and let's say we want to give this circle a gradient if you want to choose a gradient we don't say color is equal to something instead we need to pass a so-called brush so we can say brush dot let's say radial gradient because we have a circle and here we can then define our different colors in form of a list so we obviously need to pass at least two colors here to make that a gradient let's say we want to make that a gradient from red to yellow so we pass these two colors and you can obviously pass more and these will also be included in the gradient because it's a radial gradient that one also needs a center so where should it start by default it's unspecified that is not what we want we want to set the center to the center of our canvas so that will also be the place where we draw our circle we define that right afterwards but we also want to define the radius for this gradient and setting it to let's say 100 pixels that's it for the color let's set the radius for the circle we also need that and set it for example to 100 pixels again so the gradient and the circle have the same radius and we can define the position of the circle by using center is equal to center which is already the default as you can see so we don't need this so if we now relaunch the app and we can see how that looks like and you can see there's our circle with our radio gradient which looks quite cool and obviously you can modify all of these values that we choose here for positions for sizes for radius for the width of a stroke and simply animate these by simply swapping these out with a corresponding animation state but we will get to this later in this course to actually make some cool animations let's get to our next shape which is an arc so if you don't know what an arc is that is basically a pie a part of a pie so the typical pie charts so we want to say draw arc give this a color again and you can give all of these shapes also gradients obviously but for simplicity i will choose a color here of green for we example to find a start angle so where the the part of our arc actually starts because it's a it's a part of a pi i will set this to zero f and the sweep angle is from the start angle for how many degrees we want to um draw the the arc basically so sweep angle let's set it to 270 f so we draw three corners off and of a circle then we have the option to say use center i will first of all show you what happens if we set this to true and then explain that we need to define the top left similar to the to the rectangle i'll choose an offset again of a hundred f and 500 f and we can give it a size of let's say 200 pixels times 200 pixels and then let's launch this and as you can see that looks a little bit like pac-man so the start angle would be the the zero here so zero degrees is on top here and then the sweep angle is 270 degrees so we go 270 degrees from here and until here we draw our arc now what use center does is well we use the center we connect these two ends of the arc with the center of the circle to make it actually look like a pie chart if we change this to false and relaunch the app you can see that now these ends are not connected with the center and instead with themselves you might wonder why would this be useful this can for example be useful if we don't fill the shape and instead just set the draw style to stroke so let's do that stylus stroke and we set the width to let's say 3dp again to pixels and now if we take a look back here we can see that looks kind of like a progress bar circular one so that would be one use case of an arc of course in this case you would need to animate the sweep angle so it could start from zero and animate to 360 so the the the arc is drawn from here to here just a full rotation next up i want to show you how to draw ovals so draw oval it's very similar to a circle so we say color is equal to color for example magenta here we need to define top left that's not the case for circles because an oval obviously doesn't have a consistent radius so the top left will be an offset of let's say 500 and 100 and for the size we can choose something here for example 200 and 300. and i think you guess how that will look like if we take a look here well it's just an oval obviously one more shape i want to show you here is actually not a real shape it's just a line we often need to draw lines also in this course for some practical projects we will do here we can do this just with draw a line give that a color of colored sign for example define the start coordinate of that line which is an offset let's say 300 f and 700 f we need to define the end value the end offset 700 times 700 f and a line obviously needs a width so the stroke width will be 5 dp at 2 pixels and then guess what happens if we launch this there is our line so that was it for the very basics about canvas of course these shapes themselves like we drew them here don't have any real world significance so this this app doesn't do anything obviously but in this course don't worry you will learn how you can make use of these to actually draw really cool looking things that will pimp your app to the maximum in the next video that will be a theoretical video again i will talk a little bit about the the sine cosine and tangent and the polar coordinates so that is a mathematical concept that we will need all the time when working with canvases so in case you don't know about these or you just want to refresh your knowledge from school then don't skip this video it's not that difficult there is quite a bit of math involved but the math that is involved is usually not so hard

Channel: Philipp Lackner

Views: 28,853

Keywords: android, tutorial, philip, philipp, filipp, filip, fillip, fillipp, phillipp, phillip, lackener, leckener, leckner, lackner, kotlin, mobile

Id: cCIPYW_N12o

Length: 19min 27sec (1167 seconds)

Published: Sat Sep 04 2021