Can't make Floating Action Button "float"

Question

First things first, I've checked that answer: How to add shadow to the FAB provided with the android support design library?

But even adding the app:borderWidth="0dp" or elevation="6dp" it didn't work. I have checked this answer: https://stackoverflow.com/a/30752754/1121139 it says as bigger my elevation, bigger is the shadow, and here goes the funny thing, at the preview screen it shows the shadow, but when runs at smartphone I got no shadow.

Here goes an screenshot from smartphone:

and here goes and screenshot from preview screen at android studio:

My layout code:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="amaz1ngc0de.com.br.materialdesign.MainActivity">

<include android:id="@+id/app_bar" layout="@layout/toolbar_app_bar"/>

<android.support.v7.widget.RecyclerView
    android:id="@+id/rv_test_fab"
    android:layout_below="@id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

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

<android.support.design.widget.FloatingActionButton
    android:layout_margin="16dp"
    android:layout_alignParentRight="true"
    android:layout_alignParentBottom="true"
    android:src="@drawable/ic_add_white_24dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"

    app:elevation="140dp"
    app:borderWidth="0dp"
    app:pressedTranslationZ="12dp"
    android:clickable="true"/>

Answer 1

Try wrapping your layout inside a CoordinatorLayout and put the FAB at the same level, instead of a RelativeLayout, example:

<!-- main_layout.xml -->
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:animateLayoutChanges="true"
    android:fitsSystemWindows="true"
    tools:context=".activity.MainActivity">

    <include layout="@layout/toolbar_app_bar" />

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv_test_fab"
        android:layout_below="@id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

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

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

Edit: This widget is from the design library, you should have it added in your app's build.gradle file:

compile 'com.android.support:design:24.0.0'

Answer 2

OK so I have tried around a bit and it seems shadowing with elevation doesn't work as you imagined. This code gives quite a shadow:

<android.support.design.widget.FloatingActionButton
    android:id="@+id/name_add"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="15dp"
    android:src="@drawable/ic_add"
    app:elevation="20dp"/>

But if I set elevation to 200, the shadow disappears. So there is only a range at which the shadow is working.

Maybe you can understand it as an object, casting a shadow onto an underlaying object. The higher the elevation, the greater is the distance between the two objects and the less shadow is cast...