Search code examples
androidandroid-layoutdialogbottom-sheetandroid-bottomsheetdialog

Android bottomsheet dialog tansparent background


I have made a bottom sheet dialog with Frame layout. Everything is working fine but I am unable to make the background transparent.

I have given transparent color to both the Frame layout and the parent layout of the dialog UI.

Here is the code for the Frame layout:

<FrameLayout
            android:id="@+id/nearby_bottom_sheet"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/transparent"
            app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior" />

Code for the bottomsheet dialog UI:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:background="@android:color/transparent"
    android:orientation="vertical">

    <com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_marginStart="6dp"
        android:layout_marginEnd="6dp"
        app:cardCornerRadius="20dp"
        app:cardElevation="10dp"
        app:cardPreventCornerOverlap="false"
        app:cardUseCompatPadding="true">

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

           ....
        </LinearLayout>

    </com.google.android.material.card.MaterialCardView>
</LinearLayout>

This is how I am initializing the dialog:

FrameLayout bottom_sheet;
bottomSheetBehavior = BottomSheetBehavior.from(bottom_sheet);
View view = getLayoutInflater().inflate(R.layout.nearby_floating_sheet, null);
bottomSheetDialog = new BottomSheetDialog(getActivity());
bottomSheetDialog.setContentView(view);
bottomSheetDialog.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
((View)view.getParent()).setBackgroundColor(getResources().getColor(android.R.color.transparent));
bottomSheetDialog.show();

Here is my output: enter image description here

Can someone please help me with this.


Solution

  • Maybe you should also set your Dialog Window to transparent.

    add the following code to your BottomSheetDialog.

    // BottomSheetDialog
    public BottomSheetDialog(Context context) {
        super(context, R.style.Bottom_Sheet_Style); //set your own dialog theme
        // ...
        Window window = getWindow();
        window.setBackgroundDrawableResource(android.R.color.transparent);       
        WindowManager.LayoutParams lp = window.getAttributes();
        lp.alpha = 1.0f;
        lp.dimAmount = 0.0f; 
        window.setAttributes(lp);
       // ...
    }
    

    Then add the following code to your res/values/styles.xml. If you don't have the file, then create one.

    <style name="Bottom_Sheet_Style" parent="@android:style/Theme.Dialog">  
        <item name="android:windowBackground">@android:color/transparent</item>  
        <item name="android:windowNoTitle">true</item>  
        <item name="android:backgroundDimEnabled">true</item>  
    </style>