透明底部弹出窗口在Android中的布局

Question

我希望能够制作一个透明的底部菜单布局，这样就可以看到它下面的视图内容。底部菜单已经按照预期工作，但是当我将背景设置为@null或@android:color/transparent时，布局视图变成了白色而不是透明的。我的布局如下所示：

app_bar_main.xml：

<android.support.design.widget.CoordinatorLayout 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="match_parent"
    android:id="@+id/coordinatorLayout"
    android:background="@android:color/transparent"
    android:fitsSystemWindows="true"
    tools:context=".core.activities.MainActivity">
    <!-- stuff here -->
    <LinearLayout
        android:id="@+id/bottom_sheet"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:background="@null"
        android:orientation="vertical"
        app:layout_behavior="@string/bottom_sheet_behavior">
    </LinearLayout>

</android.support.design.widget.CoordinatorLayout>

线性布局中的id为bottom_sheet可以容纳底部工具栏，该工具栏本身定义如下：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:background="@null"
    android:layout_height="match_parent">
    <LinearLayout android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@null"
        android:orientation="vertical">

        <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/bottom_sheet_placeholder_layout"
            android:layout_weight="0.6"
            android:layout_width="match_parent"
            android:background="@null"
            android:layout_height="50dp"
            android:orientation="horizontal">
        </LinearLayout>
        <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/bottom_sheet_layout"
            android:layout_margin="0dp"
            android:layout_weight="0.4"
            android:layout_width="match_parent"
            android:background="@color/my_background"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <ProgressBar
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:id="@+id/my_progress_bar" />

            <TextView
                android:layout_marginTop="5dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:text="Large Text"
                android:textColor="@color/my_text"
                android:id="@+id/txt_my_info"
                android:layout_gravity="center_horizontal"
                android:visibility="gone"
                android:textSize="48px" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:text="Medium Text"
                android:id="@+id/txt_my_address"
                android:textColor="@color/my_secondary_text"
                android:visibility="gone"
                android:layout_gravity="center_horizontal" />
        </LinearLayout>
    </LinearLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/btn_edit_tree_info"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:clickable="true"
        android:layout_marginTop="-62dp"
        android:elevation="100dp"
        android:src="@drawable/ic_create_black_24dp"
        app:layout_anchor="@id/bottom_sheet_layout"
        app:layout_anchorGravity="top|end|right"
        app:useCompatPadding="true"/>
</android.support.design.widget.CoordinatorLayout>

- JB2

---

android:background="@color/curio_background" 的颜色是什么？ - Nguyễn Trung Hiếu

它的颜色是 #FFD162 :) - JB2

可能是Android中的透明布局？的重复问题。 - JB2

Answer 1

答案非常简单：只需添加以下代码行：

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

不要更改标准ID（R.id.design_bottom_sheet和android.R.color.transparent），这将使底部表对话框的背景透明。

- Eugene Voronoy

---

谢谢，但我需要添加decorView才能使其工作。Kotlin示例：myDialog.window.decorView .findViewById<View>(R.id.design_bottom_sheet) .setBackgroundResource(android.R.color.transparent) - Zhanbolat Raimbekov

Answer 2

private void setupDialogBackground() {
    getDialog().setOnShowListener(new DialogInterface.OnShowListener() {
        @Override
        public void onShow(DialogInterface dialog) {
            BottomSheetDialog d = (BottomSheetDialog) dialog;
            FrameLayout bottomSheet = (FrameLayout) d.findViewById(R.id.design_bottom_sheet);
            if (bottomSheet == null)
                return;
            bottomSheetBehavior = BottomSheetBehavior.from(bottomSheet);
            bottomSheet.setBackground(null);
        }
    });
}

- kolorszczak

---

非常好！不过最后一行的下面那一行可以删掉。 - Shirane85

这对我有用！ bottomSheet.setBackground(null); - Chanh

Answer 3

将此内容添加到styles.xml中。

 <style name="TransparentDialog" 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>


   BottomSheetDialog bsDialog = new BottomSheetDialog(this,R.style.TransparentDialog);
   bsDialog.setContentView(R.layout.bottomsheet_dialog);
   bsDialog.show();

看，它可以工作了

- Tushar Saha

Answer 4

我必须等到在onActivityCreated中调用setContentView之后才能访问容器。另外，虽然getDialog().getWindow().findViewById(R.id.design_bottom_sheet)成功找到了FrameLayout，但我决定避免明确调用内部定义的id，而是使用getView().getParent()。

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

- user650881

Answer 5

在您的bottomSheet中添加以下内容：setupDialog(final Dialog dialog, int style)

dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));

同时还需要在根视图中添加android:background="@android:color/transparent"。

- Qamar

Answer 6

只需要使用这个样式：

<style name="BaseBottomSheetDialogThem" parent="@style/Theme.Design.Light.BottomSheetDialog">
    <item name="android:windowIsFloating">true</item>
    <item name="android:backgroundDimEnabled">false</item>
</style>

并将样式设置为BaseBottomSheetDialogThem。

- TinaTT2

Answer 7

这是 Kotlin 版本，感谢 kolorszczak。希望它能节省转换时间。

val dialog = BottomSheetDialog(activity!!)
 dialog.setOnShowListener {
            var dialogTmp: BottomSheetDialog = it as BottomSheetDialog
            var bottomSheet: FrameLayout? =
                dialogTmp.findViewById(R.id.design_bottom_sheet) as FrameLayout?
                    ?: return@setOnShowListener
            bottomSheet?.background = null
        }

- Manohar

Answer 8

在你的color.xml文件中创建：<color name="colorTransparent">#00000000</color>，并使用android:background="@color/colorTransparent"。

- BOUTERBIAT Oualid

---

这与使用@android:color/transparent相同，但它不起作用。@android:color/transparent被定义为<color name="transparent">#00000000</color>。 - JB2

请使用android:background="@null"代替。 - BOUTERBIAT Oualid

谢谢，不过正如我在问题中所说的那样，问题是这个方法不起作用 :) - JB2

Answer 9

更改背景颜色

   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/bottom_sheet_placeholder_layout"
        android:layout_weight="0.6"
        android:layout_width="match_parent"
        android:background="#00FFFFFF"
        android:layout_height="50dp"
        android:orientation="horizontal">
    </LinearLayout>

试一下吧！

- Nguyễn Trung Hiếu

---

谢谢Nguyễn。我尝试了，但不幸的是这并没有起作用。问题仍然存在... - JB2