Bottom Sheets in Material Design
What is Bottom Sheet
Published in
2 min readSep 15, 2016
- 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();
}
});
}
}