CODEWITHSUNDEEP
android
Zxcv
Zxcv

Reputation: 1737

BottomSheetDialog with transparent background

I would like to display a bottom sheet dialog less wide than the screen width.

For instance, the Share option from Google Play Music on a Nexus 9.

the Share option from Google Play Music on a Nexus 9

Do you know how to achieve this ?

For now I just succed to reduce the width of the sheet content but the background is still at the screen width and display a white background.

Some code:

build.gradle

compile 'com.android.support:design:23.3.0'

MainActivity

@Override
protected void onCreate(Bundle savedInstanceState) {
    ...

    mBottomSheetDialog = new BottomSheetDialog(this);
    mBottomSheetDialog.setContentView(R.layout.sheet_test);
    mBottomSheetDialog.setOnDismissListener(new DialogInterface.OnDismissListener() {
        @Override
        public void onDismiss(DialogInterface dialog) {
            mBottomSheetDialog = null;
        }
    });
    mBottomSheetDialog.show();
}

sheet_test

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="100dp"
    android:layout_height="match_parent"
    android:orientation="vertical">

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

        <TextView
            style="@style/TextAppearance.AppCompat.Body1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            android:text="Some Text"
            android:textColor="@color/colorPrimary" />

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#ddd" />

        <TextView
            style="@style/TextAppearance.AppCompat.Body1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="16dp"
            android:text="Some Text" />

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#ddd" />

    </LinearLayout>

</android.support.v4.widget.NestedScrollView>

Upvotes: 108

Views: 120833

Answers (27)

Aditya_Giri
Aditya_Giri

Reputation: 76

If you're looking to create a transparent Bottom Sheet Dialog, follow these steps:

Step 1: Create a Transparent Style Define a custom style in your styles.xml to make the Bottom Sheet Dialog's background transparent. Here’s the code:

<style name="MyTransparentBottomSheetDialogTheme" parent="Theme.AppCompat.Light">
    <!-- Set the background to transparent -->
    <item name="android:background">@android:color/transparent</item>
    <item name="android:colorBackground">@android:color/transparent</item>
</style>

This style ensures the Bottom Sheet Dialog will have a transparent background.

Step 2: Override the onCreateDialog Method In your class that extends BottomSheetDialogFragment, override the onCreateDialog method and apply the custom style:

public class YourClass extends BottomSheetDialogFragment {
    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        // Use the custom transparent theme
        return new BottomSheetDialog(getContext(), R.style.MyTransparentBottomSheetDialogTheme);
    }
}

That's it!

Upvotes: 0

Gabriel Ferreira
Gabriel Ferreira

Reputation: 475

Following the idea from Marco RS (that for me was the only solution at all that works), you can create a clean extension and apply wherever you want on your dialogs.

Extension:

fun BottomSheetDialogFragment.setTransparentBackground() {
    dialog?.apply {
        setOnShowListener {
            val bottomSheet = findViewById<View?>(com.google.android.material.R.id.design_bottom_sheet)
            bottomSheet?.setBackgroundResource(android.R.color.transparent)
        }
    }
}

Example:

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
    setTransparentBackground()
}

Upvotes: 22

Arun Joseph
Arun Joseph

Reputation: 3154

Adding android:background or android:colorBackground property will not make the bottom sheet transparent as suggested by many answers!

Adding, backgroundTint to sheetStyle is the key to making bottomsheet transparent.

Eg:

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

  <!--The following piece is key, -->

  <style name="BottomSheetStyle" parent="Widget.MaterialComponents.BottomSheet.Modal">
    <item name="backgroundTint">@android:color/transparent</item>
  </style>

Pass this style as second parameter while creating the BottomSheetDialog in java or kt.

Eg:

BottomSheetDialog(context, R.style.BottomSheetDialog)

Resource:
A good resource to learn more about BottomSheet https://m2.material.io/develop/android/components/bottom-sheet-dialog-fragment

Upvotes: 5

Faizan Saeed
Faizan Saeed

Reputation: 1

I know I'm much late but in kotlin the thing that really helped me out is adding this line in your fragment in onCreate():

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setStyle(STYLE_NORMAL,R.style.CustomBottomSheetDialog)
}

