Bottom Sheet in Jetpack Compose using Kotlin | Android Studio

hey everyone welcome back to my channel in this video we will create a bottom sheet in Jetpack compos using bottom navigation so in my previous video I have already created a bottom navigation let me show you see we have a bottom ampar with five items in it what we will be going to do in this video is when the user will click on this add Floating Action button instead of a toast it will open a bottom sheet got it like this way so we will be adding few lines of code in bottom navigation code only so I'll highly recommend you to watch that video first and then this video okay now this is how our bottom sheet will look alike here we will have four items in it post story real and live with icons also we will make it clickable means if the user will click on post then it will redirect to post screen like that way but to save a time I'll cover navigation for post screen only others will be a toast because once you have an idea on how to navigate from bottom sheet to screen then you can do it on your own for other items as well correct so now let's create it open the existing project as I said we will only do navigation for post item so for that we need to create a post screen so right click on package create a code clean file name it as post let me quickly write the code and done now see this code has a text as post which is in green color and also it is in the center simple next as it's a navigation process so we need to initialize it in our seal class so go to screens here simply add a data object as post with string identifier also as post and done now comes the important part go to main activity this is what our bottom navigation code looks like it may look complicated but it was super duper easy now what we need to do here is we need to add bottom sheet on our Fab this is our Fab Floating Action button here here in on click instead of a toast we need to add bottom sheet okay so to create that first we need to initialize a variable called as sheet State remember model bottom sheet State means it will store the state of the sheet whether it is open or close then second initialize variable as show bottom sheet and done so show bottom sheet by remember mutable state of initially as false means initially bottom sheet will be closed but when the user will click on ADD FB then only the bottom sheet will open correct so for that write here as show bottom sheet as true simple now this show bottom sheet is just a variable because we have not yet put any logic on it logic is in bottom sheet steps so let's do that start writing the code from here below padding values and brackets here write if show bottom sheet means it will check if the bottom sheet is open or close then inside it model bottom sheet that's the composable function whose first parameter is on dismiss request means what should happen when the user will click outside the bottom sheet in that case the bottom sheet should get closed so for that write here as false got it then second parameter is sheet State initialize it with the one which we declared above and done now bottom sheet is ready we just need to fill items in it we have only four items right now there are various way to write items for bottom sheet I'll go for a simple way where we will create a bottom sheet item composable function separately and then call it here inside easy right so for a moment leave this area blank and come outside all the brackets here we will create a composable function as bottom sheet item which will have three parameters icon text and on click these are the three parts of an item means like post icon then post text and post on click same way for other items as well so let me quickly write the code [Music] and done now look we have bottom sheet item with icon title and on click then I have arranged them in a row with vertical alignment horizontal Arrangement and row itself as clickable got it this space by is the space between two rows then the parameters icon with green color and text as title also in green color simple this is like the template of the item now we will fill in it so come back here now we need to display bottom sheet items in a column format right so to do that I'll use column layout with modifier fill Max width means the entire width of the sheet then padding as 18 DP and vertical Arrangement Space by 20 DP means the space between two columns then inside the column colum here we will have four bottom sheet items so our first item is post bottom sheet item whose icon will be a thumb and title will be create a post third parameter was on click so what will happen when the user will click on post item first thing that as as soon as the user clicks on it the sheet should automatically get closed and second thing that it should navigate to the post screen so for the automatically close I'll use show bottom sheet as false simple and for navigation WR navigation controller navigate to Post screen then to avoid multiple back button clicks I'll write pop up to zero and then our first item is ready similar way I will create other item as well so write bottom sheet item whose icon is a star and title as add a story then for on click I'll simply throw toast now you know how to write navigation code so if you want navigation for other item as well you can follow the same steps as we did for post scen got it likewise I will create other items as well and then look we have create a real item and go live item and that's it our bottom sheet is ready last thing that we need to do is add post screen in composable na graph here and done now let's run the app and see look this is our bottom app part and when I click on ad Fab it opens a bottom sheet perfect now if I click on create a post then here we are on the post screen great and for the other items it simply throws a toast okay so yeah that is it for the video if you are 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: 946

Keywords: jetpack compose, android, jetpack tutorials, compose, learn android app, learn jetpack compose, app in jetpack compose, create a app, android studio tutorials, jetpack compose android, 2024, series, learn android, create jetpack compose app, college project app, final year project app, android development, android knowledge, mobile apps, develop apps, create an app, tutorial, topic, error, menu, nav menu, ui, bottom jetpack compose, app, bottom sheet, bottom drawer, bottom menu, jc

Id: tkqlg25lIL0

Length: 13min 24sec (804 seconds)

Published: Fri Feb 09 2024