Full Guide to Bottom Sheets - UX With Material3

hi guys and welcome back to a new material 3 video in this video you will learn about the bottom sheets a bottom sheet is in the end exactly as the name sounds a sheet that slides in from the bottom so if we click this button you will see this little sheet will show up we can dismiss It Again by clicking outside you can see it also um is focused a little bit by blurring out or by darkening the other content and we can also just drag it down to dismiss it so I will show you how you can implement this in general there is not too much Theory you need to know about that or a specific guidelines you need to stick to a bottom sheet it can contain a variety of different content so it's not like all these navigation views we talked about that they have to um that they have to use navigation and that they have to be for navigation so there are not too many specific guidelines if you at least if you don't change the defaults then you can't do much wrong with it so I am in an empty material 3 jpeg compose product here and the first thing I want to do is we want to have a so-called modal um model bottom sheet and it might be that it's not recognized because you don't use the most up-to-date material 3 version in that case go to Gradle scripts build.gradle scroll down to this compose bomb and you change this to um this one here um 20 23.6.1 this is the latest version which includes the bottom sheet synchronized Gradle when that is done we do have this modal bottom sheet composable let's import that we do get a Lambda on this Miss request and we also have a Lambda for the content of this modal bottom sheet I will keep the content simple here so I will just include an image as I've shown you in the sample I've already included a resource drawable here so I can access this with other drawbow.curmit if you don't have this simply go to your Ras folder drawable and paste in your image here and then you can also refer to it inside this image or put any other content in there this is of course completely up to you what you want to do with this bottom sheet and what kind of content you want to show we also want to go to this model bottom sheet composable add enter to add this experimental annotation so we get rid of the warning but apart from this on this misrequest Lambda which is by the way cold when we dismiss the bottom sheet so either when we swipe it away or when we tap outside of the bottom sheet apart from that we also have a bunch of other parameters luckily we only need to care about very few of them especially the sheets state which is used to control the visibility of the bottom sheet we can create a sheet state by saying sheet state is equal to remember modal bottom sheet state and we also don't need to change anything here we can just leave it at the default we can then pass it here then let's next have a little box um yeah so let's put it here which is just our actual screen content so modified filmex size we have a Content alignment of Center and this will just be our single button which will open the sheet so we have button the text will be open sheet and when we click this button and then we want to now use our sheet State let's move this up here and show our bottom sheet that is at least what I thought but it looks differently here so we we do have the sheet State here and we can call expand and hide but by default how this modal balance sheet works is if we just put it directly in our composition like this it will be shown immediately and you can also notice this if we launch our app take a look here you can see um it just shows by default we can dismiss it but usually we don't want to show such a bottom sheet by default there's also no way to pass an initial State here for this um modal bottom sheet state so we only have this skip partially expanded and confirmed value change so when the sheet State changes this is something I don't find very intuitive to be honest because if we take a look at navigation draws for example which I've covered in the last video then we do have this option to pass in an initial state that the navigation draw is closed and then we just need this sheet state or this drawer state in that case to control the visibility of this drawer but it seems like for model bottom sheets is different because here we need a sheet State and a Boolean state in addition whether we want to show this sheet or not so we also want to have a VAR is sheet open but I remember um remember savable mutable state of false initially so initially we don't want to show this Alt Enter to import this Alt Enter to yes this one and then we want to use this state and wrap this modal bottom sheet inside of an if statement so if is sheet open only that I want to show this model bottom she's only down we we even include it in the composition and when I click our button we just say this sheet open is true if we now relaunch this and then take a look we can now click open sheet it will show we can drag it down to hide it we can show it again or no we can't show it of course that because we didn't um we don't do something in this on dismissed request Lambda so in here we of course I want to say is sheet open is now false if we then relaunch this and take a look and then we should see that we can now toggle it on and off so yes that is now working perfectly fine that we can toggle our sheet so that is a little bit confusing that we still have our sheet set which we don't use in this case but of course you could use it because the sheet set also contains this expand and height function but it's very difficult to make use of that if you don't want to show it by default when you are opening the app which is usually the case I would say and you also can't make use of this is visible Boolean so this is not the same as is sheet open because this is visible Boolean gets switched to True after the animation has been performed so um if we do that then the sheet immediately appears and there's no animation maybe I'm missing something maybe maybe there is a way to make it work with just the sheet state but I've also only found examples online that use such an additional Boolean State what you can also do is you also have the option to pass in a drag handle so just as an additional composable if you want to switch the default drag handle that is basically just this little thing here that indicates that you can drag this sheet but I would just leave it at the default um but in in rare cases you might want to switch this out with a different one but we're not done yet there is a different type of bottom sheet we just covered the modal bottom sheet which displays as a modal so that means we have this scrim here that indicates on the the bottom sheet is showing above everything else and we can dismiss it by tapping outside but there's also another type of bottom sheet which is more like a standard a permanent bottom sheet not a permanent one but one that isn't so prominent and this comes however with a scaffold who needs to be implemented with a scaffold so let's comment this out here and up here we want to have a bottom sheet scaffold so this is a special scaffold which allows us to also use a bottom sheet you can see a lot of different options but it basically just offers the same configuration as a normal scaffold with a difference that it takes in a sheet content and a bottom sheet state so if we go up here and also have our scaffold state and say remember bottom sheet scaffold State then here we do have that initial state so um no we don't have that but you can set an initial bottom sheet State um that would be this sheet State here so we can scroll down and here we can say our scaffold state is equal to scaffold State ah whoops scaffold state the sheet content is now again what we want to show on our bottom sheet so we can just use the same the same image here I'll just copy paste this and uncomment this here you also have the option to pass in a drag or sheet drag handle if you want to change it otherwise it comes with the default you can disable the um the sheets swipe so that the user can swipe if you don't want that you can change all the elevation um the shadow cotton color container color shape I will just leave all that untouched if you want to follow along with the material 3 guidelines just the peak height might be interesting because by default at the bottom sheet Peaks a little bit so you see a little bit of it which indicates hey there is something you can drag up I will show you both these variants in a moment and here in this case we would take this box and move it inside of our scaffold so this is the actual content of our scaffold which is our actual screen content and here in this case we don't need to work with these booleans however so we can get rid of that and rather use our scaffold state so scaffold State bottom sheet state that expand this time we can make use of that um this gives us an error because we need to execute that in a 13 so it will suspend as long as the animation is playing so we can get a curtain scope here and I make use of that here so scope.launch we expand our bottom sheet and we could also of course hide it if we relaunch this then I think we should be able to see something just you can see now it Peaks a little bit we can take this drag handle to drag it up we can also drag it down until uh that specific Peak height and we can also click our button to um lift it up and you see here it's now not a model anymore so the rest of the screen does not get darkened and we can also not dismiss it by tapping outside so it's a real fixed part of our screen you can say but if you don't want it to Peak like that then you can also go into either scaffold and change the peak height to 0dp I'll enter import DP and then it won't show by default you can see there is no sheet but we can still open it and swipe it down again so a bottom sheet is really a composable which you need quite often this is a brilliant way to just hide some extra content on the screen and display that in an intuitive way to the user by having this drag handle that indicates you can drag this wherever you want and other than that thanks so much for watching this video If you enjoyed this you will definitely also enjoy my more advanced Android premium courses which you can all find by clicking the first link down below so do that now and check them out in case you want to become an industry ready Android developer and then have an amazing rest of your week I will see you back in the next video bye bye foreign [Music]

Channel: Philipp Lackner

Views: 34,741

Keywords:

Id: VxgWUdOKgtI

Length: 11min 54sec (714 seconds)

Published: Thu Aug 24 2023