CODEWITHSUNDEEP
androidandroid-layoutdialogbottom-sheetandroid-bottomsheetdialog
Hasnain Ghias
Hasnain Ghias

Reputation: 69

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.

Upvotes: 1

Views: 2930

Answers (2)

Arvin Rezaei
Arvin Rezaei

Reputation: 888

for transparent background you must apply theme while creating the dialog first create the below style

<item name="android:background">@android:color/transparent</item>

then apply it using BottomSheetDialog(this,R.style.yourStyle)

you can use bottomSheetDialog.getWindow().setDimAmount(0) for setting up dim amount

Upvotes: 1

Ivan J. Lee
Ivan J. Lee

Reputation: 111

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>

Upvotes: 3

Related Questions