How to add shadow to the FAB provided with the android support design library?

Question

The title is pretty self explaining.

The following code does not render shadow below the Floating Action Button. What can be done to render shadow? Is this feature really not supported even on API 21+?

<android.support.design.widget.FloatingActionButton
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:src="@drawable/ic_add"
    android:clickable="true" />

Note: Adding android:elevation does not add shadow on API 21.

Screenshot taken from the example by dandar3: https://github.com/dandar3/android-support-design

Answer 1

Simply setting app:borderWidth="0dp" resolve this issues for me.

Note: don't forget to add xmlns:app="http://schemas.android.com/apk/res-auto" to your root layout.

This issue should be fixed in next release of android design library.

Answer 2

For API 21+ you need to set app:borderWidth="0dp" and app:elevation="[number]dp". Setting elevation you are giving the size of shadow that you want:

Here is an example of code for API 21+:

<android.support.design.widget.FloatingActionButton
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/locate_user_FAB"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/location_off"
    app:elevation="6dp"
    app:borderWidth="0dp"
    android:layout_above="@+id/take_taxi_FAB"
    app:backgroundTint="@color/colorAccentGrey">

One important thing to remember for APIs below to 21 (Android 4), is for terms of compatibility FAB will put a margins around your button to draw the shadow. Then you should do something like that (I'm currently using this code and works):

<android.support.design.widget.FloatingActionButton
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/locate_user_FAB"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/location_off"
    app:elevation="6dp"
    app:borderWidth="0dp"
    android:layout_above="@+id/take_taxi_FAB"
    android:layout_alignParentRight="true"
    android:layout_marginRight="@dimen/map_FAB_marginRight"
    android:layout_marginBottom="@dimen/locate_user_FAB_marginBottom"
    app:backgroundTint="@color/colorAccentGrey">

I prefer to put xmlns:app="http://schemas.android.com/apk/res-auto" at the beginning of the XML, but I put there just to remind you ;]

Answer 3

If this still isn't working for some, there is a significant difference between:

app:elevation="6dp"
app:borderWidth="0dp"

and

app:borderWidth="0dp"
app:elevation="6dp"

Order seems to matter for some reason (The first order works, second doesn't) and this is from the support library 23.3.0

Answer 4

Check manifest in project or libraries in Application tag and delete them

android:hardwareAccelerated="false"
android:largeHeap="true"

But if you need these options then shadows and transformation animations will not work

Answer 5

I was experiencing this same issue and I got it to work by deleting this tag from my AndroidManifest.xml.

android:hardwareAccelerated="false"

I initially added it, together with android:largeHeap="true", because I thought I needed it for a HeatMap in which a large number of points where shown, but then I realized it could work just with android:largeHeap="true".

Answer 6

In case it help, I was using

android:tint="@color/myColor"

instead of

android:backgroundTint="@color/myColor".

Replacing tint by backgroundTint brought back the shadow.