Layout background is not clipped according to background drawable in BottomSheet layout

Question

I want to make the layout of a BottomSheet with rounded corners, but setting a drawable with corner radius does not clip the layout background. I am using a BottomSheetDialogFragment.

fragment_a.xml

<androidx.constraintlayout.widget.ConstraintLayout xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/round_rectangle">
   <!-- other views here -->
</androidx.constraintlayout.widget.ConstraintLayout>

round_rectangle.xml

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"   >
    <solid
        android:color="@android:color/white" />
    <stroke
        android:width="2dp"
        android:color="#C4CDE0" />
    <padding
        android:left="0dp"
        android:right="0dp"
        android:top="0dp"
        android:bottom="0dp" />
    <corners
        android:topLeftRadius="16dp"
        android:topRightRadius="16dp" />
</shape>

Current result:

Tried:

Clipping programetically using

view.clipToOutline = true

Please help! Thanks in advance!

At least for me, it is not clear the issue. What is the desired result? — guipivoto, Jul 03 '19 at 12:18
I want to get rid of white background outside the grey color round border. — user158, Jul 03 '19 at 12:22
It is impossible to get that automatically, I guess.. You should emulate the efect in your drawable. What is the color of existing background.. Is it defined by you? — guipivoto, Jul 03 '19 at 12:25
You can add rounded corners without defining a background drawable. Check this [post](https://stackoverflow.com/a/57627229/2016562) — Gabriele Mariotti, Oct 10 '19 at 08:17

Cheticamp · Accepted Answer · 2019-07-07T00:29:36.887

The color of your rounded corners is coming from the color of the bottom sheet container. To determine how to make our transparent corners, we need to inspect the layout. The layout inspector identifies the key components that interest us: the bottom sheet itself (id/bottomSheet) and its frame (id/design_bottom_sheet).

We will need to change the background color of the bottom sheet frame, id/design_bottom_sheet, to transparent to get our rounded corners.

Finding the frame is easy once it is available. One place to set the frame's background, once the dialog is created and the fragment's creation is far enough along, is in onActivityCreated() of your custom BottomSheetDialogFragment. At this point in the fragment's lifecycle, the view hierarchy is instantiated.

@Override
public void onActivityCreated(Bundle bundle) {
    super.onActivityCreated(bundle);
    View frameParent = ((View) getDialog().findViewById(R.id.bottomSheet).getParent());
    frameParent.setBackgroundColor(Color.TRANSPARENT);
}

You could also just do a findViewById() for the frame itself:

getDialog().findViewById(R.id.design_bottom_sheet).setBackgroundColor(Color.TRANSPARENT)

Either way depends on a knowledge of internal structure of the BottomSheetDialogFragment, so pick the one that you prefer.

I tried your snippet in my `BottomSheetFragment` it just change the background color of activity — user158, Jul 04 '19 at 01:42
@user158 Missed the part about the fragment. Is it a _BottomSheetDialogFragment_ or a _BottomSheetDialog_? — Cheticamp, Jul 04 '19 at 18:58
thanks for the willingness to help. It's a `BottomSheetDialogFragment` — user158, Jul 05 '19 at 03:48
sorry for leaving out some info in the question, I updated the question. your answer worked. — user158, Jul 07 '19 at 09:39

Layout background is not clipped according to background drawable in BottomSheet layout

1 Answers1