Bottom Sheets in Android

Bottom Sheets

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.

A bottom sheet can be a structural part of your page and also it can be a temporary modal.

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

Bottom sheets have two use cases:

1. Persistent Bottom Sheet
2. Modal Bottom Sheet

1. 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”.

Mainly you need to configure two properties:

<LinearLayout
    android:id="@+id/bottom_sheet"
    android:elevation="4dp"
    android:minHeight="120dp"
    app:behavior_peekHeight="120dp"
    ...
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
    ...
</LinearLayout>

behavior_peekHeight sets the visible part of the sheet.

Protip: To make it work, peek height must be set to at least “1dp”

layout_behavior marks a view as a bottom sheet.

2. Modal Bottom Sheet:

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

You can display any content in your modal bottom sheet. And it can be defined like that:

View view = getLayoutInflater().inflate(R.layout.sheet_main, null);
RecyclerView recyclerView = (RecyclerView) view.findViewById(R.id.recyclerView);
recyclerView.setHasFixedSize(true);
recyclerView.setLayoutManager(new LinearLayoutManager(this));
recyclerView.setAdapter(adapter);


dialog = new BottomSheetDialog(this);
dialog.setContentView(view);
dialog.show();

Conclusion

Bottom sheets are great addition to the support design library. You can use bottom sheets as a content chooser, or to show extra content to the user after some action.

You can read design specs of bottom sheets here.

Example Project

You can download and test the example project here.

Comment below, and thank you for reading this post.