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.

Example screenshot

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

At least for 21+, this may apply: https://stackoverflow.com/questions/27080338/android-5-0-androidelevation-works-for-view-but-not-button — CommonsWare, May 29 '15 at 15:02
Something I considered, but removing the StateListAnimator does not bring back shadow. This may be due to the fact that the FAB is actually an extended ImageView not a Button. Strange because FAB actually has a StateListAnimator. — Rolf ツ, May 29 '15 at 15:18

Dmytro Danylyk · Accepted Answer · 2015-06-02T06:39:36.920

92

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.

edited Jun 02 '15 at 06:39

answered May 29 '15 at 21:05

Dmytro Danylyk

19,094
10
59
68

1

Wow, that actually works... strange behavior. I can't imagine that this is expected behavior. – Rolf ツ May 29 '15 at 21:22
5

@Thorinside this is bug, a square bug: https://code.google.com/p/android/issues/detail?id=175067 – Dmytro Danylyk Jun 02 '15 at 06:40

score 32 · Answer 2 · edited Jun 12 '15 at 06:09

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:

Example of values for parameter "elevation"

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 ;]

Doesn't work for me. I'm setting the FAB above Map view and the fcking shadow doesn't appear on my FAB — Terranology, May 20 '18 at 20:58

score 6 · Answer 3 · edited Sep 11 '18 at 10:40

6

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".

edited Sep 11 '18 at 10:40

Community

1
1

answered Mar 13 '17 at 11:47

Tragalunas

181
1
6

score 5 · Answer 4 · answered May 10 '16 at 23:54

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

PanCrucian · Answer 5 · 2016-12-16T04:02:06.363

5

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

edited Dec 16 '16 at 04:02

answered Dec 16 '16 at 03:56

PanCrucian

226
4
6

score 0 · Answer 6 · answered Sep 09 '18 at 21:05

0

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.

answered Sep 09 '18 at 21:05

narko

2,875
1
23
27

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

6 Answers6

Linked

Related