Using BottomSheetDialogFragment with Material Design Guideline

As per the material design guideline for BottomSheet, there are two types of BottomSheets:

1. Modal bottom sheets: It Can be implemented using BottomSheetDialog or BottomSheetDialogFragment. Elevation is higher than the app. It is fundamentally acting as the dialog.
2. Persistent bottom sheets: It can be implemented using BottomSheetBehavior in conjunction with a CoordinatorLayout.

Links: https://material.io/guidelines/components/bottom-sheets.html#bottom-sheets-modal-bottom-sheets

https://material.io/components/android/catalog/bottom-sheet-dialog-fragment/

In this article, we are going to learn how to implement the BottomSheetDialogFragment to use the bottom sheet as a modal dialog.

Final Outcome:

So lets get started…

Step 1: Create the layout file for bottom sheet (consider the material design guideline while building the guideline):

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="@dimen/dp_8"
    android:layout_marginTop="@dimen/dp_8"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tv_bottom_sheet_heading"
        android:layout_width="wrap_content"
        android:layout_height="@dimen/dp_56"
        android:layout_marginEnd="@dimen/dp_16"
        android:layout_marginStart="@dimen/dp_16"
        android:gravity="center"
        android:text="@string/bottom_sheet_option_heading"
        android:textColor="@color/md_bottom_sheet_title_color"
        android:textSize="16sp" />

    <TextView
        android:id="@+id/tv_btn_add_photo_camera"
        android:layout_width="match_parent"
        android:layout_height="@dimen/dp_48"
        android:layout_marginEnd="@dimen/dp_16"
        android:layout_marginStart="@dimen/dp_16"
        android:backgroundTint="@android:color/white"
        android:drawablePadding="@dimen/dp_32"
        android:drawableStart="@drawable/ic_add_a_photo"
        android:drawableTint="@color/md_bottom_sheet_text_color"
        android:gravity="start|center_vertical"
        android:text="@string/bottom_sheet_option_camera"
        android:textColor="@color/md_bottom_sheet_text_color"
        android:textSize="16sp" />

    <TextView
        android:id="@+id/tv_btn_add_photo_gallery"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_marginEnd="@dimen/dp_16"
        android:layout_marginStart="@dimen/dp_16"
        android:backgroundTint="@android:color/white"
        android:drawablePadding="@dimen/dp_32"
        android:drawableStart="@drawable/ic_gallery_photo"
        android:drawableTint="@color/md_bottom_sheet_text_color"
        android:gravity="start|center_vertical"
        android:text="@string/bottom_sheet_option_gallery"
        android:textColor="@color/md_bottom_sheet_text_color"
        android:textSize="16sp" />

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_marginBottom="@dimen/dp_8"
   
android:layout_marginTop="@dimen/md_bottom_sheet_separator_top_margin"
        android:background="@color/grayTextColor" />

    <TextView
        android:id="@+id/tv_btn_remove_photo"
        android:layout_width="match_parent"
        android:layout_height="@dimen/dp_48"
        android:layout_marginEnd="@dimen/dp_16"
        android:layout_marginStart="@dimen/dp_16"
        android:backgroundTint="@android:color/white"
        android:drawablePadding="@dimen/dp_32"
        android:drawableStart="@drawable/ic_delete_photo"
        android:drawableTint="@color/md_bottom_sheet_text_color"
        android:gravity="start|center_vertical"
        android:text="@string/bottom_sheet_option_remove_photo"
        android:textColor="@color/md_bottom_sheet_text_color"
        android:textSize="16sp" />

</LinearLayout>

Step 2: Create the dimen.xml file:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="dp_8">8dp</dimen>
    <dimen name="dp_16">16dp</dimen>
    <dimen name="dp_24">24dp</dimen>
    <dimen name="dp_32">32dp</dimen>
    <dimen name="dp_40">40dp</dimen>
    <dimen name="dp_48">48dp</dimen>
    <dimen name="dp_56">56dp</dimen>
    <dimen name="dp_64">64dp</dimen>
    <dimen name="dp_72">72dp</dimen>
    <dimen name="dp_80">80dp</dimen>
    <dimen name="dp_160">160dp</dimen>

    <dimen name="md_bottom_sheet_separator_top_margin">7dp</dimen>
</resources>

The dp used while creating the bottom sheet layout are adhere to the Material Design Guidelines.

Step 3: The string.xml file:

<string name="bottom_sheet_option_camera">Use Camera</string>
<string name="bottom_sheet_option_gallery">Upload from Gallery</string>
<string name="bottom_sheet_option_heading">Add Photo</string>
<string name="bottom_sheet_option_remove_photo">Remove Photo</string>

Step 4: Create the custom BottomSheetDialogFragment

public class AddPhotoBottomDialogFragment extends BottomSheetDialogFragment{

    public static AddPhotoBottomDialogFragment newInstance() {
        return new AddPhotoBottomDialogFragment();
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater,
                             @Nullable ViewGroup container,
                             @Nullable Bundle savedInstanceState) {

        View view = inflater.inflate(R.layout.layout_photo_bottom_sheet, container,
                false);

        // get the views and attach the listener

        return view;

    }
}

Step 5: To show the dialog fragment in the activity:

AddPhotoBottomDialogFragment addPhotoBottomDialogFragment =
        AddPhotoBottomDialogFragment.newInstance();
addPhotoBottomDialogFragment.show(getSupportFragmentManager(),
        "add_photo_dialog_fragment");

That’s it... Now you can run the application and check the BottomSheet in your application.

You can create the custom callback (interfaces) in the custom bottom sheet dialog fragment to notify the activity when one of the button is tapped on the Bottom Sheet (dialog fragment).

Thank you for reading the article... :)