Remove White Background in Bottom Sheet Dialog Fragment

Question

How to remove white background in bottom sheet dialog fragment?

I have tried the answer in this or set the background in the layout xml to transparent, but still get this result

Here is my code

public class BottomSheetFragment extends BottomSheetDialogFragment {

private Record record;

private MainFragment fragment;

public static BottomSheetFragment getInstance() {
    return new BottomSheetFragment ();
}

public BottomSheetFragment setRecord(Record record) {
    this.record = record;
    return this;
}

public BottomSheetFragment setFragment(MainFragment fragment) {
    this.fragment = fragment;
    return this;
}

@TargetApi(Build.VERSION_CODES.O)
@Override
public void onViewCreated(View view, @Nullable final Bundle savedInstanceState) {
    super.onViewCreated(view, savedInstanceState);

    getDialog().requestWindowFeature(Window.FEATURE_NO_TITLE);
    getDialog().getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT);
    setStyle(DialogFragment.STYLE_NO_FRAME, android.R.style.Theme);

    //Set content
}

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
    return inflater.inflate(R.layout.layout_bottom_sheet, container);
}

@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
}
}

layout_bottom_sheet.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/cardView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="60dp"
android:background="@drawable/bg_cardboard">

</FrameLayout>

Answer 1

You will need to set transparent background to bottom sheet view itself.

Here is an example is Kotlin:

class YourBottomSheetFragment : BaseBottomSheetDialogFragment() {

    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
        val dialog = super.onCreateDialog(savedInstanceState) as BottomSheetDialog
        dialog.setOnShowListener { setupBottomSheet(it) }
        return dialog
    }

    private fun setupBottomSheet(dialogInterface: DialogInterface) {
        val bottomSheetDialog = dialogInterface as BottomSheetDialog
        val bottomSheet = bottomSheetDialog.findViewById<View>(
            com.google.android.material.R.id.design_bottom_sheet)
            ?: return
        bottomSheet.setBackgroundColor(Color.TRANSPARENT)
    }
}

Answer 2

you must be override "onCreateDialog" function for your bottom sheet dialog fragment, like this in kotlin:

        override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
        val dialog = super.onCreateDialog(savedInstanceState)

        dialog.setOnShowListener {
            //this line transparent your dialog background
            (view?.parent as ViewGroup).background = 
            ColorDrawable(Color.TRANSPARENT)
        }

        return dialog
       }

Answer 3

Use this theme to change background color for your dialog

<style name="MyDialog" parent="@android:style/Theme.Dialog">
        <item name="android:windowFrame">@null</item>
        <item name="android:windowBackground">Your custom color here</item>
        <item name="android:windowIsFloating">false</item>
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:windowTitleStyle">@null</item>
        <item name="android:colorBackgroundCacheHint">@null</item>
        <item name="android:windowAnimationStyle">@android:style/Animation.Dialog</item>
        <item name="android:windowSoftInputMode">stateUnspecified|adjustPan</item>
        <item name="android:gravity">center</item>
    </style>

and your onViewCreated should be like or only add setStyle(DialogFragment.STYLE_NO_TITLE, R.style.MyDialog);

@Override
public void onViewCreated(View view, @Nullable final Bundle savedInstanceState) {
    super.onViewCreated(view, savedInstanceState);

    getDialog().requestWindowFeature(Window.FEATURE_NO_TITLE);
    getDialog().getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT);
  setStyle(DialogFragment.STYLE_NO_TITLE, R.style.MyDialog);

    //Set content
}