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 Engineer

    American Express
    Phoenix, USA
    • Full Time
    apply now

    Mobile Developer Android (m/w/d) Firebase

    REWE digital
    Köln / Cologne
    • Full Time
    apply now

    API Engineer

    American Express
    London
    • Full Time
    apply now
Load more listings

OUR VIDEO RECOMMENDATION

,

Keep Rules in the Age of Kotlin

ProGuard has been the industry standard for obfuscating, shrinking and optimizing Java & Android apps for close to 20 years. ProGuard, and the compatible R8 shrinker, usually need some configuration since it’s not always technically…
Watch Video

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
Hi, today I come to you with a quick tip on how to update…
READ MORE
blog
Automation is a key point of Software Testing once it make possible to reproduce…
READ MORE
blog
Drag and Drop reordering in Recyclerview can be achieved with ItemTouchHelper (checkout implementation reference).…
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