And in styles():

  <style name="CustomBottomSheetDialog" parent="Theme.Design.Light.BottomSheetDialog"> 
  <item name="bottomSheetStyle">@style/bottomSheetStyleWrapper       
  </item>
  </style>
  <style name="bottomSheetStyleWrapper" 
  parent="Widget.Design.BottomSheet.Modal">
  <item
name="android:background">@android:color/transparent</item>
  </style>

Works perfectly fine for me.

Upvotes: 0

Duraga Prasad Thokala
Duraga Prasad Thokala

Reputation: 1

 <style name="BaseBottomSheetDialogTrasn" parent="@style/Theme.Design.Light.BottomSheetDialog">
    <item name="android:windowIsFloating">false</item>
    <item name="bottomSheetStyle">@style/BottomSheetTrans</item>
</style>


<style name="BottomSheetDialogThemeTrans" parent="BaseBottomSheetDialogTrasn">
    <item name="android:statusBarColor">@android:color/transparent</item>
    <item name="android:navigationBarColor">@color/white</item>
</style>


 <style name="BottomSheetTrans" parent="@style/Widget.Design.BottomSheet.Modal">
    <item name="android:background">@android:color/transparent</item>
</style>

And finally add the parameter in BottomSheetDialog(context,R.style.BottomSheetDialogThemeTrans)

Upvotes: 0

Muhammad Maqsood
Muhammad Maqsood

Reputation: 1662

For me below worked:

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
    (view.parent as? View)?.setBackgroundColor(Color.TRANSPARENT)
}

Upvotes: 0

Badr Ba Sowid
Badr Ba Sowid

Reputation: 46

1 - Initialize the bottom sheet dialog this way.

BottomSheetDialog bottomSheetDialog = new BottomSheetDialog(YourActivity.this, R.style.BottomSheetDialog);

2 - Add this style as suggested by Gnzlt.

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

<style name="BottomSheetDialogStyle" parent="Widget.MaterialComponents.BottomSheet.Modal">
    <item name="android:background">@android:color/transparent</item>
    <item name="android:backgroundTint">@android:color/transparent</item>
</style>

Upvotes: 2

Naveen Verma
Naveen Verma

Reputation: 11

Just Add the following code in your style.xml

<style name="BottomDialogStyle" parent="Theme.Design.Light.BottomSheetDialog">
    <item name="android:windowIsFloating">false</item>
    <item name="android:statusBarColor">@android:color/transparent</item>
    <item name="android:windowSoftInputMode">adjustResize</item>
    <item name="bottomSheetStyle">@style/CustomBottomSheetStyle</item>
</style>

<style name="CustomBottomSheetStyle" parent="Widget.Design.BottomSheet.Modal">
    <item name="android:background">@android:color/transparent</item>
</style>

Also, update the onCreate

 override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setStyle(STYLE_NORMAL, R.style.BottomDialogStyle)
}

Upvotes: 1

Bhunnu Baba
Bhunnu Baba

Reputation: 1802

1. Firstly Add Style in your theme:

   <style name="MyTransparentBottomSheetDialogTheme" parent="Theme.AppCompat.Light">
       <item name="android:background">@android:color/transparent</item>
       <item name="android:colorBackground">@android:color/transparent</item>
   </style>

2. Then attach above style with BottomSheetDialogFragment same as below :

   @Override
   public Dialog onCreateDialog(Bundle savedInstanceState) {
    return new BottomSheetDialog(getContext(),R.style.MyTransparentBottomSheetDialogTheme);
   }

Upvotes: 2

Gnzlt
Gnzlt

Reputation: 4572

This worked for me when using BottomSheetDialogFragment:

