BottomSheetDialog with transparent background
AndroidAndroid Problem Overview
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.
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>
Android Solutions
Solution 1 - Android
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
Solution 2 - Android
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>
Solution 3 - Android
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);
}
}
Solution 4 - Android
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
Solution 5 - Android
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
}
Solution 6 - Android
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);
Solution 7 - Android
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:
Solution 8 - Android
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);
}
Solution 9 - Android
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()
}
Solution 10 - Android
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
Solution 11 - Android
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.
Solution 12 - Android
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:
Solution 13 - Android
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;
}
Solution 14 - Android
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()
}
Solution 15 - Android
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
Solution 16 - Android
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)
}
}
Solution 17 - Android
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);
}
Solution 18 - Android
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);
}
Solution 19 - Android
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>
Solution 20 - Android
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
}
});
Solution 21 - Android
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>
Solution 22 - Android
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)
}
Solution 23 - Android
For me below worked:
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
(view.parent as? View)?.setBackgroundColor(Color.TRANSPARENT)
}