关于android:BottomSheetDialog具有透明背景

BottomSheetDialog with transparent background

我想显示一个比屏幕宽度宽的底部对话框。

例如,Nexus 9上的Google Play音乐分享选项。

the Share option from Google Play Music on a Nexus 9

你知道如何实现这个目标吗?

现在我刚刚尝试减少工作表内容的宽度,但背景仍然在屏幕宽度并显示白色背景。

一些代码:

的build.gradle

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

主要活动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<?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>


使用BottomSheetDialogFragment时,这对我有用:

1
2
3
4
5
6
7
8
9
10
public class CustomDialogFragment extends BottomSheetDialogFragment {

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

  ...
}

同时将其添加到styles.xml

1
2
3
4
5
6
7
<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>


这是设置BottomSheetDialogFragment透明背景的最简单的解决方案

((查看)contentView.getParent())。setBackgroundColor(getResources()。getColor(android.R.color.transparent));

1
2
3
4
5
6
7
8
9
10
11
12
13
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(getResources().getColor(android.R.color.transparent));
    }
}


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

样式xml代码

1
2
3
4
5
6
7
8
9
10
<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>


对不起,如果你已经成功完成它,你在寻找upvote就是这么晚了

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

添加此行是底部对话框片段,这将起到作用


所以,我想出了2个解决方案。

最好的:

为您的底部工作表创建一个透明背景的活动。
使用协调器布局和底部工作表实现您自己的布局。
设置所需的边距。
设置所需的内容。

尚未测试。

懒人:

扩展BottomSheetDialogFragment,在onActivityCreated中添加:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    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);
    }


有点破解,但它适用于使背景透明。显然你可以用你想要的任何颜色替换'透明'。

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


这是你的答案:D

1
2
3
4
5
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.

并将android:layout_width="100dp" in nestedScroolView更改为
android:layout_width="match_parent"


迟到的答案,但我自己面临这个问题,并找到了更好的解决方案,然后建议。

您可以使用透明背景的另一个布局包装您的工作表布局,并从中添加边距(此处为16dp):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?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">

        ....

然后在Gnzlt答案中为您的工作表添加透明背景:

1
2
3
4
5
6
7
<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>

瞧,不需要另外的活动。


我有同样的问题,没有任何帮助。
使用此代码来解决问题:

1
2
3
4
5
6
7
  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)
}

附: com.google.android.material:材料:1.1.0-alpha09