Simple example of using BottomSheetBehavior in Android | Kotlin

BottomSheetBehavior is An interaction behavior plugin for a child view of CoordinatorLayout to make it work as a bottom sheet. Bottom sheet is something like sliding a view from bottom to top, you may already seen this design in Google Play Music or VLC media player app.
Here is the simple example of using BottomSheetBehavior in Android, code is developed in Kotlin. MainActivity.kt

val bottomSheetBehavior = BottomSheetBehavior.from(bottomSheet)
bottomSheetBehavior.setBottomSheetCallback(object : BottomSheetBehavior.BottomSheetCallback() {
    override fun onStateChanged(bottomSheet: View, newState: Int) {
        when (newState) {
            BottomSheetBehavior.STATE_EXPANDED -> {
                textBottom.text = getString(R.string.slide_down)
                //textFull.visibility = View.VISIBLE
            }
            BottomSheetBehavior.STATE_COLLAPSED -> {
                textBottom.text = getString(R.string.slide_up)
                //textFull.visibility = View.GONE
            }
        }
    }

    override fun onSlide(bottomSheet: View, slideOffset: Float) {

    }
})

Bottom sheet view should be one of the child of CoordinatorLayout like following code sample.
activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main" />

    <include layout="@layout/bottom_sheet" />
</android.support.design.widget.CoordinatorLayout>

content_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/activity_main">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

bottom_sheet.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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/bottomSheet"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:behavior_hideable="false"
    app:behavior_peekHeight="58dp"
    app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
    tools:showIn="@layout/activity_main">

    <TextView
        android:id="@+id/textBottom"
        android:layout_width="match_parent"
        android:layout_height="58dp"
        android:background="#f1f1f1"
        android:gravity="center"
        android:text="Slide Up"
        android:textColor="@color/colorAccent"
        android:textSize="22sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/textFull"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="#e1e1e1"
        android:gravity="center"
        android:text="Full View"
        android:textColor="@color/colorAccent"
        android:textSize="22sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textBottom" />
</android.support.constraint.ConstraintLayout>

Here is the video output of this source code

Interesting right?

If you are really interested in this code, then please share this post with your friends, also share your feedback as comment here.

Source code on GitHub

Thank You