public class CustomDialogFragment extends BottomSheetDialogFragment {

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

Also add this to your styles.xml

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

<style name="CustomBottomSheetStyle" parent="Widget.Design.BottomSheet.Modal">
    <item name="android:background">@android:color/transparent</item>
</style>

Option 2:

override fun getTheme() = R.style.CustomBottomSheetDialogTheme

Upvotes: 223

angryITguy
angryITguy

Reputation: 9551

Found that I needed to use a variant on the accepted answer, by updating to MaterialComponents to make compatible with AndroidX as well as adding "backgroundTint" as transparent as well:

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

<style name="BottomSheetDialogStyle" parent="Widget.MaterialComponents.BottomSheet.Modal">
    <item name="android:background">@android:color/transparent</item>
    <item name="android:backgroundTint">@android:color/transparent</item>
</style>

Apply the "BottomSheetDialog" style to the fragment as per the original answer:

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

Upvotes: 1

HongSec Park
HongSec Park

Reputation: 1221

BottomSheetDialog bottomSheetDialog =new BottomSheetDialog(this,R.style.SheetDialog);

<style name="SheetDialog" parent="Theme.Design.Light.BottomSheetDialog">
    <!--<item name="android:windowCloseOnTouchOutside">false</item>-->
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:colorBackground">     @android:color/transparent</item>
    <item name="android:backgroundDimEnabled">true</item>
    <item name="android:backgroundDimAmount">0.3</item>
    <item name="android:windowFrame">@null</item>
    <item name="android:windowIsFloating">true</item>
</style>

Upvotes: 103

chankruze
chankruze

Reputation: 1146

There are several hackish ways to do it. The way I solved this issue is the recommended way. Let's understand why?

In the docs, it's mentioned that

Modal bottom sheet. This is a version of DialogFragment that shows a bottom sheet using BottomSheetDialog instead of a floating dialog.

This means there should be a method that BottomSheetDialogFragment uses to replace the default Dialog with a BottomSheetDialog.

The only method BottomSheetDialogFragment overrides is onCreateDialog(). So we're gonna use this public method to override our dialog style.

Recommended Method

In the fragment that extends BottomSheetDialogFragment overrDide onCreateDialog() which is a public method exposed by BottomSheetDialogFragment itself.

    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
        setStyle(STYLE_NO_FRAME, R.style.BottomSheetDialog)
        return super.onCreateDialog(savedInstanceState)
    }

besides that, in themes.xml override BottomSheetDialog theme and add transparent background.

    <style name="BottomSheetDialog" parent="ThemeOverlay.MaterialComponents.BottomSheetDialog">
        <item name="bottomSheetStyle">@style/BottomSheetModal</item>
    </style>

    <style name="BottomSheetModal" parent="Widget.Design.BottomSheet.Modal">
        <item name="android:background">@android:color/transparent</item>
    </style>

More about:

  • BottomSheetDialogFragment: here
  • onCreateDialog: here
  • theming the BottomSheetDialog: here

Upvotes: 14

Hadi
Hadi

Reputation: 574

If you want all your BottomSheets inherit that behavior, just do as follows:

<style name="Theme.InstaDownloader" parent="Theme.MaterialComponents.Light.NoActionBar">
       ...
        <item name="bottomSheetDialogTheme">@style/BottomSheetTheme</item>
       ...
 </style>

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

 <style name="BottomSheetStyle" parent="Widget.Design.BottomSheet.Modal">
        <item name="android:background">@android:color/transparent</item>
 </style>

Upvotes: 0

Harold Gao
Harold Gao

Reputation: 101

BottomSheetDialog will get the R.attr.bottomSheetDialogTheme style from your context's theme, or else use the default R.style.Theme_Design_Light_BottomSheetDialog.

The layout xml of BottomSheetDialog is R.layout.design_bottom_sheet_dialog. The main content is a FrameLayout with id/design_bottom_sheet whose style is ?attr/bottomSheetStyle.

If you extends a style with parent Theme.Design.Light.BottomSheetDialog then all your default attrs like colorPrimary, colorAccent may be overrided. Thus ThemeOverlay is recommended to be used in View Theme tree. You should extend a style from ThemeOverlay.MaterialComponents.Light.BottomSheetDialog like this:

<style name="Widget.Test.ButtonSheetDialogTheme" parent="ThemeOverlay.MaterialComponents.Light.BottomSheetDialog">
    <item name="bottomSheetStyle">@style/Widget.Test.BottomSheet.Modal</item>
</style>

<style name="Widget.Test.BottomSheet.Modal" parent="Widget.MaterialComponents.BottomSheet.Modal">
    <item name="backgroundTint">@android:color/transparent</item>
</style>

You have to extend a style from Widget.MaterialComponents.BottomSheet.Modal, because the default style contains these:

