how to put a transparent layout above floating action button

Question

I am working on an app and i want to put a transparent view over whole screen and i have gained success on this by some percent but my screen contains floating action buttons also
I am unable to put the transparent layout above floating action button

this is my 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:id="@+id/root_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.groomefy.consumer.Trending.DetailedActivity">

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar"
    android:layout_width="370dp"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/toolbar_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <RelativeLayout
            android:id="@+id/layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="-10dp"
            app:layout_collapseMode="parallax">

            <ImageView
                android:id="@+id/main_image"
                android:layout_width="match_parent"
                android:layout_height="430dp"
                android:scaleType="fitEnd"
                android:src="@drawable/image_placeholder_square" />

            <!--
                            <ImageView
                                android:id="@+id/curve_image"
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:layout_alignParentBottom="true"
                                android:layout_marginBottom="-20dp"
                                android:scaleType="fitEnd"
                                android:src="@drawable/postdetail_curve"
                                app:layout_anchor="@id/main_image"
                                app:layout_collapseMode="none" />
            -->
        </RelativeLayout>

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/white"
            app:contentInsetEnd="0dp"
            app:contentInsetLeft="0dp"
            app:contentInsetRight="0dp"
            app:contentInsetStart="0dp"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/AppTheme.PopupOverlay">

            <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:padding="10dp">

                    <ImageButton
                        android:id="@+id/btn_cancel"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentLeft="true"
                        android:background="@android:color/transparent"
                        android:padding="10dp"
                        android:src="@drawable/backicon" />

                    <com.groomefy.consumer.fontutils.OpenSansBold
                        android:id="@+id/title_text_view"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerInParent="true"
                        android:text="@string/fragment_blogs"
                        android:textColor="@color/title_text_color"
                        android:textSize="@dimen/title_text_size"
                        android:textStyle="bold" />

                    <ImageView
                        android:id="@+id/iv_more"
                        android:layout_width="@dimen/more_btn_height"
                        android:layout_height="@dimen/more_btn_height"
                        android:layout_alignParentRight="true"
                        android:layout_centerVertical="true"
                        android:scaleType="center"
                        android:src="@drawable/more" />

                </RelativeLayout>

                <View
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:background="#a6a6a6" />

            </LinearLayout>
        </android.support.v7.widget.Toolbar>


    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

<android.support.v4.widget.NestedScrollView
    android:id="@+id/nested_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/main_root_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        card_view:cardBackgroundColor="@color/white">

        <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="35dp"
            android:gravity="left"
            android:orientation="vertical"
            android:padding="5dp">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:paddingBottom="5dp"
                    android:paddingLeft="10dp"
                    android:paddingRight="10dp">

                    <TextView
                        android:id="@+id/likes"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentLeft="true"
                        android:text="likes"
                        android:textSize="16sp" />

                    <TextView
                        android:id="@+id/comments"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="20dp"
                        android:layout_toRightOf="@+id/likes"
                        android:text="comments"
                        android:visibility="gone" />

                </RelativeLayout>

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <com.groomefy.consumer.fontutils.OpenSansRegular
                        android:id="@+id/blog_main_text"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:inputType="textMultiLine"
                        android:paddingLeft="10dp"
                        android:paddingRight="10dp"
                        android:text="di am first  #firsttag    i am second #secondtag and i am third     #thirtag   di am first  #firsttag    i am second #secondtag and i am third     #thirtag  di am first  #firsttag    i am second #secondtag and i am third     #thirtag  di am first  #firsttag    i am second #secondtag and i am third     #thirtag"
                        android:textSize="15sp" />

                    <com.groomefy.consumer.fontutils.OpenSansRegular
                        android:id="@+id/time_text"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_below="@+id/blog_main_text"
                        android:gravity="center_vertical"
                        android:paddingLeft="10dp"
                        android:paddingRight="10dp"
                        android:paddingTop="5dp"
                        android:text="this is time text "
                        android:textSize="15sp" />

                </RelativeLayout>

            </LinearLayout>

            <RelativeLayout
                android:id="@+id/header_view"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="10dp">

                <FrameLayout
                    android:id="@+id/fl_profile_pic"
                    android:layout_width="45dp"
                    android:layout_height="45dp">

                    <ImageView
                        android:id="@+id/image_view_profile"
                        android:layout_width="@dimen/list_user_pro_img_radius"
                        android:layout_height="@dimen/list_user_pro_img_radius"
                        android:layout_marginLeft="3dp"
                        android:background="@color/grey_3"
                        android:scaleType="center"
                        android:src="@drawable/profile_placeholder_g" />

                    <ImageView
                        android:layout_width="48dp"
                        android:layout_height="@dimen/list_user_pro_img_radius"
                        android:background="@drawable/profile_placeholder_top_layer"
                        android:scaleType="fitXY" />
                </FrameLayout>

                <com.groomefy.consumer.fontutils.OpenSansBold
                    android:id="@+id/text_view_blogger_name"
                    style="@style/black.regular"
                    android:layout_centerVertical="true"
                    android:layout_marginLeft="@dimen/mar_hor_regular"
                    android:layout_toRightOf="@+id/fl_profile_pic"
                    android:gravity="top"
                    android:text="Jaine Helor" />
            </RelativeLayout>

            <com.groomefy.consumer.fontutils.OpenSansBold
                android:id="@+id/get_similar_suggestions"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_margin="10dp"
                android:background="@drawable/text_rectangle"
                android:gravity="center"
                android:padding="2dp"
                android:text="Get Similar Suggestions"
                android:textAllCaps="true"
                android:textColor="@color/title_text_color"
                android:textStyle="bold" />

        </LinearLayout>


    </android.support.v7.widget.CardView>


