How can I make the corners of my bottom sheet dialog rounded? [duplicate]

Question

I'm trying to make the top corners of my BottomSheetDialog rounded, but I haven't had any luck with anything online. This is what I would like for it to look like:

No matter what I've tried, I keep getting this:

I've tried the method here and using shapeAppearanceLargeComponent (what I'm using now).

Here is my code:

styles.xml

 <style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    ...
    <item name="shapeAppearanceLargeComponent">@style/CustomShapeAppearanceBottomSheetDialog</item>
</style>

<style name="CustomShapeAppearanceBottomSheetDialog" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSizeTopRight">16dp</item>
    <item name="cornerSizeTopLeft">16dp</item>
</style>

BottomNavMenuFragment:

public class BottomNavMenuFragment extends BottomSheetDialogFragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_bottom_nav_drawer, container, false);
    }
}

And this is how I'm showing the fragment:

BottomNavMenuFragment navFragment = new BottomNavMenuFragment();
navFragment.show(getSupportFragmentManager(), navFragment.getTag());

Nothing I seem to do works. Could someone point me in the right direction?

Japha

check this #43853062 – Boon

I have, but it still doesn't work. – Japha

Your code posted above is different – Boon

I know, I tried it and it didn't make any difference. – Japha

Does this answer your question? Round corner for BottomSheetDialogFragment – Lamartine

Answer 1

After messing around with the possible solutions people posted, I figured out that my code was working fine, but the corners of my NavigationView were obscuring the rounded corners of the drawer. After adding some padding, the rounded corners are displaying correctly.

Japha

Can you please post your solution? – Myotome

Answer 2

Follow the below steps to attain top rounded corner bottomsheet:

Step 1: Create drawable rounded_top_corners.xml file inside drawable folder

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@android:color/white"/>
    <corners android:topLeftRadius="8dp"
        android:topRightRadius="8dp"/>
</shape>

Step 2: Create below styles in styles.xml

 <style name="BottomSheetDialogStyle" parent="Theme.Design.Light.BottomSheetDialog">
        <item name="bottomSheetStyle">@style/bottomSheetBackground</item>
    </style>

    <style name="bottomSheetBackground" parent="Widget.Design.BottomSheet.Modal">
        <item name="android:background">@drawable/rounded_top_corners</item>
    </style>

Step 3: Add style in BottomNavMenuFragment class

 @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setStyle(STYLE_NORMAL, R.style.BottomSheetDialogStyle);
    }

That's it, the style will be applied to bottomsheet.

Bobine

This will work not for anyone using the Material Component BottomSheet, see this answer instead: #43853062 – Keys

Answer 3

Create a drawable and set it for the bottomsheet inside the setOnShowListener as below.(where R.drawable.bottom_sheet_bkg is my background xml file).

        val dialogBinding = MyBottomSheetDialogBinding.inflate(layoutInflater)
        val bottomSheet = BottomSheetDialog(requireContext())
        bottomSheet.setContentView(dialogBinding.root)
        bottomSheet.setOnShowListener { dia ->
            val bottomSheetDialog = dia as BottomSheetDialog
            val bottomSheetInternal: FrameLayout =
                bottomSheetDialog.findViewById(com.google.android.material.R.id.design_bottom_sheet)!!
            bottomSheetInternal.setBackgroundResource(R.drawable.bottom_sheet_bkg)
        }
        bottomSheet.setCancelable(true)
        bottomSheet.show()

XML File:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/white" />
    <corners
        android:topLeftRadius="5dp"
        android:topRightRadius="5dp" />
</shape>

Result

Answer 4

You can create following shape in your drawable:

drawable/rounded_corners.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:shape="rectangle">
    <solid android:color="#fff"/>
    <corners 
        android:topLeftRadius="20dp"
        android:topRightRadius="20dp"/>
</shape>

Then for the layout for your bottom sheet you can add this drawable as a background property.

android:background="@drawable/rounded_corners"

Tarsier