How to Animate content changes in bottom sheet

Whats’up! It blog about about cool android stuff. And here we go.

Today we look how to animate dynamic change height of bottom sheet in android. Many android apps show their content in persistent or modal bottom sheet. The Bottom sheet is one the components of Material Design.

Image Source https://material.io/components/sheets-bottom

Prerequare : Android, Kotlin, Kotlin extensions, Material bottom sheet.

Default behavior

Change height inside bottom sheet with animation

Let’s create MainActivity and activity_main.xml files.

activity_main.xml contains top CoordinatorLayout, BottomSheetBehavior as child of CoordinatorLayout. BottomSheet contains ScrollView with ConstraintLayout. ConstraintLayout contains our content in bottom sheet. I add some Chips and TextViews with background.

<?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/vCoordinator"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <FrameLayout
        android:id="@+id/vBSBehavior"
        style="@style/Widget.Design.BottomSheet.Modal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior"
        app:shapeAppearance="@style/ShapeAppearance.MaterialComponents.LargeComponent">

        <androidx.core.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

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

        </androidx.core.widget.NestedScrollView>

    </FrameLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Next step, let’s add some logic in MainActivity.

bSmallHeight.setOnClickListener {
    animateBS {
        tvFirstPart.isVisible = !tvFirstPart.isVisible
    }
}

Call view hight changes code in animateBS block. animateBS contains lambda as a parameter.

fun animateBS(changeHeight: () -> Unit) {
    TransitionManager.beginDelayedTransition(vCoordinator)
    changeHeight()
    TransitionManager.endTransitions(vBSBehavior)
}

If you want more complex animations, you can customise transaction.

fun animateBS(changeHeight: () -> Unit) {
    val transition = AutoTransition()
    transition.addTarget(vBSBehavior)
    transition.interpolator = FastOutSlowInInterpolator()
    transition.duration = 600L
    TransitionManager.beginDelayedTransition(vCoordinator, transition)
    changeHeight()
    TransitionManager.endTransitions(vBSBehavior)
}

Code sample available on Github:

VDenis/bottom-sheet-height-animation