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


    Senior Android Engineer – Outfits Program

    Zalando SE
    Berlin
    • Full Time
    apply now

    Android Entwickler (m/w/d)

    CHECK24
    Augsburg, Berlin, Düsseldorf, Essen, Frankfurt, Leipzig, München und Münster
    • Full Time
    apply now

    Senior Software Engineer – OS

    Peloton
    New York, USA
    • Full Time
    apply now
Load more listings

OUR VIDEO RECOMMENDATION

, ,

Automated migration of Android apps to Bazel build system

Migrating large projects that consist of hundreds or thousands of modules and being maintained by a large team, from Gradle to Bazel might be challenging. I would like to discuss the process of automation of…
Watch Video

Automated migration of Android apps to Bazel build system

Pavlo Stavytskyi
Software Engineer
Lyft

Automated migration of Android apps to Bazel build system

Pavlo Stavytskyi
Software Engineer
Lyft

Automated migration of Android apps to Bazel build system

Pavlo Stavytskyi
Software Engineer
Lyft

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.

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

Menu