How to remove FloatingActionButton's surrounding shadow?

Question

I'm trying to replace the third party FloatingActionButton with the native one which is packaged in library com.android.support:design:22.2.0.The default look has a dark shadow around the image,How can I get rid of it? I know the former one provides with the method setShadow(),but I just can't find similar one from the latter.

enter image description here

This is the related XML layout:

<android.support.design.widget.FloatingActionButton
        android:id="@+id/alarm_front"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/btn_icon_alarm_notset" />

And I have set its background color to yellow.

mAlarmBtn.setBackgroundTintList(ColorStateList.valueOf(getResources().getColor(R.color.floatButtonColor)));

BrentM · Accepted Answer · 2015-06-03T08:03:23.247

55

Override the default elevation of the FAB by adding:

android:elevation="0dp"

Or in code call View.setElevation(float)

edited Jun 03 '15 at 08:03

answered Jun 03 '15 at 07:57

BrentM

5,671
3
31
38

3

setElevation is available at a minimum API level of 21,how can it work below LOLLIPOP? – tounaobun Jun 03 '15 at 08:10
You could simply stick with the old approach of creating your own ImageButton on pre-lollipop. As you did before they introduced FAB – Zsolt Boldizsar Jun 03 '15 at 08:17
Other developers are reporting issues with shadows on the new support FAB, although generally that the shadow is not showing which is the opposite problem, but maybe a related issue. http://stackoverflow.com/questions/30532863/how-to-add-shadow-to-the-fab-provided-with-the-android-support-design-library – BrentM Jun 03 '15 at 08:18
Then I would stick with the third party until there is a solution to the FAB of the design library.Thanks BrentM. – tounaobun Jun 03 '15 at 08:24
22

With the official FAB, you can use `app:elevation="0dp"` to do what you want. I tried on Android 4.1.1 and it works fine. I don't know if there is a Java solution yet. – Gaëtan Jul 01 '15 at 13:05
@Gaëtan, you should turn this to an answer, It really helped me. thanks – Tosin Onikute Nov 22 '15 at 03:18
33

use `app:elevation="0dp"` for compatibility – Leonardo Feb 16 '16 at 14:07

score 38 · Answer 2 · answered Nov 30 '17 at 07:22

38

Add this

android:elevation="0dp" app:elevation="0dp"

It's will be like :

 <android.support.design.widget.FloatingActionButton
        android:id="@+id/floatingActionButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_add"
        android:elevation="0dp"
        app:elevation="0dp"
        app:fabSize="normal"
        android:scaleType="fitCenter"/>

answered Nov 30 '17 at 07:22

Jean-Nicolas Defossé

399
3
5

This is the answer among all – GvSharma Nov 04 '18 at 08:40

score 26 · Answer 3 · edited Apr 10 '17 at 15:04

26

Override the default elevation of the FAB by adding the following:

app:elevation="0dp"

edited Apr 10 '17 at 15:04

Tomáš Hübelbauer

9,179
14
63
125

answered Apr 10 '17 at 14:41

saurabh dhillon

798
7
17

score 8 · Answer 4 · edited Apr 27 '19 at 07:28

8

Make borderWidth to 0

app:borderWidth="0dp"

edited Apr 27 '19 at 07:28

Rumit Patel

8,830
18
51
70

answered Apr 27 '19 at 06:24

Sameer Khader

157
1
5

Tried all of the above, but the shadows kept... This answer worked for me! – stefan Dec 21 '19 at 09:48

score 5 · Answer 5 · answered May 12 '17 at 14:33

If you are using the support libraries - the latest Android Studio templates us them. Check the imports

import android.support.design.widget.FloatingActionButton;
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
//if using support app compat
fab.setCompatElevation(16.0f);

else if youre only supporting newer sdk versions

fab.setElevation();
//call requires SDK 21

see

.../app/build.gradle
  minSdkVersion 18    << less than 21 so req support libraries
  targetSdkVersion 25

Oleg Gryb · Answer 6 · 2020-01-15T16:25:44.463

4

Tried all suggestions above and nothing has worked for API 23 and higher. I've ended up with this, which has completely removed the shadow:

app:backgroundTint="@android:color/transparent"
app:borderWidth="0dp"

Below is how my button looks like now:

Before the change it looked as follows:

edited Jan 15 '20 at 16:25

answered Feb 02 '18 at 04:51

Oleg Gryb

5,122
1
28
40

score 2 · Answer 7 · answered Mar 02 '21 at 13:36

2

This solutions works for ExtendedFloatingActionButton, too:

style="@style/Widget.MaterialComponents.Button.UnelevatedButton"

answered Mar 02 '21 at 13:36

StefanTo

971
1
10
28

How to remove FloatingActionButton's surrounding shadow?

7 Answers7

Linked

Related