<style name="Widget.MaterialComponents.BottomSheet" parent="Widget.Design.BottomSheet.Modal">
    <item name="android:background">@null</item>
    <item name="backgroundTint">?attr/colorSurface</item>
    ....
</style>

BottomSheetDialog's background is decided both by android:background and backgroundTint. But I am not sure why backgroundTint is effective while android:background is null. 🤔??

For more knowledge about Android Theme:

Upvotes: 6

Mostafa Ghanbari
Mostafa Ghanbari

Reputation: 116

use "setOnShowListener" for your dialog instance, like this in kotlin:

        yourDialogInstance.setOnShowListener {

        //this line transparent your dialog background
        (dialogView.parent as ViewGroup).background = 
             ColorDrawable(Color.TRANSPARENT)

        }

complete code in kotlin :

BottomSheetDialog(this).apply {

val dialogView = LayoutInflater.from(context)
    .inflate(R.layout.your_dialog_layout, null, false)

setContentView(dialogView)

setOnShowListener {
    (dialogView.parent as ViewGroup).background = 
             ColorDrawable(Color.TRANSPARENT)
}

show()
}

Upvotes: 3

Arpan24x7
Arpan24x7

Reputation: 668

If you are using BottomSheetBehavior then use the below code on collapse and Expand states

behavior.setState(BottomSheetBehavior.STATE_EXPANDED);             ((View)getParent()).setBackgroundColor(getResources().getColor(<your desire color>));

and

behavior.setState(BottomSheetBehavior.STATE_COLLAPSED); ((View).getParent()).setBackgroundColor(getResources().getColor(android.R.color.transparent));

Also, use

 behavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
            @Override
            public void onStateChanged(@NonNull View bottomSheet, int newState) {
                if (newState == BottomSheetBehavior.STATE_COLLAPSED) {
                    ((View) mScrollview.getParent()).setBackgroundColor(getResources().getColor(android.R.color.transparent));
                }
            }
            @Override
            public void onSlide(@NonNull View bottomSheet, float slideOffset) {
                // React to dragging events  
            }
        });

Upvotes: 0

TaQuangTu
TaQuangTu

Reputation: 2343

I know this question is old but I still answer the question and hope it useful. By default, the layout specified in onCreateView() method will be added to a FrameLayout with white background by BottomSheetDialogFragment. Therefor, you should set the FrameLayout's background to transparent in onStart() method.

class YourDialog() : BaseBottomDialog() {
   
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        return inflater.inflate(R.layout.layout_your_dialog, container, false)
    }
    override fun onStart() {
        super.onStart()
        (view!!.parent as View).setBackgroundColor(Color.TRANSPARENT)
    }
}

Upvotes: 1

Marco RS
Marco RS

Reputation: 8245

The following function override worked in a BottomSheetDialogFragment implementation:

class MyTopicBottomSheet : BottomSheetDialogFragment() {


    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {

       return super.onCreateDialog(savedInstanceState).apply {
           // window?.setDimAmount(0.2f) // Set dim amount here
           setOnShowListener {
            val bottomSheet = findViewById<View>(com.google.android.material.R.id.design_bottom_sheet) as FrameLayout
            bottomSheet.setBackgroundResource(android.R.color.transparent)
           }
       }
    }

    // Rest of your class here
}

Upvotes: 30

Jaydeep purohit
Jaydeep purohit

Reputation: 1566

This is simplest solution for set transparent background of BottomSheetDialogFragment

It makes use of the following line of code:

 ((View) contentView.getParent()).setBackgroundColor(getResources().getColor(android.R.color.transparent));

Example in context:

public class ShareOneTouchAlertNewBottom extends BottomSheetDialogFragment {
    @Override
    public void setupDialog(Dialog dialog, int style) {
        super.setupDialog(dialog, style);
        View contentView = View.inflate(getContext(), R.layout.fragment_bottom_sheet, null);
        dialog.setContentView(contentView);

        CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) ((View) contentView.getParent())
                .getLayoutParams();
        CoordinatorLayout.Behavior behavior = params.getBehavior();
        ((View) contentView.getParent()).setBackgroundColor(Color.TRANSPARENT);
    }
}

Upvotes: 65

