I am trying to make a transparent bottom sheet layout, that would allow me to see the contents of the view below it. The bottom sheet is working as expected, however when I set the background to either @null
or @android:color/transparent
, the layout's view is white, as opposed to transparent. My layout is as follows:
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>
The linear layout with id bottom_sheet
holds, well, my bottom sheet. The sheet itself is defined as follows:
<?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>
The answer is much more easier: just add this line
myDialog
.getWindow()
.findViewById(R.id.design_bottom_sheet)
.setBackgroundResource(android.R.color.transparent);
And don't change standard ids (R.id.design_bottom_sheet and android.R.color.transparent). It makes background of Bottom Sheet Dialog transparent
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With