How to implement Bottom Sheets using new design support library 23.2

Question

Google release the new update to support library 23.2 in that they added bottom sheet feature. Can any one tell how to implement that bottom sheet using that library.

Answer 1

use layout like below

<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.support.design.widget.AppBarLayout>          <android.support.design.widget.CollapsingToolbarLayout>              <ImageView/>              <android.support.v7.widget.Toolbar/>          </android.support.design.widget.CollapsingToolbarLayout>      </android.support.design.widget.AppBarLayout>      <android.support.v4.widget.NestedScrollView         android:layout_width="match_parent"         android:layout_height="match_parent"         app:layout_behavior="@string/appbar_scrolling_view_behavior">          <LinearLayout>              //.....          </LinearLayout>       </android.support.v4.widget.NestedScrollView>      <FrameLayout         android:id="@+id/bottom_sheet"         android:layout_width="match_parent"         android:layout_height="wrap_content"         app:behavior_hideable="true"         app:layout_behavior="android.support.design.widget.BottomSheetBehavior">          //your bottom sheet layout          </LinearLayout>     </FrameLayout>       <android.support.design.widget.FloatingActionButton/>  </android.support.design.widget.CoordinatorLayout> 

---

in Activity

CoordinatorLayout coordinatorLayout = (CoordinatorLayout) findViewById(R.id.main_content); // The View with the BottomSheetBehavior View bottomSheet = coordinatorLayout.findViewById(R.id.bottom_sheet); final BottomSheetBehavior behavior = BottomSheetBehavior.from(bottomSheet); behavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {     @Override     public void onStateChanged(@NonNull View bottomSheet, int newState) {         // React to state change         Log.e("onStateChanged", "onStateChanged:" + newState);         if (newState == BottomSheetBehavior.STATE_EXPANDED) {                 fab.setVisibility(View.GONE);             } else {                 fab.setVisibility(View.VISIBLE);             }     }      @Override     public void onSlide(@NonNull View bottomSheet, float slideOffset) {         // React to dragging events         Log.e("onSlide", "onSlide");     } });  behavior.setPeekHeight(100); 

Answer 2

You can just follow instructions provided here: http://android-developers.blogspot.com/2016/02/android-support-library-232.html

"By attaching a BottomSheetBehavior to a child View of a CoordinatorLayout (i.e., adding app:layout_behavior=”android.support.design.widget.BottomSheetBehavior”), you’ll automatically get the appropriate touch detection to transition between five state..."

<?xml version="1.0" encoding="utf-8"?>  <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent"     xmlns:app="http://schemas.android.com/apk/res-auto"     android:background="@color/white">      <!-- Your Widgets -->      <FrameLayout         android:id="@+id/bottom_sheet"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:background="#ff0000"         app:behavior_hideable="true"         app:layout_behavior="android.support.design.widget.BottomSheetBehavior">          <Button             android:layout_width="match_parent"             android:layout_height="wrap_content"             android:text="Test" />      </FrameLayout>  </android.support.design.widget.CoordinatorLayout> 

Then from your activity:

View bottomSheet = findViewById(R.id.bottom_sheet); BottomSheetBehavior bottomSheetBehavior = BottomSheetBehavior.from(bottomSheet); bottomSheetBehavior.setState(<desired state>);