How to implement persistent Bottom Sheets from Material Design docs

Question

Anyone has or can provide more information about it? Just searched half of the web but couldn't find anything more, not even a demo app from google.

https://www.google.com/design/spec/components/bottom-sheets.html#bottom-sheets-persistent-bottom-sheets

How can I implement these persistent Bottom Sheets?

Answer 1

Here's a great tutorial of how to do it just with the Android libraries, including the Android Support Library:

https://questdot.com/android-persistent-and-modal-bottom-sheet-tutorial/

I will copy and paste the code here for posterity.

Add dependency to build.gradle:

compile 'com.android.support:design:25.1.1'

res/layout/custom_bottom_sheet_dialog.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/bottomSheetLayout"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:background="@android:color/holo_red_light"
    android:padding="16dp"
    app:behavior_peekHeight="60dp"
    app:layout_behavior="@string/bottom_sheet_behavior">
    <!--  app:behavior_hideable="true"-->
    <TextView
        android:id="@+id/bottomSheetHeading"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Any Title"
        android:textAppearance="@android:style/TextAppearance.Large"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:text="This is Modal Bottom Sheet Dialog"
        android:textAppearance="@android:style/TextAppearance.Large"
        android:layout_below="@+id/bottomSheetHeading"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="79dp" />
</RelativeLayout>

res/layout/content_bottom_sheet.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/bottomSheetLayout"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:background="@android:color/holo_blue_dark"
    android:padding="16dp"
    app:behavior_peekHeight="60dp"
    app:layout_behavior="@string/bottom_sheet_behavior">

    <TextView
        android:id="@+id/bottomSheetHeading"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Expand Me"
        android:textAppearance="@android:style/TextAppearance.Large"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:text="This is Persistent Bottom Sheet"
        android:textAppearance="@android:style/TextAppearance.Large"
        android:layout_centerVertical="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />
</RelativeLayout>

res/layout/content_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:context="com.questdot.bottomsheetexample.MainActivity"
    tools:showIn="@layout/activity_main">

    <Button
        android:id="@+id/show_bottom_sheet_dialog_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Show Modal Bottom Sheet" />
</RelativeLayout>

res/layout/activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
  >

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
      >

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

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

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

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


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

CustomBottomSheetDialogFragment.java:

import android.os.Bundle;
import android.support.design.widget.BottomSheetDialogFragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class CustomBottomSheetDialogFragment extends BottomSheetDialogFragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View v = inflater.inflate(R.layout.custom_bottom_sheet_dialog, container, false);
        return v;
    }


}

MainActivity.java:

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private BottomSheetBehavior bottomSheetBehavior;
    private Button showBottomSheetDialogButton;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        bottomSheetBehavior = BottomSheetBehavior.from(findViewById(R.id.bottomSheetLayout));
        showBottomSheetDialogButton = (Button) findViewById(R.id.show_bottom_sheet_dialog_button);
        showBottomSheetDialogButton.setOnClickListener(this);

        bottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
            @Override
            public void onStateChanged(View bottomSheet, int newState) {

                if (newState == BottomSheetBehavior.STATE_EXPANDED) {
                    //      bottomSheetHeading.setText(getString(R.string.text_collapse_me));
                } else {
                    //     bottomSheetHeading.setText(getString(R.string.text_expand_me));
                }

                switch (newState) {
                    case BottomSheetBehavior.STATE_COLLAPSED:
                        Log.e("Bottom Sheet Behaviour", "STATE_COLLAPSED");
                        break;
                    case BottomSheetBehavior.STATE_DRAGGING:
                        Log.e("Bottom Sheet Behaviour", "STATE_DRAGGING");
                        break;
                    case BottomSheetBehavior.STATE_EXPANDED:
                        Log.e("Bottom Sheet Behaviour", "STATE_EXPANDED");
                        break;
                    case BottomSheetBehavior.STATE_HIDDEN:
                        Log.e("Bottom Sheet Behaviour", "STATE_HIDDEN");
                        break;
                    case BottomSheetBehavior.STATE_SETTLING:
                        Log.e("Bottom Sheet Behaviour", "STATE_SETTLING");
                        break;
                }
            }


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

            }
        });



    }


    @Override
    public void onClick(View v) {
        switch (v.getId()) {

            case R.id.show_bottom_sheet_dialog_button:
                new CustomBottomSheetDialogFragment().show(getSupportFragmentManager(), "Dialog");
                break;

        }
    }
}

Answer 2

I had to do this today, making something fancy like on Google Maps, and found a way:

1. import this library

2. To allow touching outside of the bottom sheet and without dismissing it, call :

   bottomSheetLayout.setInterceptContentTouch(false);
   

3. to remove the dimming effect, call:

    bottomSheetLayout.setShouldDimContentView(false);