Navigation Drawer + Bottom Navigation + Bottom Sheet in Jetpack Compose | Android Studio

hey everyone welcome back to my channel in this video we will learn how to create a navigation drawer bottom navigation and bottom sheet all together in one single application let me show you the demo this is how it looks we have a bottom navigation with home search notification and profile and and an add button that opens up the bottom sheet with post stories reads and live out of which post is a screen while other items are a toast then open the navigation drawer here we have home profile settings and log out right all three of them are working fine so let's create it open Android Studio create a new project name it as Lear nvb sheet click on finish and done now I have already created the navigation drawer bottom navigation and bottom sheet individually so in this video all we have to do is to combine the three of them correctly there is no extra code here we will be using the same code but WRA differently also I have already explained the code in detail for three of them so for now I'll be explaining only the important parts and if requir copy paste the individual code otherwise the video will become very lengthy okay I have mentioned the individual video links in the description box so you can go through it now let's create it go to grer add navigation dependency click on sync now and done then go to color add green color and done then go to theme keep green JC as the primary color and status bar color also as green JC next we need six screens that is home search notification profile post and settings so let me quickly create all of them and done next we will Design all six screens so I'll show you how to dang a home screen other F you can do it on your own let me write the code for it and then see we have a composable home function inside it a box with columns whose alignment and Arrangement are Center then a text as home whose font size is 30 and color as green and that's it now let me quickly create the other remaining five screens as well and then see we have a home notification post profile search and setting screens then instead of fragments we create screens in Jetpack compose create a SE class as screens and done here we will have six screens home search notification profile post and settings let me quickly write it and then see the home search notification and profile are four items of the bottom navigation post is an item present in the bottom sheet then in navigation drawer we will have a common item as home and profile then other item as settings and all the other remaining items will be a toast and that is how we will have six screens got it now come to main activity this is where we will combine the individual codes for each one of them step by step so remove the default code and then create a composable function as learn n Bo sheet and make sure to call it here inside the set content also comment on this line because we'll be using top appar for the navigation drawer so for that we don't require a fil Max size surface got it now inside the function we have a lot of code to write so please don't get confused okay let's start with the variable declarations as I previously said wherever required we will copy and paste the code because the entire code is of 300 lines and I have already written the same code in individual videos so here we will simply refer to the previous code got it but don't worry I'll take you step by step so that you don't get confused while writing the code now see we have seven variables declared and initialized navigation controller core routine scope draw State context selected sheet State and show bottom sheet again I have already explained it so we will just focus on the steps next step is to create a navigation draw then later we will create the bottom navigation and then bottom sheet got it so let's start with the navigation draw model navigation drawer with three parameters in it drawer State guest your enabled as true then drawer content this is where all the drawer items will be present inside dra content we will have a model drawer sheet where our first thing will be a heer so for that we will use a box this way and then a line that will differentiate between the header and the items so for that I will use a divider then our first item is home item so let me quickly create a navigation draw item for home and done see we have a label that means the text as home whose color is green then selected as false then the icon is home icon and on click as drawer State close means as soon as the home item is clicked then automatically draw will be closed and at the same time it will navigate to the home screen using navigation controller got it same way we will create the other three items for navigation draw that is profile settings and log out and done three of them navigate to the respective screen while log out throws a toast simple now pay attention this is the end of model navigation drawer parameter bracket and this is where the curly brackets of the model navigation drawer start which represents the logic now our navigation drawer is almost ready because there is one thing left which is top bar of course we will need a top a bar with a hamburger menu icon so to create that first we need to create a scaffold scaold provides a proper layout strategy so that multiple components can work together here we will use top app bar and Bottom bar together in the navigation draw so write along scaffold inside it top bar copy the top bar code as it is and then see we have the top bar title as WhatsApp with the background color as green and other item colors as white then the navigation icon menu icon and on click as draw State open and that's it our navigation drawer is ready also please be careful with all the brackets and commas and if it is stressful to you then you can buy the source code from the description box now the next thing is to create bottom navigation so the second component of the scar fold is the Bottom bar inside it botm Amper whose only parameter is container color means the background color of the Bottom bar that is green and inside the curly brackets here we will have five bottom M Bar items the first item is home so let me write the code for it and then icon button whose two parameters are on click and modifier where on click navigates the user to the home screen also with the home icon in the same way we will create for search item as well and done then the third item is a Fab Floating Action button which will open the bottom sheet so let me quickly write the code for it and done here leave it blank for a while but later when we will create bottom sheet then we will write the code for it below it create an icon button for notification and profile and done our bottom navigation is also ready next here in the Open brackets of the scarf fold we need to set up the Nave host so write as it is and then this is our na host with a navigation controller Who start destination is the home screen and then all the na graphs for each screen next we need to create a bottom sheet so below the end of scaffold brackets write if show bottom sheet inside it model bottom sheet whose two parameters are on dismiss request where show bottom sheet is false means the bottom sheet is closed and the second parameter as sheet State then inside it we will have all the bottom sheet items like post real story and all so for that first we need to create a custom bottom sheet item function come outside all the brackets here create a composable function as a bottom sheet item like this way see we have an icon title and on click for each item got it now come back here I want my items to be in a column hence I'll be using a column layout with fil Max withd padding and arrangement and then then inside the curly brackets of the column I'll create my first bottom shiet item that is post like this way and then see the post default icon is thumbs up and title as create a post then on click as soon as the user clicks on the post item the bottom sheet will be closed automatically and it will be navigated to the post screen simple now same way I will create bottom sheet items for other three as well that is story read and life but this time we won't navigate it to the screen because we have not not created screens for them instead we will simply throw a toast got it and then last thing that we need to do is add here show bottom sheet as true and that's it our bottom sheet is also ready now it's time for the Moment of Truth now let's run the app and see looks good bottom navigation is working bottom sheet is also working let's try navigation draw that is also working fine great right the code is all yours customize however you want and create fully functional apps okay so yeah that is it for the video if you're new to this channel then please consider subscribing to my channel and I'll see you in the next [Music] video

Channel: Android Knowledge

Views: 1,271

Keywords: compose, jetpack compose, what is jetpack compose, learn jetpack compose, 2024 jetpack compose, android studio, new android studio, latest version, java, kotlin, create an android app, text composable, 2024, android in jetpack compose, android tutorials, navigation bottom, bottom drawer, nav controller, material 3, bottom app bar, bottom sheet, navigation drawer, all in one, top bar, bottom bar, app bar, open sheet, open side bar., create app, latest android studio, learn

Id: KkJb6rx0gC4

Length: 21min 55sec (1315 seconds)

Published: Wed Feb 21 2024