Smoothly animate BottomSheet peek height

Question

I'm trying to animate the height of the BottomSheet on layoutChange, but I can't get anything to work. I've tried several tutorials without luck.

Currently the height just snaps. I'm using a custom BottomSheetDialogFragment(). I've tried TransitionManager.beginDelayedTransition(sheetParent, AutoTransition()) with sheetParent obviously being the top most layout in my setup. It is a coordinatorLayout.

This is my layout file:

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/sheetParent"
android:layout_width="match_parent"
android:layout_height="match_parent">

<FrameLayout
    android:id="@+id/bottomSheetBehavior"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">

    <androidx.core.widget.NestedScrollView

        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/bottomSheetContent"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <View
                android:id="@+id/drag_pill"
                android:layout_width="50dp"
                android:layout_height="5dp"
                android:layout_marginStart="16dp"
                android:layout_marginTop="16dp"
                android:layout_marginEnd="16dp"
                android:background="@drawable/bottom_sheet_pill"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />


        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.core.widget.NestedScrollView>
</FrameLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Below the normal view are more views, which I removed to make this a little more readable. I extend and minimize cards in the bottomSheet with the .isVisible = true/false.

How can I smoothly animate that?

Answer 1

You can animate any kind of value that you would like to change in a View using the ValueAnimator.

For example, in your case in order to animate smoothly the peeking height of a bottom sheet, you can use this in your BottomSheetDialogFragment():

Kotlin:

val behavior by lazy { (dialog as BottomSheetDialog?)?.behavior } 
val originalHeight = 500 // current height
val updatedHeight = 1000 // desired height

private fun updatePeekHeight(originalHeight: Int, updatedHeight: Int) {
       ValueAnimator.ofInt(originalHeight, updatedHeight).apply {
            addUpdateListener {
                behavior?.peekHeight = it.animatedValue as Int
            }
            duration = 300 // adjust the duration accordingly
            start()
       }
}