CODEWITHSUNDEEP
androidshadowfloating-action-button
tounaobun
tounaobun

Reputation: 14857

How to remove FloatingActionButton's surrounding shadow?

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

Upvotes: 41

Views: 33418

Answers (8)

Basit Ali
Basit Ali

Reputation: 51

For Android version greater than 23 you can override the default stateListAnimator of the FAB:

android:stateListAnimator="@null" 
android:elevation="0dp"

From code:

view.stateListAnimator = null
view.elevation = 0f

Upvotes: 0

StefanTo
StefanTo

Reputation: 1020

This solutions works for ExtendedFloatingActionButton, too:

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

Upvotes: 2

Oleg Gryb
Oleg Gryb

Reputation: 5249

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:

enter image description here

Before the change it looked as follows:

enter image description here

Upvotes: 5

Sameer Khader
Sameer Khader

Reputation: 157

Make borderWidth to 0

app:borderWidth="0dp"

Upvotes: 8

Jean-Nicolas Defoss&#233;
Jean-Nicolas Defoss&#233;

Reputation: 419

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

Upvotes: 40

brian.clear
brian.clear

Reputation: 5327

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

Upvotes: 5

saurabh dhillon
saurabh dhillon

Reputation: 808

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

app:elevation="0dp"

Upvotes: 26

BrentM
BrentM

Reputation: 5757

Override the default elevation of the FAB by adding:

android:elevation="0dp"

Or in code call View.setElevation(float)

Upvotes: 56

Related Questions