NAVIGATION DRAWER MENU - with badges - Android Jetpack Compose

hello my friends and welcome back to new video in this video I'm going to show you how to build this drawer menu with profile picture uh profile name in the header and some items with Badges and Bash count as well and I will show you how to control it by a button Maybe by menu icon of the top up bar in the es scafold and also using sweep gesture just like this let's learn it here I have an empty project and I've just uh added this uh profile picture to this and in the build. gader I changed the target s to 34 and compile ck2 34 as well this two I mean and nothing more everything is ready to start okay here uh as always I'm going to create a composable function outside of this block here and I'm going to call [Music] it uh n drop as I told you in the example we going to have a separated header and some items here so if you want you can have a let's say uh two composable functions one for this and uh one for this and it makes your project uh like more clear uh but uh to show you how to make it I will do all of them here in one screen because uh maybe it's better to see it all together in this video okay uh in the drawer let's start with the drawer itself we have a modal navigation drawer in the uh material tree and let's check what we have here we have the drawer content we have the modifier D State and uh gesture enable or disable and uh the color and also the content uh let's add this up here and as the drawer content we have to uh create those functions that I was talking about them so here let's start with having a model draer sheet and inside it we can uh design whatever we want so if you want to separate them now uh you can create uh two functions one for here and one for here and locate them here and then start coding inside those functions and as I said in this video because we want to see all of them in one screen I will uh write whatever we need here okay I'm going to start with the column on top of the column we will have the h header on bottom you will have the items and a separator line divider line in the middle so let's have it f Max size and uh vertical [Music] arrangement a spaced by 12 DP importing the DP and that's it for this column inside of the column I'm going to uh have a B for the header um with the height of 200 DP and the background can be my favorite color 0 x f f f f [Music] C7 importing the color and that's it yeah then let's have this content alignment alignment center and let's have here uh another column uh I need a column here and this picture will be on the top and uh a p in between the text and the picture and then the text okay let's have it inside of the column as the modifier let's have wrap content size and uh we want to see everything in the center horizontally uh so vertical Arrangement Arrangement space around and for the horizontal alignment alignment center horizontally and that's it for this column uh let's have the image here [Music] painter resource uh R do D do sh two and profile picture then here the modifier the size of the image uh can be 130 DP and uh [Music] clip circle shape to have it like C and then the text okay as the text you can write whatever you want Mr sh then a modifier F Max spe and padding of from the top 16. DP then let's increase a bit the font the default is 14 SP so 22 SPS I think is enough and then text align text align Center okay till here we have the header and uh we just need outside of this column the uh divider uh modifier align alignment uh bottom center that's good then the [Music] thickness one. DP and the color black or maybe dark gray and that's everything for this uh divide we have an import that we don't want it okay everything is done in the header let's check it okay uh The Sweep gesture should work now yeah and it works so we have the uh header with the profile picture and divider and the the background color and also the text so here we can implement the items for the items it's better to have a data class to store the data inside this data class and uh then implement it here let's continue you can have the data class here and if you want you can create a totally separated data class for this let's have it here down below all the way down so data class uh D items and we need some uh different things uh let's go to the example and I will tell you what me okay for each item uh first we need to know uh about the icon then the text then about the badge if it has the badge or it doesn't have just like the first one and the last one that they don't have the badge and these two have the bad and finally we need the number that is written here inside of this badge so totally four different variables should be created inside of this data class let's create them if value for the icon the type is image Vector then uh value for the uh text type A String then a value for this uh batch count the type integer the value has uh badge and a boo if it has a badge or it doesn't have okay let's go to the top here after this divider we are going to uh create the items uh first let's load the data inside this data class on the top here uh we need a value calling it the row item and equals to least of D items data class and here we will load the data inside so icons dot field default rounded based on uh your Cho so default dot or the first one face or profile whatever you want then we need a text calling it profile for the first one and uh it doesn't have a badge so empty or maybe zero and then false so now you need to duplicate it to have more items uh based on your project and how many you want let me copy and paste it to uh increase a bit the speed of this video okay let just I should change this just like this so we have all of the items now we have to load them here let's use this uh dra item the variable that we have created right now here then dot for each and uh we will use here uh navigation drawer it and as you can see here we have different uh data and inside it we have more data that we can use modifier icon bad shape and you can see all of them let's start with the label uh for the label I'm going to use a text and the text of it will be it do text and that's it uh then uh for the unclick and the selected we will uh write the codes uh let's have another item here I and uh for the icon this is a composable function so we can uh use normal icon with image vector and here uh e do icon and as the text we can use eat do text because it should be a string then uh let's have the bad the same it uh should be a composable as you can see here so inside of the batch uh I'm going to check if it do has badge uh then we will create the badge box and whatever we need here so uh a badge box and uh inside of it as the badge we can have a composable function again and the badge itself and it will have a text uh the text will be it dot batch count do two string and that's that's it um you can increase a bit the font size of this to make it better visible 17 s we are done in the badge and everything that we want for selected we need uh another variable here on the top and let's create it a variable called selected item by [Music] remember mutable state of D item zero let's import it and that's it and now uh let's use it down below we are going to check if it equals to selected item and uh everything is done here for now let's check it on the emulator okay here we have uh the items and the you can see the the first one is uh selected by default now and we have the badge number and whatever we want we just need a padding here then we need to uh write a logic to select these items and also Logic for the on click okay let's continue uh here this was in inside of this uh column so the column should have a padding or [Music] maybe we can have the modifier for this uh navigation item so let's check the place of the modifier here after the on click okay after the on click we will have a modifier equals to modifier dot ping [Music] and horizontal 20 DP and it's okay okay we have this padding and it works good or maybe you can have it 16 okay uh we should control the UN click now so for the unclick uh we have to create another variable to check the state of this uh dra let's create it here a value I'm going to call it the [Music] r State uh equals to remember dra State and the initial value uh should [Music] be dra value do close Okay and uh we need need a cortin scope I will tell you why in a second let's create it here remember C okay let's go down below in the UN click here we want to use this uh variable that we have created right now so selected item uh should be equal to it when we are clicking on the item and uh then we want to close the drawer uh when the item is selected because the logic is to go from uh this screen to another screen uh by clicking on this uh items of the dra menu consider VR by default in the profile uh screen and we want to go to the inbox when I'm clicking on this I should go to the inbox so the driver should be closed before I navigate to the other screen and here if uh normally we write dra uh estate do close we will have error as you can can see it's a suspend function and it should be inside of the uh cor routin block so I'm going to use this escope do launch and taking this inside it but if we check it now uh it will not work because the driver state is by default on the close as we set it here uh so uh let's have this button in the middle of the screen to control this uh draw and uh by clicking on that button we will change this estate to open the draver will open and then after clicking on one of the items it will uh close the draw so down below here we have this block and this is the block of this uh uh modal navigation draw so it's officially the content of our application so here we can have a box and uh F Max size and content alignment alignment center and I will have a button here I will have a text open the r and in the UN click again we will have the same we need to use this es scope and instead of close I'm going to use open and finally we have to set the dra State on our dra as you can see here we have a drawer estate here so let's see the end of this block it's here a comma dra estate equals to the rower State and now let's check it on emulator okay we are having our button opening it and by clicking on the item it will be close and also by clicking in this gray area we can close it and the Swit gesture works as well so let's have the scaold and this top app bar here to control the d v I'm going to create the scaffold [Laughter] [Laughter] here okay I've created the escaf and inside of the escaf we have this top Apper the text is dra menu I have icon button and the icon of this icon button is menu icon here we have the on click and we have the escope launch D stayed open and I took this box totally and located inside the content of this es scaold okay uh if you don't know how to work with the esaf and how to work with this Top Apple you can find the link of them down below in the description and in the top and uh let's check it on ulator here we have the menu and the button the button will open it and the menu also will open it and by clicking on one of the items it will be closed and that's whatever we need to implement a beautiful drawer menu if you like this content please give me a thumbs up to help this video be watched by more people and if you are new here please uh hit the Subscribe button to be aware about the new videos thank you for your support if you have any comment any question write down below and I will be so happy to read and answer them have a good day bye-bye

Channel: MkrDeveloper

Views: 1,698

Keywords: NAVIGATION DRAWER MENU in compose with badge, NAVIGATION DRAWER MENU - with badges - Jetpack Compose - Android studio, jetpack compose NAVIGATION DRAWER MENU, NAVIGATION DRAWER MENU in jetpack compose android studio, mohsen mashkour, Mkr Developer, android jetpack compose NAVIGATION DRAWER MENU, NAVIGATION DRAWER MENU - jetpack compose Android studio | Kotlin, NAVIGATION DRAWER MENU jetpack tutorial, Jetpack compose mohsen mashkour, NAVIGATION DRAWER MENU in jetpack compose, Kotlin

Id: ZwVZz6eap94

Length: 31min 10sec (1870 seconds)

Published: Wed Oct 11 2023