sharath yadhav
sharath yadhav

Reputation: 546

Sorry got it late here is what you are looking for upvote if u have done it successfully 

  @Override    
  public void onActivityCreated(@Nullable Bundle savedInstanceState) {
    super.onActivityCreated(savedInstanceState);
    ((View) getView().getParent()).setBackgroundColor(Color.TRANSPARENT);
}

Add this line in bottom sheet dialog fragment's on activity created. This will do the trick

Upvotes: 31

abdul hameed basha
abdul hameed basha

Reputation: 131

This worked for me.. Oncreate Dialog get the window set color 

public Dialog onCreateDialog(Bundle savedInstanceState) {
    Dialog dialog = super.onCreateDialog(savedInstanceState);
    if(dialog.getWindow() !=null){
        dialog.getWindow().setGravity(Gravity.BOTTOM);
        dialog.getWindow().setBackgroundDrawableResource(android.R.color.transparent);
        dialog.getWindow().clearFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND);
        dialog.setCancelable(false);
    }
    return dialog;
}

Upvotes: 3

Vytautas Berankis
Vytautas Berankis

Reputation: 325

I had same problem, nothing helped. Used this code to solve the problem: 

  override fun onActivityCreated(savedInstanceState: Bundle?) {
    super.onActivityCreated(savedInstanceState)
    val bottomSheet = (view!!.parent as View)
    bottomSheet.backgroundTintMode = PorterDuff.Mode.CLEAR
    bottomSheet.backgroundTintList = ColorStateList.valueOf(Color.TRANSPARENT)
    bottomSheet.setBackgroundColor(Color.TRANSPARENT)
}

P.S. com.google.android.material:material:1.1.0-alpha09

Upvotes: 7

Sergey Golovin
Sergey Golovin

Reputation: 76

Late answer, but faced this problem myself and found better solution then any of suggested.

You can wrap your sheet layout with another layout with transparent background and add margin from it (16dp here): 

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/transparent"
    >
    <android.support.v4.widget.NestedScrollView
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:layout_margin="16dp">

        ....

Then add transparent background to your sheet like in Gnzlt answer:

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

<style name="CustomBottomSheetStyle" parent="Widget.Design.BottomSheet.Modal">
    <item name="android:background">@android:color/transparent</item>
</style>

And voila, don't need another activity.

Upvotes: 5

Ali mohammadi
Ali mohammadi

Reputation: 1899

This is your answer :D

View contentView=LayoutInflater.from(getContext()).inflate(R.layout.bs_add_event,null);
    mBottomSheetDialog.setContentView(contentView);

    CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) ((View) contentView.getParent()).getLayoutParams();
    params.setMargins(50,50,50,50); // set margin as your wish.

and also change android:layout_width="100dp" in nestedScroolView to android:layout_width="match_parent"

Upvotes: 2

Conti
Conti

Reputation: 1007

Bit of a hack but it works for making background transparent. Obviously you can replace the 'transparent' with whatever colour you want.

mBottomSheetDialog.getWindow().findViewById(R.id.design_bottom_sheet).setBackgroundResource(android.R.color.transparent);

Upvotes: 11

Zxcv
Zxcv

Reputation: 1737

So, I figured out 2 solutions.

Best one:

Create an activity with transparent background just for your bottom sheet. Implement your own layout with a coordinator layout and a bottom sheet. Set the margin you want. Set the content you want.

Not tested yet.

Lazy one:

Extends BottomSheetDialogFragment, in onActivityCreated add:

    Resources resources = getResources();

    // Set margin for Landscape Mode. Maybe a more elegant solution will be to implements our own bottom sheet with our own margins.
    if (resources.getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE) {
        assert getView() != null;
        View parent = (View) getView().getParent();
        CoordinatorLayout.LayoutParams layoutParams = (CoordinatorLayout.LayoutParams) parent.getLayoutParams();
        layoutParams.setMargins(
                resources.getDimensionPixelSize(R.dimen.bottom_sheet_margin_left), // 64dp
                0,
                resources.getDimensionPixelSize(R.dimen.bottom_sheet_margin_right), // 64dp
                0
        );
        parent.setLayoutParams(layoutParams);
    }

Upvotes: 9

Related Questions