Making a Meditation UI With Jetpack Compose - Android Studio Tutorial

hey guys welcome back to new video in this video we will use jetpack compose to make this kind of meditation ui that i found on a dribble so i think that looks pretty cool so we are going to make the full ui in this video which is also why this video will probably be a little bit longer it does not have any special functionality except for these simple things that we can change and select these clips um or i don't know these are called i think chips um and the custom bottom navigation you can see we can change these entries here but right now this is really the only screen that i will implement here because that is already quite enough for one video before we will jump into it i want to give a shout out to misha dupliakin i hope i pronounced that correctly because that's the guy who made that ui i just found it on dribble and i liked it so we will make this left screen of that and yeah you can see it looks very very similar and for that we will use jetpack compose so i will put this link to dribble in this video's description make sure to check it out if you if you like what this guy is doing and apart from that let's jump into android studio cannery one thing you need to do before you start with this project is to get the initial project from my github repository initial project means i already included all the resources for you you can see here the drawable folder with all the the vector graphics you can see like these bottom navigation entries here these headphones this video cam on the play symbol and stuff like that then i added a font a custom font which is not the same as in as here in dribble but quite similar and i changed some colors here in the theme folder i added all the colors we need here in this project because i don't think i need to show you that on video so all you need to do is to go inside of this video's description check out the link to my github repository and either just clone the repository or download it as a zip file and open it in your android studio canary and then we can jump right into it so here in main activity you actually don't want to do anything right now we will instead create a separate file for our home screen so the whole screen we will create in this video so let's do that in the ui package new carton class called home screen and select file here so how will we actually design this ui this is our whole home screen here the the root composable the home screen composable will just be a big box around everything it will contain this main area here that contains the content this will again just be a column so we will have one entry here one entry here here and one for the feature section and then instead of this root box we will also put in this bottom navigation view here so that it actually overlaps the the other content so let's start with that create a composable called home screen and here we create a box um that will have a modifier of modifier from compose ui import that dot background we want to give it that um dark blue background which i called deep blue from our color folder and then we want to say fill max size to just fill our whole screen and then as i said in this box we will have a column which doesn't need any parameters and instead of this column we will then just place all of our content here that is displayed in the main screen and below that column so right here we will then later construct this bottom navigation view so let's actually start with that greetings section so this top section here with the two texts here and the search button this will essentially just be a row that contains on the one hand this column here so these two texts and this icon so let's create that composable greeting section and that will just contain one parameter for the name of the person which i'll just default to fill up here so that will just be this text then we will have that row in it which will uh it will take a modifier but let's start with the line the alignment um the horizontal alignment actually arrangement it's called and that will be space between so space between will just push these two composables to the very um left side and the very right side of our whole row so that the the search button is actually on the right side and this composable this column here will be on the left side then we want to center it vertically so vertical alignment is centered vertically and we'll apply a modifier dot fill max width and we will apply some padding of 15 dp onto import dp here then we will have our column which will contain our two texts this column will be centering the content vertically so vertical arrangement center so just that these two texts stick together and in here we'll then have these texts for the first one we have good morning a comma and then whatever we pass for the name and we want to apply some styling to the text which are also already included in our theme here so this custom font that i included and to make use of that we can just use style is equal to material theme this yellow one that typography and dot h2 so that is the style i want to apply just the the second largest headline and then we simply copy this for the second text so this one here we wish you have a good day we wish you have a good day and this won't be an h2 instead it will be a body one so a little bit smaller and a different color then we want to have an icon for the search icon actually below this column so instead of our row just a normal icon here it will consist of a painter resource which we can get from our drawable input r i guess which is it oh man i have no idea which hour to import it is this meditation here youtube our own package actually we refer to drawable and i see search content description will be a search we can press out plus enter to put these into a separate line i want to make sure to give this icon a white color so tint is equal to color that white and we want to apply modifier to give it a size so modify the size let's say 24 dp and that is already it for our greetings section so we can now scroll up to our home screen and here in this column we will add the greeting section so next we have this chip section here so we have these three chips but we can actually um pass as many as we like and we're able to select these chips so this will essentially be a lazy row that we simply use to display a list of strings so let's do that down here composable um let's call it chip section and this composable will get a list of chips which is just a list of strings in our case then we want to have some state here to just um display the the currently selected chip so well selected chip index a buy remember and here we pass a mutual state off initially zero so initially the first chip is selected we need to make sure to scroll up and import two more functions here we duplicate this remember line twice and also import set value and get value and then the error is gone here and then as i said we will have a lazy row if you don't know what a lazy row is that is just a row that is scrollable and also lazily loads these entries these composables that we will now put into this row and this lazy row won't take any parameters and in here we can define an item's block so how many items we will have and which kind of items so how these items basically look like how a specific chip looks like let's do that we need to specify the count so how many items we have that is the size of our list and then in here we now define how such a chip looks like that will in the end just be a box with a background a little bit clipped and that contains a text so let's do that we have a box here with a modifier um modifier dot padding we want to apply padding to all sides except for the for end so start is equal to 15 dp chop is 15 dp and bottom the reason for that is that we want this space to be as wide as this space and if we apply padding to the start and the end then this box will have padding at the end and this box will have padding at the start which will double the space between these two items and we don't want that because that way it looks better then we make this clickable when we click this specific box and then we just want to update our selected chip index equal to it so it comes from this items scope and just refers to the current index of this box then we want to clip this box to give it rounded corners um we will apply a rounded corner shape of 10 dp and then we give it a background depending on if this chip is currently selected or not so if the selected chip index is the same as it so it's the same as the current index then we want to [Music] fill it with the how did i call it button blue and else if that is not the case with darker button blue so again just to show you that this lighter blue here is the button blue that we have here and this this other kind of blue is the darker button blue and then we again apply some oops padding this time to all sides of 15 dp so this last padding will then just push in the text to the middle so that we have 15 dp of space to all sides and we can open this box scope and we actually also want to apply the content alignment of center so we just center the text in it i'll format this and here we then have the simple text so the text will be whatever we have in our list our chips list actually and the index of it and the color for that text will be text white which is actually not fully wide so if we hit control and click on that you can see that is slightly slightly darker right than total wide that is something i can always recommend you to do if you have white colors on a dark background then from a ui perspective it's better to to make this white a little bit darker so not fully wide because then it's better readable but that is already it for our chip section we can then scroll up and add it here to our column and here we can then pass a list of chips that will just be a list off what do we have here sweet sleep we have insomnia and finally we have depression and then we can head over to the next composable which will be this daily thought section here um in the actual dribble design there is also let's quickly open the browser here there's also this little shape in it i don't know how to call it um i won't do this in this video you could simply do that in a vector graphic program or even in compose itself but yeah i don't see any reason and just doing the same shape i will show you how to make these waves here we will do these directly in compose because they are just a little bit easier to do and if you know how to do these waves you will also know how to make the this kind of shape but i think it also looks quite good if we just leave that away so then scroll down and implement that new composable which i will call current meditation and this will take one parameter for the color the background color i will default this to a light a red and then let's jump into it this will be a little bit more work and then the chip section so essentially what we will have here is we will again just have a row it's actually the same layout as we had up here for this section and just with a little bit of background color so we have two texts and then we have an icon which is actually put into a box that is clipped in a circle shape so let's start to implement our row that will again be vertically centered so vertical alignment is centered vertically we have the horizontal arrangement such as space between to push these two entries to the sides then we have a modifier for which we will first apply some padding of 15dp then we clip it to a round corner shape of 1080p again apply background color with the color we passed apply some padding again this time adjust horizontal padding of 15dp and vertical padding of 20dp so we just have some different padding values here that we push it a little bit more to the middle from the top side than from the left side so this space is a little bit more than this space and then we can say fill max width actually and then head over into this row scope here we can actually just copy and paste what we have here in this column because we will have the same kinds of text just this time what kind of text do we have here daily thought and this meditation daily thought i think i need to copy this meditation over from my second screen here so we have this little dot i can also just use a dash or whatever and i want to make sure that we give this text a color of our text white again so again we don't want the full white color here for the for the paragraph text or the smaller text rather and then for this little play button we want to have a box that is put into this row and we should actually also put these two texts in a column here i just see that take these and just put these in there so they are they are actually aligned on top of each other and then down here we have a box um we're going to apply some content alignment center again and of course a modifier as almost always we want to give this box a size of 40 40dp we want to clip it to a circle shape so we just have a circle then we want to give it a color a background actually of our button blue then we want to give it padding of 10 dp that's it for the modifier and in here we will also just have an icon for the play icon for the painter we pass a painter resource where we can pass the id of our actual icon so other drawable i see play if there's a content description of play and we want to make this a white icon so we set the tint to color.white and i'll set the size of this icon to 16dp and that is it for this how did i call it current meditation section so let's also add this to our column here uh no not meditation current meditation and that is already it for that then next composable will be our feature section so this will be quite exciting so on the one hand we have the the feature section here for um this little text on this list and then for each item we will also have a composable that will contain these waves and whatever you see here basically and then only our custom bottom navigation is missing so let's scroll down pretty composable for our features section and for this feature section this will actually take a parameter which describes the list of features we want to display um so for each item we need the title we need the corresponding item to show and we need the color and we not only need one color we need a color for each kind of a level here so there's a darker color there's medium color and there's lighter color and for that i will create a kotlin data class that simply describes such a feature so we have the valve for the title it's a string then we have a drawable resource which is the icon id type integer then we have a light color not from android graphics we use compose graphics then we have a medium color and a dark color and then in our home screen for the features section we can then simply pass a list of features with our just create a data class and this will essentially just be a column and in that column we have this little text and a lazy vertical grid which is still annotated as experimentally composed so in case you're watching this video quite late um in comparison to when i upload this i upload this in uh june 2021 in case they changed this lazy vertical grid to something or removed it or change it i don't know then you can always just use a lazy row and make each each row of this of this list basically one entry of that lazy row so basically one row consists of these two entries that is what i want to say here but i'm sure that will be a lazy grid in some kind of way but yeah as for now i will use this lazy vertical grid they provide here and i hope they will keep it in their compose api so we have a column with a modifier of modifier that fill max with and then in here we have a text that says featured we give it a style of an h1 headline so material theme typography h1 and we play modify to that text just to give it a little bit of padding of 15 and dp so down below this text we'll have our lazy vertical grid here we need to define the cells so how our grid is basically arranged and for that we can use grid cells dot fixed and here we can just pass how many cells how many entries we want to have per row we want to have two so we actually just want to have two columns that is what you need to put in there then we want to apply some content padding here we need to pass padding values so that will just push in the whole content of our vertical grid to the middle basically so everything not only the single items or rather not the the items the padding for these single items will be then done in the corresponding composable for that here we just apply 7.5 dp of padding for the start and the end and i will apply 100 db of padding to the bottom so because we have that bottom navigation view we also want to be able to scroll this list to have that um that 100 dp of padding here so that that the the bottom navigation actually does not overlap the list that is why we apply this padding here and then the modifier of fill max height and you will also see that we get an error here because we need to annotate this function with experimental foundation api which is exactly what i explained before so it is still experimental and hopefully they don't change it and this lazy vertical grid works the same way as a lazy row here we can just define an items block with a count so how many items do we have we have features that size many items and in here we can then define how one of these items looks like so that is what we want to do next we want to create such a feature item composable here and all this feature item will take as a parameter is the specific feature we want to display okay so how are we going to do this because this will be the most difficult composable in this whole ui because of these waves so essentially this will just be a box with constraints so with constraints just means we have access to the the bounds of that box we know its width and its height and using that width and height we can then draw these these waves on a canvas so in the end that is just a path and for this path we just define different points we want to connect with that path so here's one starting point and then the first wave here then this point then this bottom point and here on top of that and then what we don't see is that we actually connect this path down here with a start again so we can actually give it a fill color and we do that first for this medium colored path and then for this light color path just to give these some different colors and yeah that is what we're going to do so we're just defining different paths and defining the different points for these firsts let's start with our box with constraints as i said here we will apply a modifier modifier a dot padding so here we use padding of 7.5 dp so this padding together with this padding adds up to our padding of 15dp we use everywhere then we want to have an aspect ratio of one f so that just means hey we have a square because from this lazy vertical grid this just gives us the the width of our composable because we say hey we have two columns in this lazy vertical grid but at the moment we don't know the bounds of our screen so how wide our screen actually is so depending on the device that width will differ and with this aspect ratio set to one we can just make sure that whatever the width is we will assign the same value to the height so we will essentially just have a square then we simply clip this also with a rounded corner shape of 1080p and we give it a background color of our feature that dark color because the dark color is what is at the very end at the very bottom i can say um so it's basically just the background color of our whole card here and then we will lie these paths on top of that and now because we have that box with constraint scope we can get the width using constraints that max width and the height the same way and now we want to start to define our medium colored path so again and that is this one here um i will now just define a bunch of offsets that define these points so either the lower points or the higher points and then later we will make sure that we will actually smoothen these paths so that they actually make up a wave and are not strictly connected so i hope that makes sense so i'll just comment this with medium colored path we will have a medium colored point one set to an offset and now we just define the curtains for the first point and here i just totally tried around until it somehow looked good um so don't be confused i just write off these values here for my second screen i already tried around with that and these look good so the first one obviously starts at zero in x direction and we have height times three point zero point three f for the y value so we just put the first coordinate here to zero in on the x-axis and here we have pushed it down by thirty percent of our total height and we can duplicate that more often um five times so five times in total we name these and just change these values so the second one is width times 0.1 f for the x coordinate so a little bit more to the right then we have height times 0.35 f for this one we have width times 0.4 f and height times 0.05 f here with times 0.75 f height times 0.7 f and for the last one we use width times 1.4 f and actually minus height dot to float so for the last one you can just see um the x value is somewhere here and the y value is very far on the top here so just minus height somewhere here so we just get that very steep curve here and then in the canvas actually we will then make sure that we connect this with some points down here and here so we can actually make up an actual area that we can fill with the color so now we want to make sure that we actually take all these points and put them into a path so we can create an object here medium colored path set that to path object from compose ui graphics call dot apply and now here we have access to that path and we have a bunch of options to actually do something with that path to start we actually want to make sure that we move that path to a specific coordinate to actually start from there so we want to move it to medium point one dot x and medium colored point one dot y that is our starting point and then to now draw a line to our second point and also smooth on that line to make it a curve we want to use something called quadratic busy i won't go into the details of that here it's basically just a mathematical way of of drawing curves um so what we can do to do that is using the quadratic bezier two function that gives us four values that we need to pass here on the one hand x1 and x and y1 which is the point we want to draw this to which will be medium color point 2 this time dot x and that y and let's put that into separate lines and then the other two values they will describe how we will how the curve will actually look like that is very difficult now to explain um maybe you have used something some vector graphic or ui design software where you have these two drag handles basically when you drew a path and with these handles you could define how the curve looks like and this is actually what these two values here are for a safe way to make this path look good to make it a good looking curve is to just take the the two points this section of the path is actually connected between um so in our case that is just our medium color point one and two we add these two points together and divide them by two so that will actually make this path or this section of the path a smooth one so what we need to do is we want to say medium color point one dot x plus medium color point to that x put those in parentheses and simply divide it by two and then we can simply duplicate that and do the same for the y value and now we have to do the same for all of our remaining points here um i will actually define a helper function here because that is quite a lot to write all the time let's do that in our main package called path util credit file function that extends path from compose ui graphics dot standard quad 2 i will call it and this will just take an offset from so from which point you want to connect the path to which and in this function we can then just directly refer to the path we call this on so we can just say quadratic bz2 and here we pass our from.x from that y for the x2 let's actually calculate the absolute value of that so just take always take the the positive value of that um because it could be that either the x or y value one of these is actually negative and then we get a negative result in total out of that and i think we should always make that a positive result so let's take that and say from x plus 2x divide that by 2 two duplicate that and do the same for the y values and then we have an excellent helper function here to just quickly draw these smooth lines um let's actually call this from two this is a little bit more clear so then instead of doing this we can do um standard chord from two and here we just say want to draw that from our point one to point two it's that simple and then we just do the same for our remaining points from point two to three from three to four four to five and that is it we don't need this one anymore so now we are actually somewhere here with our line or somewhere on top of that rather and now we want to just draw some normal lines that that just make this path make up an area actually that we can fill with a color so we want to have another point down here so we can connect this we want to have another point here connect this and then just connect this with a start for that we can just use the normal line two function to draw a normal line straight line i will say with a data to float plus 100 f just to be sure that we're really out of our box and the same with our height oops and then duplicate that we want to stay on the same y value but we want to draw the line to a negative x value just as well to be sure that we are out of the box and then just to say that this path should now be closed so that the the current line under the current ending point of this path should now be connected to the starting point we can simply call close and that is it for our medium colored path you can see that is quite some work to do alternatively you could of course also create these in a vector program and then just um implement these in form of a vector graphic here i don't know which is better this way you also have the option to easily animate them um that you don't have that with a vector graphic um or it's it's a little bit more work with vector graphic but yeah it depends on your project what you want to do and because this is almost exactly the same for our light colored path so this one i will just paste this in here you can find this code in my github repository so or you just write this off as you like for this light colored path only these um these values here for these offsets basically change um the path itself is completely the same just the the medium stuff swapped out with a light point and now we define these paths of course we also want to draw them so that that is where we want to use a canvas for whenever we want to draw something we use a canvas we say modifier oops dot filmic size and that's actually it for the multiplayer let's move that into one line like this and here we just want to draw a path you can see there's a function we pass the pathway to draw and that is our medium colored path and for the fill color so the color we will take the color of our feature which is the medium color then we can copy this for the the lighter path swap this out with a light colored path and this with light color and what's now missing below this canvas is an actual box that contains the text on the one hand this icon and the start button so let's do that we define a box here with modifier dot fill max size and we apply some padding again of 15dp and then let's format that a little bit and then inside of that box as i said we will have a text first that will contain the feature title we set the style to material theme dot typography in h2 i want to increase the line height of that to 26 sp import sp here suggest that if there is a line wrap then there's a little bit more space between these two words and i will apply modifiers because we want to align this text in the box at the top left corner some modify that align top start then we will have an icon here that will have a painter resource where we actually don't pass a drawable id instead we pass the id we pass to our feature feature.iconid it will have a content description of a null we could actually also give it the the title for feature let's do that then we want to give it a white tint so tint color that's right so we have a white icon and we align it to the bottom left some modifier that align bottom start and the button we have here is actually nothing else then also just a text and a little bit um styling applied with a modifier we could use a normal button here but it is just a little bit more work to to make that look good and to make it look like this one this works the same way here to just make it a text and clickable so let's do that the text will always be start i will make the color or a text white i will set the font size to 14 sp i will set the font weight to bold then apply a modifier because as i said we want to make this clickable so we say clickable and here you can just handle the click we won't add any functionality here for this app we want to align this to the bottom end so it sticks to the bottom right corner we want to clip it with a rounded corner shape of 10dp again we want to give it a background of our button blue color and another comma actually and what else i think a little bit of padding would be cool let's say vertical padding is 60p and the horizontal padding 15dp and that is it for this composable here our feature item now we can go to our feature section and simply create that feature item here with the corresponding feature which is our features list at the index of it and that is actually it now only our bottom navigation is missing let's first add the features section to our column here feature section and i will actually paste my list of features here like this so that is basically just the list of features that also the app from dribble users so we have sleep meditation here we have our ic headphone and i just defined the different color levels here for the the blue color here for the green color the orange yellow and the beige and that is actually it still gives us an error here um yeah because we need to annotate this function as well with experimental foundation api so let's actually end this up with our bottom navigation view a custom one i'll just do it here composable i'll call it bottom menu because i think yeah there is already a bottom navigation menu so let's just call it bottom menu and for that we as well need some kind of beta class that contains on the one hand this icon and the title of that so let's uh do that in our root package create a new kotlin data class called a bottom menu content maybe that will contain a title and again a drawable resource which is the icon id which is an integer and then here we can pass a list of these item of these bottom menu contents let's call it items list of bottom menu content we want to pass a modifier which is set to the default modifier by default um actually colon here and then i want to be able to pass the colors for this bottom navigation view from the outside so the active highlight color which is a color set to our button below and that will be the color here as you can see when it's highlighted the bluish color here then we have an active text color which also the color and i will set this to color white by default that is um yeah when we select this then the text color will be white these will be a little bit darker if they're not selected and we want to be able to pass in active text color which i will default to aqua blue and the initial selected item index is an integer and set to zero so that we just select the first item by default but if we want to change that then we can okay so this bottom navigation view will essentially just be a row of some composables that will also create so just bottom items and yeah that will be quite simple so again we will have a state as with our chips selected item index by remember and here we have a mutable mutable mu a bell state what happened um that starts with our initial selected item index and then let's just create a row the horizontal arrangement will be space around so that means that we evenly distribute these items here so there's the same amount of space between each item and we want to center this vertically so we set this to uh center vertically i want to apply a modifier to make sure that we fill the whole width so max width um we want to make sure that we also give the background color of our deep blue and a little bit of padding of 15 dp okay and then we want to say our items list a dot for each indexed for each index let's call this item and here we can then create our actual composable for a specific item so let's create that down here composable bottom menu item and that will just take the item and form of a bottom menu content it will need a boolean whether it is selected or not which is false by default it will have the same colors as we defined up here so just copy these paste them here and it will have an on item click function that gets triggered when we click on it it will give us actually nothing returns the unit and then in here we can have some fun so one of these items basically just consists of a box the box contains an icon and just a text below that box so basically the box and the text are put into a column and yeah that's basically it so let's create that column we have here the horizontal nut scroll horizontal alignment of center horizontally and the vertical arrangement of center as well and when we click on that box so we add a modifier not clickable then we just want to trigger our own item click function inside of this column as i said we will have a box some box here which will have the content alignment of center it will have a modifier um a modifier dot clip we again just want to clip it to around corner shape of 10 dp and that is nothing new then we're going to apply a background color because if it is selected we want to have this button blue background color and else we don't want to have a background color at all so we just check if is selected we apply the active highlight color and else just color transparent and then at the very end we apply some padding of 10 db then inside of this box we will have an icon for the actual icon we passed the painter resource again which is our item dot icon id we have a content description of item.title we have a tint of colored white or actually not of color of white instead we want to check if this item is actually selected because then we have a different text color a different icon color than if it's not selected if it is selected we want to also use our active text color and else we use the inactive text color that makes more sense so again just to show you that if it's selected you can see also the icon is wide and if not it's actually a little bit darker um and just to give it a size we want to have a modifier of size 20 dp that looks pretty good so only the text is missing which we can do below this box now um is this misaligned yes weird um we will have this text here which will define the item title and for the color we again just check if it's selected we choose the active text color and else the inactive text color and that is actually it for this item so we just have a column we have a box in that column for the icon and a text for the text and then in our bottom menu composable we put in that bottom menu item so for each item in our list we just loop over that we put in that bottom menu item the item itself is what we get from this for loop here like this we want to pass something for is selected it is selected if our index is actually equal to um selected item index um we actually don't need to check that we can just pass it like this and then we can just um pass our colors so active highlight color is active highlight color then our active text color is active text color and inactive color is inactive text color and when we click on this item then this lambda function will be triggered here we can say selected item index is equal to index so we update it and that's it we have an unused modifier here yes we should use that here make sure that's a lower m otherwise we don't apply this modifier here let's scroll up here in our box actually in this box we want to put this bottom navigation view so below this column here we have our bottom menu the items will be a list off so what do we have here we have home meditate sleep music profile so bottom menu content home underdrawable.i see home duplicate that four more times then we have meditate meditate i call it i see bubble we have sleep music and profile here we pass i see moon i see music and i see profile that looks pretty good let's quickly scroll over it if we have any unused variables here doesn't look like that so it's quite a bunch of code here but that looks pretty good so how about we we don't want to launch it yet we forgot to actually implement that home screen in our main activity so let's go there and put the home screen in here um and this also wants us to add this annotation here so let's do that and now we should be able to launch it let's just do it and give it a shot should look exactly the same as this one um we get an error here um i think that is um my issue because i didn't remove that um yeah that is my fault let's just remove this and also this color palette and these colors here and then relaunch the app hopefully it now works that looks a little bit better at least it compiled and okay that looks okay but the the bottom navigation view this kind of sticking to the top because we didn't give an alignment but the rest is actually looking fine so let's go to our home screen and uh scroll down to bottom navigation view our bottom menu and yeah apply modify here modifier dot align bottom center if we then relaunch that it should actually stick to the bottom and yes that oh that wasn't it yes now it looks good it's um a little bit close to each other here these um this box and the text we can add a little space between that so it looks better but it's basically what we wanted to build you can see the the paths here and the curves are looking perfectly fine feel free to play around with that change some values see what that changes in the the actual ui that is how you learn the best in my opinion thank you for watching this far in case you want to learn more advanced android concepts then check out this video's description you will find a link to my website and my premium courses which are actually paid um with these courses you will actually really boost your android development knowledge that's also a brilliant way to support me and my work here so i can keep doing these free videos for you yeah so just check it out i recently launched a new course there using web sockets k12 back ends or kotlin back end and a very big android app so yeah give it a shot just check it out and then you will see if you like it or not i wish an awesome day see in the next video bye bye

Channel: Philipp Lackner

Views: 20,049

Rating: 4.9730821 out of 5

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

Id: g5-wzZUnIbQ

Length: 57min 12sec (3432 seconds)

Published: Fri Jun 18 2021