Pierre Pierre - 5 months ago 55
Android Question

BottomSheetDialog with transparent background

I would like to display a bottom sheet dialog less wide than the screen width.

For instance, the Share option from Google Play Music on a Nexus 9.

the Share option from Google Play Music on a Nexus 9

Do you know how to achieve this ?

For now I just succed to reduce the width of the sheet content but the background is still at the screen width and display a white background.

Some code:

build.gradle

compile 'com.android.support:design:23.3.0'


MainActivity

@Override
protected void onCreate(Bundle savedInstanceState) {
...

mBottomSheetDialog = new BottomSheetDialog(this);
mBottomSheetDialog.setContentView(R.layout.sheet_test);
mBottomSheetDialog.setOnDismissListener(new DialogInterface.OnDismissListener() {
@Override
public void onDismiss(DialogInterface dialog) {
mBottomSheetDialog = null;
}
});
mBottomSheetDialog.show();
}


sheet_test

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="100dp"
android:layout_height="match_parent"
android:orientation="vertical">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">

<TextView
style="@style/TextAppearance.AppCompat.Body1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:text="Some Text"
android:textColor="@color/colorPrimary" />

<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#ddd" />

<TextView
style="@style/TextAppearance.AppCompat.Body1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="16dp"
android:text="Some Text" />

<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#ddd" />

</LinearLayout>

</android.support.v4.widget.NestedScrollView>

Answer

So, I figured out 2 solutions.

Best one:

Create an activity with transparent background just for your bottom sheet. Implement your own layout with a coordinator layout and a bottom sheet. Set the margin you want. Set the content you want.

Not tested yet.

Lazy one:

Extends BottomSheetDialogFragment, in onActivityCreated add:

    Resources resources = getResources();

    // Set margin for Landscape Mode. Maybe a more elegant solution will be to implements our own bottom sheet with our own margins.
    if (resources.getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE) {
        assert getView() != null;
        View parent = (View) getView().getParent();
        CoordinatorLayout.LayoutParams layoutParams = (CoordinatorLayout.LayoutParams) parent.getLayoutParams();
        layoutParams.setMargins(
                resources.getDimensionPixelSize(R.dimen.bottom_sheet_margin_left), // 64dp
                0,
                resources.getDimensionPixelSize(R.dimen.bottom_sheet_margin_right), // 64dp
                0
        );
        parent.setLayoutParams(layoutParams);
    }