具有透明背景的 BottomSheetDialog

我想显示一个底部工作表对话框宽度小于屏幕宽度。

例如,来自 Google Play Music on a Nexus9的分享选项。

the Share option from Google Play Music on a Nexus 9

你知道怎么做吗?

现在我只是成功地减少了工作表内容的宽度,但是背景仍然是在屏幕宽度和显示一个白色的背景。

一些代码:

建造,分级

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

主要活动

@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();
}

纸张试验

<?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>
92013 次浏览

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"

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);
}

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);

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);
}
}

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

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>

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.

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

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

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
}

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;
}

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)
}
}

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?>(R.id.design_bottom_sheet)
bottomSheet?.setBackgroundResource(android.R.color.transparent)
}
}

Example:

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

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
}
});

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()
}

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:

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>

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

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);
}

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);
}

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)
}

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>

For me below worked:

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
(view.parent as? View)?.setBackgroundColor(Color.TRANSPARENT)
}
 <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)

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.

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