Dim Screen and Block Interaction with BottomSheets

Question

BottomSheetBehavior has been introduced in Android Design Support Library 23.2, however it does not dim the rest of the screen and does not block interaction with the rest of the UI. Is there anyway this can be achieved?

Answer 1

public class BottomSheetDimmedFragment extends BottomSheetDialogFragment {
    public static final String TAG = BottomSheetDimmedFragment.class.getSimpleName();

    @NonNull
    @Override
    public Dialog onCreateDialog(final Bundle savedInstanceState) {
        final BottomSheetDialog dialog = (BottomSheetDialog) super.onCreateDialog(savedInstanceState);
        final View view = View.inflate(getContext(), R.layout.test, null);
        dialog.setContentView(view);
        return dialog;
    }

    public void show(final FragmentActivity fragmentActivity) {
        show(fragmentActivity.getSupportFragmentManager(), TAG);
    }
}

In your activity:

BottomSheetDimmedFragment sheet = new BottomSheetDimmedFragment();
sheet.show(this);

Now, you will have a dim and also when clicked on a dim the dialog will close.

Implementation taken from here.

Answer 2

Use the bottom sheet with a fragment instead of a view :)

Answer 3

Note that there are two implementations:

BottomSheetBehavior and BottomSheetDialogFragment.

Use BottomSheetDialogFragment to get the functionality you need.

Also when using BottomSheetBehavior set the layout's android:clickable="true". That way clicks don't go through when you click on empty space. (For clarity: clickable is set on the layout containing the tag app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior")