May 16
Detect Swipe Direction on Jetpack Compose to trigger BottomSheetScaffold
In my recent project, I was trying to add BottomSheet which gets triggered when the user creates a gesture of upwards swipe as you see in Snapchat Memories, where the camera works in the background and on upwards swipe we open the bottom sheet. Here is the outcome.
We will be using BottomSheetScaffold here which is ideal for this use case.
In Jetpack Compose, we have two types of bottom sheets, the BottomSheetScaffold and the ModalBottomSheetLayout.- BottomSheetScaffold doesn’t block the screen’s main UI when it appears, and you can view and interact with both (main UI and bottom sheet) simultaneously. Also, you can set a peak height to show part of the bottom sheet all the time.- ModalBottomSheetLayout acts like a popup view. It shows up when you press a button and blocks any interaction with the rest of the screen.
Adding BottomSheetScaffold to Compose✨
I will show you how I used it, Initially, I had a Scaffold which I wrapped with BottomSheetScaffold . We have to pass two crucial bottomSheetScoffoldState and scopewhich is used to manage the sheet's state and give the coroutine scope respectively. These are passed around to collapse or expand the bottom sheet. You can see in the image below that I have passed it to the Naviagtion composable and which in turn is passed to the CamaraScreen .
BottomSheetScafflod parameterssheetContent - as the name suggests they provides with the content for the bottomsheet. In my case it was the MemoriesScreen.
scaffoldState - takes the bottomSheetScaffoldState defined above.
sheetShape - It is used to provide shape to the bottom sheet
sheetBackgroundColor - as the name suggests
sheetPeekHeight - It is added to make the sheet invisible initally, since BottomSHeetScaffold have a default peek value.
Gesture Detection In Compose✨
Now coming to the important part is how to detect the swipe and trigger the bottom sheet to expand. We have already passed the bottomSheetScaffoldState and scope to the CamaraScreen .
We have to add a new modifier to the Surface which is pointerInput() inside it we will set the detectDragGesture{} in which we get the directions based on the x and y locations which helps us to detect the direction of the swipe. Based on these inputs we will trigger the bottom sheet open and close in the main screen by changing the state.
pointerInput - Create a modifier for processing pointer input within the region of the modified element.detectDragGestures - Gesture detector that waits for pointer down and touch slop in any direction and then calls onDrag for each drag event. It follows the touch slop detection of awaitTouchSlopOrCancellation but will consume the position change automatically once the touch slop has been crossed.onDrag: (PointerInputChange, Offset) → Unit
OnDrag have two parameter which i have changed to change and dragAmount. This dragAmount gives us the x and y which helps us to detect the swipe. change.comsume() consumes change event, claiming all the corresponding change info to the caller. This is usually needed when, button, when being clicked, consumed the "up" event so no other parents of this button could consume this "up" again.
If you want to video the whole code of the project you can refer here
Finally, you have done it wow added a swipe gesture bottom Sheet in your Compose App like Snapchat Memories!!🎉
For any doubts and suggestions, you can reach out on my Instagram, or LinkedIn. Follow me for Kotlin content and more. Happy Coding!
I will well appreciate one of these 👏
