Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Transparent bottom sheet layout in Android

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>
like image 879
JB2 Avatar asked May 28 '16 14:05

JB2


1 Answers

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

like image 141
Eugene Voronoy Avatar answered Oct 12 '22 03:10

Eugene Voronoy