SWAT SWAT - 2 months ago 33
Android Question

Getting a Floating Action button between two layouts which already has elevation

<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.CardView
android:layout_width="130dp"
android:layout_height="130dp"
app:cardCornerRadius="65dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="-105dp"
android:clipChildren="true"
app:cardElevation="10dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/pic"
android:scaleType="centerCrop"/>
</android.support.v7.widget.CardView>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Raven Starfire"
android:textColor="#FFFFFF"
android:gravity="center_horizontal"
android:layout_marginTop="155dp"
android:textAppearance="?android:textAppearanceLarge"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Bran, Romania"
android:textColor="#FFFFFF"
android:gravity="center_horizontal"
android:layout_marginTop="180dp"
android:textAppearance="?android:textAppearanceSmall"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#90A4AE"
android:layout_gravity="bottom"
android:orientation="vertical"
android:id="@+id/bottomTopCard"
android:elevation="19dp"></LinearLayout>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="@id/bottomTopCard"
app:layout_anchorGravity="top|right"
android:layout_marginRight="16dp"/>
</android.support.design.widget.CoordinatorLayout>


enter image description here

Well, I need to bring the Floating Action button above the linear layout(lighter shade of ash) at the bottom of the Coordinator Layout. I set the anchor to top right end of the Linear layout(which works fine), but the FAB seems to have gone below it.
I suppose that the Coordinator layout does not work like the FrameLayout/CardView. Giving elevation doesn't bring the FAB above the Linear layout either.

Any suggestion about bringing the FAB Above that linear layout would be helpful.

Answer

Set the Floating Action button elevation from the app namespace not android:

    app:elevation="20dp"

not:

    android:elevation="20dp"

By the way, android material design recommends that the FAB be at 6dp elevation https://material.google.com/material-design/elevation-shadows.html