Detect Swipe Direction on Jetpack Compose to trigger BottomSheetScaffold

Photo by Reinis Birznieks on Unsplash

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 👏

Recent Post

--

--

--

We are here building a community here.

Recommended from Medium

What’s your text’s appearance?

Using Jetpack Compose in XML/View and Vice Versa : Perfect Interoperability🧁

Continuous Unit Testing in Android Development Using Bitrise

Leveraging Android Framework for Accessibility

https://wearepurple.org.uk/the-purple-pound-infographic/

Building LineageOS for your device

What are Lifecycle-Aware Components in Android?🚀

Tools Every Android Developer Should Be Using

Simple Steps to Saving, Loading, and Deleting Bitmaps in Android Storage — Using Java

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Debanshu Datta

Debanshu Datta

Android @Gojek | Mobile Developer | Backend Developer (Java/Kotlin)

More from Medium

Simple Jetpack Compose Navigation Example

Parallax Scrolling With Jetpack Compose

Stack of frames.

Android — Things to consider when testing an application

Android — Things to consider when testing an application

Observations while moving an existing project to Jetpack compose