Build a Beautiful 3D Bar Chart in Jetpack Compose using Canvas - Android Studio Tutorial

what's up guys and welcome to this video about such a beautiful three-dimensional bar chart in chapter composed using canvas after this video you should be able to build such a bar chart on your own and also modify it for your own needs and let me quickly zoom in a bit as you can see we can also enable or disable the description so if you prefer this kind of view then you can turn off the description or you can also of course turn it on all right okay I'm in an empty chat with compose project and we will also launch the app multiple times so that you can always see what frequently drawing and first of all I want to add some colors here in the UI theme color file and you can get this colors from my github's repository which is linked down below or you can also simply use your own colors then back in our main activity we will first remove the default stuff and create our data class for the bar chart inputs you can say data last and normally I would put this in a separate file but I think for the tutorial it's fine to put everything in the main activity kotlin fire bar chart input and this takes the value of the bar chart element description of type string and also a color of type color and then we can create our bar chart composable which will contain different bars and we will make these bars also compose the builds so a composable functioner which we will call bar charts this will take an input list of type lists of type bar chart inputs and then it will also take a modifier and to show description Boolean which indicates if we actually should show the description in our case in this example the different programming languages names our bar chart will be a row and this row takes our given modifier and it has also a vertical alignment and we will set this alignment to bottom because the bars are sometimes in a different size or almost every time and we want to align them at the bottom so that's they start from there and then we have also a horizontal Arrangement and the arrangement will be a space between then we can open the row scope and first we need the sum of the values of all bar elements because we want to make we want to determine the height of the different bars depending on the relative amount of their value to the total value right we can get the sum by remember because we make this a state so that it is not always calculated when a recomposition occurs and we say multiple state of input lists a sum of and we pass its dot value and then we can go over our input list input list dot for each here we get the input element and first we need to calculate the percentage the relative amount of the value to the our list sum is equal to input dot value divided by list sum.2 floats and now we have the percentage value of the value of our inputs let me quickly Define our bar composable so that we can already invoke it from our bar chart and then pass some example values from our main activity so that we can then launch the app multiple times to see what's currently going on we will say composable function bar this will take a modifier and the primary color will be of type color the percentage will be your type loads the description of type string and we also pass this show description Boolean here we will invoke the bar composable inside our bar chart composable then the modifier will be modifier and for the heights we say 120 DP multiplied with our percentage value and if we would do it like this then all the bars if we have for example seven or eight bars will be very very small and this is because they share the percentage and most of the bars will only have 15 percent or even uh eight percent seven percent and no bar will be really tall and for that to uh kinda compensates this we will also multiplied with our input list dot size so if the size of our input list increases we will also increase the high a little bit so that the bar chart has taller bars even if the percentage is shared between a lot of input elements and then we also have the width we will just set the width to 40 DP and you can of course play around with this values and also make this for a responsive view of course but I think this would be too much for this video so I think 40dp is okay the primary color will be our inputs.color for the percentage we will pass the um percentage and then the description will be our input dot description and for the show description we also pass um the show description which we get above in here in our main activity I will then copy and paste some example values you can get them from my github's repository or if you want you can also type them off but I will go quickly over them but I think this video should more focus on the bar charts drawing here and so we have in our main activity a mutable state or show description if their description should actually be shown or not we can toggle this value now with a little switch then we will have a box which sets a background color builds the mix size has some padding the content alignment will be top Center in here we then have a column uh which also puts the max size has sent horizontally and spaces its items by 20 DP then we have the text for the preferred programming languages and some text properties set and then we invoke our bar charts and we pass seven values here we have kotlin Swift Ruby Cobalt C plus plus C and python as the different bar chart elements and this elements get compelled so which is the preferred programming language and the bar chart will fix the fill the max web and we pass the show description State down and then we also have a row here for our switch the text of this row is show description and with the switch we can then toggle the show description Boolean and indicate if we should actually show the description of each bar element or not and here are just some switch colors okay and then we can start down here in our bar composable and start defining how the bar should actually look like in here we will have a box because we will draw Inside the Box this box takes the modifier so that the canvas can fill the max size and the size of the canvas will then be what this modifier contains the content alignment will be set to alignment Dot Center and after that we can start with our canvas the canvas will have the modifier as I already said which fills the mix not with the max size then we can open the canvas draws go and I think he's a little typo and let's import the canvas and then we have the draw scope in this canvas raw score we now need to Define some values which helps us later when calculating the different Paths of our three-dimensional bar because each bar will have three different rectangles which we can't use the draw react for we need to draw the path on our own and for that we need this values we will Define now and they will make the life easier for us we will first need the width of the canvas which we can get from the canvas size that will then we need the height which we can get from size dot height and then we need the bar width the bar with will be our width divided by 5 multiplied by three I will explain this soon we will do the same for the bar Heights which will come from our Heights divided by eight multiplied with 7. after that we also need the bar height a 3D Parts is equal to Heights minus bar Heights then we need the bar width 3D part is equal to width minus above multiplied with Heights multiplied with 0.002 f all right okay now let's explain this all right okay I have drawn this little example here for those who are interested in what's this value is all about if you are not interested in you can also skip this it takes around 90 seconds as you can see in the picture on the left we have the total height and the total width which are those two values in Android Studio the canvas Whip and height and depending on how much we wanna make this three-dimensional how much we want to show the top side and the right side we will divide our width and our height by this values so the divided by 5 multiplied with three or divided by eights multiplied with seven because um if you change this value then you will make this bar with and bar Heights larger and you will shrink The View on the left side and on the top side and you can play around with this values it gets super clear if you just try this out and then you can see it and I've just experienced it a little bit with this values and for me this values are really fine and making a really good look and then we also have the bar height 3D part which is calculated from our high minus our bar height this is this tool Arrow here this double arrow up here and then we also have the bar with a 3D part and this is Multiplied with a little bit of a modified version here because I have experienced that if we would just use the width minus the bar width like we do with the bar height 3D parts then this would not look that good when we have small bars because this small bus would also get the same 3D it like the big ones like the tall ones get and then um yeah this would not look that good but I just recommend you to play around with this uh things will get super clear if you try this on your own and yeah I think this is enough of theory now let's add while all those paths the first path we want to draw is the path for the two-dimensional view rectangle if we would be only interested in a two-dimensional bar charts then this path drawing would be enough and we can achieve this by our path is equal to a path apply and in here we first need to move the cursor where the drawing should start we will say for the x value 0f and for the Y value we will say Heights because let me quickly show you this on the picture I hope you can see my mouse it's I hope it's not too small the canvas 0x and 0y is at the top left where my mouse actually is and we want to start drawing at the bottom left because we want to draw this red rectangle so we move the curther to the bottom left and from here we can start drawing now and the bottom left is also our canvas height because as you can see this double arrow is our height let's go back to Android studio and draw the first line we will say line two bar width and we also pass the height because the height stays the same let me also go back to the picture I will just show you this once and after that we will continue drawing but I think this is important to understand otherwise you would just type this off here we had to move this cursor down here at the bottom left and now we will draw this line where my cursor is now and this line is for the x value our bar width because as you can see here this double arrow for the bar width and the height stays the same so we again pass the height for the Y value let's go back to Android Studio we say another we set another line to the bar width Remains the Same but this time for the Y value we have our Heights minus our bar Heights let's go one last time back to our picture we well at this point the last time and we want to now draw the line up here and the bar width is fine but now we need a new value for the Y so we have the heights minus our bar Heights because as you can see here the double the large double arrow for the height minus the bar Heights is this point here because you need to think of the start of the canvas is at the top where the Y value is zero so the difference between our height and the bar height is this point here okay I hope this got clear and then we set another line 0f and we say height minus the bar height so we are at the top left and for the last line we can simply call close and then canvas does the rest for us then we can say draw path we pass our path then the brush will be brush dot linear gradient and for the colors we pass a list of colors and the third color will be gray and the second color will be our primary color then we can launch this and have a look at the different bars and I think it looks quite cool so far as I already told you if you are only interested in the two-dimensional bar charts then this is enough and now we will draw the additional two rectangles which will then cause the three-dimensional view then we can again say path is equal to path dot apply and we move the cursor this time to our bar with and for the Y value we will say Heights minus bar Heights then we will draw a line 2. Above This 3D Parts Plus bar with and for the Y value we will pass zero then line two bar with 3D Parts Plus power and for the Y value we will say bar height and the last line will be set to our bar Whip and for the Y value height and then we can again say close and we can copy and paste this raw path and paste this down below this time we switch the gradient colors because then we get this real three-dimensional view because the color of the color differences then we can start and have a look again and as you can see we have drawn the right rectangle and this looks quite cool so far and I would also like to show you um what happens if we wouldn't use this multiplication here because this kind of looks totally random but let me quickly remove this and start this again then you can see if you have a closer look that like this um on their large bars the tall bars it looks quite cool but on this small bus the The View on the right rectangle is just two big we see too much of the right side here and yeah we can avoid this with this multiplication let me quickly start this again and yeah then you can see it really looks better now below our last true on path we can then draw the build path is equal to path dot apply again remove the cursor this time to zero app and our bar Heights the 3D parts then the first line will be set to bar with and bar height 3D Parts the second line let me scroll up a little bit will be set to bar with plus bar with 3D parts and for y we pass 0f the last line will be drawn to bar with 3D Parts and four wires 0f as well and then we can close it and copy and paste the draw path again and change these two colors here to create an orange in this order and then we can start it again and have a look at our different bars and yeah I think this looks quite good and yeah I choose orange here this was wrong and of course this needs to be the primary color and then the top side should be also in the same color than the rest okay this looks fine so far the only thing that's left is the percentage drawing at the bottom and also the functionality to show the description of each bar element we need to use the native cameras for drawing a text so we will say draw context.canvas.nated canvas dot apply and then we will invoke this functional draw texts and first we will pass the text which we will get from our percentage multiplied with 100 round this to an integer and then we append this percentage sign then for the X positioning we will say bar with divided by 5f and for the heights we will say height plus 55 F also these are values I played around with if you want to make this responsive then you need to apply additional logic but yeah this is also possible then we say androids.graphics dot paints dot apply and for the color here let's invoke it like this we will say byte to our GB the text size will be 11.tp dot to pixel and we also make this bold with this property parameter then we can launch this and have a look at the different percentage texts yeah I think this looks cool the only thing that's left is our show description functionality we will show the description if this Boolean is actually true and we again need the native canvas for drawing a text we want to rotate this text so that it is not shown horizontally and for the decrease we pass minus 50 F we also pass the pivot and this will be an offset and the offsets x value will be our bar with 3D part minus 20 and the Y value will be 0 f and then we can open this rotation block and in here we can then draw our text we will say 12 text for the text we will pass the description the x value will be 0f the Y value will be also 0f and then we again need the Android graphics dot paint version and say apply the color will be white dot to RGB the text size will be a little bit bigger 14 dp.2 pixel and we also make this bolt and this should be it we can try to start it and check if the functionality is also working and the show description is turned off by default when we turn it on then you can see let me zoom in a little bit that they get drawn very nicely above each bar and we can also make them invisible and visible again so I think everything works perfectly fine all right okay this was it for this video I hope you enjoyed it and you can apply this bar charts which is really cool I think on your own projects and also let me know if you are kind of modded by it and make a better version because this is a basic version this can be expanded and modified in so many ways so it would be really cool if you have some additional ideas and use this as a basis and then do your own thing and your own Logic on it

Channel: K Apps

Views: 2,231

Keywords: Android, AndroidStudio, Android Compose, Android Jetpack Compose, Android Canvas, Jetpack Compose Canvas, Compose Canvas, Android Charts, Android Studio Charts, Android Studio Bar Chart, Android Studio BarChart, Jetpack Compose BarChart, Jetpack Compose Bar chart, Kotlin BarChart, Android Kotlin, Kotlin Bar Chart, Android Studio User Experience, Android UX, Jetpack Compose Design, Jetpack Compose User experience, Jetpack Compose UX

Id: AxTUSBg1tRg

Length: 21min 6sec (1266 seconds)

Published: Thu Nov 03 2022