</android.support.v4.widget.NestedScrollView>

<android.support.v7.widget.RecyclerView
    android:id="@+id/recycler_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />
<View
    android:id="@+id/tranparent_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/grey_very_light_semi_transparent"
    android:elevation="15dp"
    android:fitsSystemWindows="true"
    android:visibility="gone" />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/like_img"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="80dp"
    android:background="@color/white"
    android:elevation="10dp"
    android:src="@drawable/like"
    app:fabSize="normal"
    app:layout_anchor="@id/app_bar"
    app:layout_anchorGravity="bottom|center_vertical" />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fav_img"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:elevation="10dp"
    android:src="@drawable/add_to_stylebook"
    app:fabSize="normal"
    app:layout_anchor="@id/app_bar"
    app:layout_anchorGravity="bottom|center" />


<android.support.design.widget.FloatingActionButton
    android:id="@+id/share_img"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginRight="70dp"
    android:elevation="10dp"
    android:src="@drawable/share"
    app:fabSize="normal"
    app:layout_anchor="@id/app_bar"
    app:layout_anchorGravity="bottom|right" />


<LinearLayout
    android:id="@+id/bottom_sheet"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:clipToPadding="true"
    android:fitsSystemWindows="true"
    android:orientation="vertical"
    app:layout_behavior="android.support.design.widget.BottomSheetBehavior">

    <android.support.v7.widget.CardView
        android:id="@+id/card_view_sharing"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:cardBackgroundColor="@color/white">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <com.groomefy.consumer.fontutils.OpenSansBold
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/grey_very_light"
                android:gravity="center"
                android:padding="5dp"
                android:text="@string/share_this_look"
                android:textAllCaps="true"
                android:textColor="@color/black_text"
                android:textSize="@dimen/sharing_text_size" />


            <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="horizontal"
                android:padding="10dp">

                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:orientation="vertical">

                    <ImageView
                        android:id="@+id/share_on_facebook"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:adjustViewBounds="true"
                        android:src="@drawable/facebook" />

                    <com.groomefy.consumer.fontutils.OpenSansRegular
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="10dp"
                        android:text="Facebook"
                        android:textSize="@dimen/sharing_text_size" />
                </LinearLayout>

                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:orientation="vertical">

                    <ImageView
                        android:id="@+id/share_on_whatsapp"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:adjustViewBounds="true"
                        android:src="@drawable/whatsapp" />

                    <com.groomefy.consumer.fontutils.OpenSansRegular
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="10dp"
                        android:text="whatsapp"
                        android:textSize="@dimen/sharing_text_size" />

                </LinearLayout>

                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:orientation="vertical">

                    <ImageView
                        android:id="@+id/share_on_instagram"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:adjustViewBounds="true"
                        android:src="@drawable/instagram" />

                    <com.groomefy.consumer.fontutils.OpenSansRegular
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="10dp"
                        android:text="Instagram"
                        android:textSize="@dimen/sharing_text_size" />

                </LinearLayout>

            </LinearLayout>


        </LinearLayout>


    </android.support.v7.widget.CardView>
</LinearLayout>

I have tried to fix this by elevation but failed to achieve this
can anyone please suggest me what should be the approach to put the layout above floating action button

Answer 1

add this line in your transparent view:

android:translationZ="8dp"

Answer 2

Android Layouts are Z - ordered ie., a layout defined after another will be on top of it visually. Add your transparent view after the container that holds the FAB, that way your transparent view will be on top of the FAB and effectively gets drawn over it.

Answer 3

Define your transparent layout after FAB. Like this -

<android.support.design.widget.FloatingActionButton
    android:id="@+id/like_img"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="80dp"
    android:background="@color/white"
    android:elevation="10dp"
    android:src="@drawable/like"
    app:fabSize="normal"
    app:layout_anchor="@id/app_bar"
    app:layout_anchorGravity="bottom|center_vertical" />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fav_img"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:elevation="10dp"
    android:src="@drawable/add_to_stylebook"
    app:fabSize="normal"
    app:layout_anchor="@id/app_bar"
    app:layout_anchorGravity="bottom|center" />


<android.support.design.widget.FloatingActionButton
    android:id="@+id/share_img"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginRight="70dp"
    android:elevation="10dp"
    android:src="@drawable/share"
    app:fabSize="normal"
    app:layout_anchor="@id/app_bar"
    app:layout_anchorGravity="bottom|right" />

<View
    android:id="@+id/tranparent_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/grey_very_light_semi_transparent"
    android:elevation="15dp"
    android:fitsSystemWindows="true"
    android:visibility="gone" />