Blog Infos
Author
Published
Topics
,
Published

How do we build this?
enum class States {
EXPANDED,
COLLAPSED
}
view raw states-enum.kt hosted with ❤ by GitHub

Then let’s lay the layout’s foundation: a simple, composable function that gets in a header and a body.

@Composable
fun MyBottomSheet(
header: @Composable () -> Unit,
body: @Composable () -> Unit,
) {
Box {
Column(Modifier.fillMaxHeight()) {
header()
Box(Modifier.fillMaxWidth()) {
body()
}
}
}
}
The swipeable modifier
val swipeableState = rememberSwipeableState(initialValue = States.EXPANDED)
Box(
Modifier
.swipeable(
state = swipeableState,
orientation = Orientation.Vertical,
anchors = mapOf(
0f to States.EXPANDED,
maxHeight to States.COLLAPSED,
)
)
)
BoxWithConstraints to the rescue
BoxWithConstraints {
val constraintsScope = this
val maxHeight = with(LocalDensity.current) {
constraintsScope.maxHeight.toPx()
}
Box(
Modifier
.swipeable(
/* ... */
anchors = mapOf(
0f to States.EXPANDED,
maxHeight to States.COLLAPSED,
)
)
)
}
The offset modifier
Box(
Modifier
.swipeable(/* ... */)
.offset {
IntOffset(
x = 0,
y = swipeableState.offset.value.roundToInt()
)
}
)
Nested scrolling

The nested scroll connection
Box(
Modifier
.swipeable(/* ... */)
.offset(/* ... */)
.nestedScroll(
object : NestedScrollConnection {
// Implement callbacks here
})
)

Job Offers

Job Offers


    Android Test Automation Engineer

    Komoot
    Remote
    • Full Time
    apply now

    Senior Android Software Engineer (f/m/d)

    Paradox Cat GmbH
    Munich
    • Full Time
    apply now

    Android Software Engineer (f/m/d)

    Paradox Cat GmbH
    Munich
    • Full Time
    apply now

OUR VIDEO RECOMMENDATION

,

At long last we have Kotlin first at Meta!

Android started to support Kotlin 5 years ago and became the first-choice language three years ago. But Meta just announced Kotlin as the preferred and default language for our Android code base only 3 months…
Watch Video

At long last we have Kotlin first at Meta!

Peng Jiang & Sergei Rybalkin
Software Engineer & Kotlin
Meta

At long last we have Kotlin first at Meta!

Peng Jiang & Serge ...
Software Engineer & ...
Meta

At long last we have Kotlin first at Meta!

Peng Jiang & Ser ...
Software Engineer & Kotli ...
Meta

Jobs

Pre-scroll callback
override fun onPreScroll(
available: Offset,
source: NestedScrollSource
): Offset {
val delta = available.y
return if (delta < 0) {
swipeableState.performDrag(delta).toOffset()
} else {
Offset.Zero
}
}
view raw pre-scroll.kt hosted with ❤ by GitHub
Post-scroll callback
override fun onPostScroll(
consumed: Offset,
available: Offset,
source: NestedScrollSource
): Offset {
val delta = available.y
return swipeableState.performDrag(delta).toOffset()
}
view raw post-scroll.kt hosted with ❤ by GitHub
Pre and post flings
override suspend fun onPreFling(available: Velocity): Velocity {
return if (available.y < 0 && scrollState.value == 0) {
swipeableState.performFling(available.y)
available
} else {
Velocity.Zero
}
}
override suspend fun onPostFling(
consumed: Velocity,
available: Velocity
): Velocity {
swipeableState.performFling(velocity = available.y)
return super.onPostFling(consumed, available)
}
Conclusion

YOU MAY BE INTERESTED IN

YOU MAY BE INTERESTED IN

blog
It’s one of the common UX across apps to provide swipe to dismiss so…
READ MORE
blog
In this part of our series on introducing Jetpack Compose into an existing project,…
READ MORE
blog
Hi, today I come to you with a quick tip on how to update…
READ MORE
blog

How to animate BottomSheet content using Jetpack Compose

Early this year I started a new pet project for listening to random radio…
READ MORE

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.

Menu