Bottom Sheets in Material Design

What is Bottom Sheet

• A bottom sheet is a sheet that slides up from the bottom edge of the screen.
• Bottom sheets are displayed as a result of user triggered action, and also it can reveal additional content by swiping up.

Bottom sheets are added to the Android Support Library in v23.2.0 version.

Bottom sheets have two use cases:

• Persistent Bottom Sheet
• Modal Bottom Sheet

Persistent Bottom Sheet

Persistent bottom sheets remain visible on the screen. You can convert any view in your layout to a persistent bottom sheet.

For persistent bottom sheet to work, your layout should contain a coordinator layout, and then in any child view of your coordinator layout, you can make it as a persistent bottom sheet by adding a custom property “app:layout_behavior”.

<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"
    tools:context="com.compindia.bottomsheetesexampleapp.MainActivity">
    <Button
        android:id="@+id/bt_main"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="CLick"
        />
    <!--
    Persistent BottomSheet in android example
    -->
    <FrameLayout
        android:id="@+id/fl_main"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:background="@color/colorPrimary"
        android:fitsSystemWindows="true"
        app:behavior_peekHeight="50dp"
        app:layout_behavior="@string/bottom_sheet_behavior"
        >
        <include layout="@layout/layout_bootomsheet"/>
    </FrameLayout>
</android.support.design.widget.CoordinatorLayout>

Modal Bottom Sheet

Modal bottom sheets are dialogs which are alternatives to content choosers, simple menus, and dialogs.

public class MainActivity extends AppCompatActivity {
    private Button btMain;
    private FrameLayout flMain;
    private BottomSheetDialog bottomSheetBehavior;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        setUpViews();
    }
    private void setUpViews() {
        btMain = (Button) findViewById(R.id.bt_main);
        btMain.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                View layoutDialog = getLayoutInflater().inflate(R.layout.layout_bootomsheet, null);
                /**
                * ModelBottom Sheet in android example
                * */
                bottomSheetBehavior = new BottomSheetDialog(MainActivity.this);
                bottomSheetBehavior.setContentView(layoutDialog);
                bottomSheetBehavior.show();
            }
        });
    }
}