Android Bottom Sheet tutorial

Bottom sheet are introduced in design support library revision 23.2.0. The design spec for bottom sheets can be found at https://www.google.com/design/spec/components/bottom-sheets.html

Dependency

dependencies {
 compile 'com.android.support:design:23.2.0'
}

Gradle might not be able to download this revision for you, you would need to update your SDK using android SDK manager.

Implementation

You can implement bottom sheets support with just layout xml file.

To make a view as bottom sheets add it as a child of CoordinatorLayout and then set BottomSheetBehavior to it (app:layout_behavior="android.support.design.widget.BottomSheetBehavior")

<?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"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:background="@android:color/holo_red_dark">

    <Button
        android:id="@+id/show_dialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Show Dialog"/>

    <LinearLayout
        android:id="@+id/bottom_sheet_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
        android:orientation="vertical"
        android:background="@android:color/holo_blue_dark"
        app:behavior_hideable="true">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:text="Item 1"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:text="Item 2"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:text="Item 3"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:text="Item 4"/>

    </LinearLayout>

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

Set app:behavior_hideable(BottomSheetBehavior.setHideable) to true to hide and show the bottom sheets by scrolling.
app: behavior_peekHeight(BottomSheetBehavior.setPeekHeight) can be used to set a display height for the bottom sheets.

You can programatically set these attributes on BottomSheetBehavior as well. BottomSheetBehavior is obtained from the botton sheet view as BottomSheetBehavior.from(bottom_sheet_view)

If you’d like to receive callbacks for state changes, you can set a BottomSheetCallback.

        behavior = BottomSheetBehavior.from(bottom_sheet_view);
        behavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
            @Override
            public void onStateChanged(View bottomSheet, int newState) {
                switch (newState) {
                case BottomSheetBehavior.STATE_DRAGGING:
                    break;
                case BottomSheetBehavior.STATE_SETTLING:
                    break;
                case BottomSheetBehavior.STATE_EXPANDED:
                    break;
                case BottomSheetBehavior.STATE_COLLAPSED:
                    break;
                case BottomSheetBehavior.STATE_HIDDEN:
                    break;
                }
            }

            @Override
            public void onSlide(View bottomSheet, float slideOffset) {
            }
        });

State can be set programatically using BottomSheetBehavior.setState

Source code for the example can be found at https://github.com/trsquarelab/androidexamples/tree/master/BottomSheets