Since they look better than simple Dialogs (well, in some situations), I’ve decided to investigate on them and eventually convert some dialogs in Glucosio to BottomSheets.

This one is the Dialog we display after a long click on a item of the RecyclerView. As you can see, it allows you to delete or edit a reading of the list.

Design Library also provides a BottomSheetDialog, a dialog styled as a bottom sheet. So you don’t have to manually make a view, attach a BottomSheet behavior and handle additional typical features of a dialog, like dim background.

First, we design a simple BottomSheet based on the old Dialog.

It’s basically made of 1 main LinearLayout (with vertical orientation) and 2 LinearLayout (with horizontal orientation) with the ImageView and the TextView.

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout app:layout_behavior="android.support.design.widget.BottomSheetBehavior"

android:id="@+id/fragment_history_menu_bottom"

android:layout_width="match_parent"

android:layout_height="180dp"

android:orientation="vertical"

android:background="#ffffff"

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto">

<LinearLayout

android:id="@+id/fragment_history_bottom_sheet_edit"

android:layout_width="match_parent"

android:layout_height="60dp"

android:clickable="true"

android:focusable="true"

android:orientation="horizontal"

android:foreground="?android:attr/selectableItemBackground"

android:padding="16dp">

<ImageView

android:layout_width="wrap_content"

android:layout_height="match_parent"

app:srcCompat="@drawable/ic_mode_edit_grey_24dp"

/>

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:layout_marginLeft="16dp"

android:text="@string/dialog_edit"/>

</LinearLayout>

<LinearLayout

android:id="@+id/fragment_history_bottom_sheet_delete"

android:layout_width="match_parent"

android:layout_height="60dp"

android:clickable="true"

android:focusable="true"

android:orientation="horizontal"

android:foreground="?android:attr/selectableItemBackground"

android:padding="16dp">

<ImageView

android:layout_width="wrap_content"

android:layout_height="match_parent"

app:srcCompat="@drawable/ic_delete_grey_24dp"

/>

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:layout_marginLeft="16dp"

android:text="@string/dialog_delete"/>

</LinearLayout>

</LinearLayout>

Coding a BottomSheetDialog is very easy too.

BottomSheetDialog mBottomSheetDialog = new BottomSheetDialog(getActivity()); View sheetView = getActivity().getLayoutInflater().inflate(R.layout.fragment_history_bottom_sheet, null); mBottomSheetDialog.setContentView(sheetView);

mBottomSheetDialog.show();

This code will create a new BottomSheetDialog and inflate the layout we previously made (R.layout.fragment_history_bottom_sheet).

Then, to add OnClickListeners to the buttons of the BottomSheet, we simply take the items from the sheetView we defined.

LinearLayout edit = (LinearLayout) sheetView.findViewById(R.id.fragment_history_bottom_sheet_edit); LinearLayout delete = (LinearLayout) sheetView.findViewById(R.id.fragment_history_bottom_sheet_delete);

And then we add the listeners:

edit.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

// Edit code here;

}

});



delete.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

// Delete code here;

}

});

We can even add some listeners to the BottomSheet and for example do something when the dialog is dismissed:

mBottomSheetDialog.setOnDismissListener(new DialogInterface.OnDismissListener() {

@Override

public void onDismiss(DialogInterface dialog) {

// Do something

}

});

Happy coding :)