Can't remove "shadow" from unelevated transparent FloatingActionButton

Question

After spending multiple hours researching this problem, I decided to ask instead of wasting more time on such a (seemingly) easy task.

I'm trying to implement a FloatingActionButton with transparent background and no broder, to show just a custom icon. I know that the material design discourages it, but I need to do it this way.

The problem I face is that there is a shadow showing, which I don't want. Since I set elevation to 0dp I don't know how it got there and thus how I can remove it.

Here is the code for the fragment containing the FAB:

<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/fragment_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/bg_sample"
android:elevation="0dp"
android:fitsSystemWindows="true">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/fragment_grid"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:gravity="center"
        android:padding="10dp"
        android:stretchMode="columnWidth"
        android:verticalSpacing="25dp"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        style="@style/AppTheme"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center"
        android:layout_marginBottom="@dimen/activity_vertical_margin"
        android:adjustViewBounds="true"
        android:elevation="0dp"
        android:fitsSystemWindows="true"
        android:scaleType="fitCenter"
        app:borderWidth="0dp"
        app:fabSize="normal"
        app:layout_anchorGravity="bottom|center"
        app:layout_behavior="ScrollAwareFABBehavior"
        />

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

Here is my AppTheme:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="android:fitsSystemWindows">true</item>
    <item name="android:spotShadowAlpha">0</item>
    <item name="android:shadowRadius">0</item>
    <item name="android:ambientShadowAlpha">0</item>
    <item name="selectableItemBackgroundBorderless">@null</item>
</style>

The onCreateView of the Fragment in which I set the transperancy:

@Override
public final View onCreateView(final LayoutInflater inflater, final ViewGroup container,
                               final Bundle savedInstanceState) {
    // initialize variables
    View view = inflater.inflate(R.layout.fragment_desk, container, false);

    coordinatorLayout = (CoordinatorLayout) view.findViewById(R.id.fragment_layout);
    fab = (FloatingActionButton) coordinatorLayout.findViewById(R.id.fab);
    fab.getBackground().setColorFilter(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);

    return view;
}

TL;DR: How can I remove the shadow shown in the second picture?

EDIT: It seems, that this problem is linked to the fab size. I set design_fab_size_normal to 200 just to see, what it does. Turns out it doesn't affect my icon size but the size of the shadow.

Here is the dimens.xml:

<resources xmlns:tools="http://schemas.android.com/tools">
    <dimen name="design_fab_image_size" tools:override="true">64dp</dimen>
    <dimen name="design_fab_size_normal" tools:override="true">200dp</dimen>
</resources>

Just use an ImageButton with a `` background drawable if you're not using any of the sugar provided by FAB. — Eugen Pechanec, Apr 06 '17 at 12:16
Actually I am using Snackbars and hide on scroll behavior, so it has to be FAB (also I want to introduce a little bit of material design into the app). — Antonio Dell, Apr 06 '17 at 15:54
Don't forget that FAB is originally a piece of paper laid on top of your content, that's why it has a shadow. It has the same elevation as Snackbar, that's why Snackbar pushes FAB out of its way. There are physical rules behind material design. Just because you're using FABs and Snackbars doesn't mean you're practicing material design. Your question is about breaking one of its rules. Do what fits your needs but keep in mind how things work behind the scenes. — Eugen Pechanec, Apr 06 '17 at 16:04

HAXM · Accepted Answer · 2017-04-06T12:18:56.907

6

It should be:

app:elevation="0dp"

instead of:

android:elevation="0dp"

You can also do it from your java code by using:

float zeroElevation=0.0f;
View.setElevation(zeroElevation);

edited Apr 06 '17 at 12:18

answered Apr 06 '17 at 12:14

HAXM

3,578
4
31
38

score -1 · Answer 2 · answered Apr 06 '17 at 11:46

-1

Try to remove android:elevation="0dp" completely.

answered Apr 06 '17 at 11:46

Johny

625
2
6
26

Sadly that doesn't change anything. – Antonio Dell Apr 06 '17 at 11:59
While this code may answer the question, providing additional [context](https://meta.stackexchange.com/q/114762) regarding _how_ and/or _why_ it solves the problem would improve the answer's long-term value. Remember that you are answering the question for readers in the future, not just the person asking now! Please [edit](http://stackoverflow.com/posts/43254292/edit) your answer to add an explanation, and give an indication of what limitations and assumptions apply. It also doesn't hurt to mention why this answer is more appropriate than others. – Dev-iL Apr 06 '17 at 19:37

Can't remove "shadow" from unelevated transparent FloatingActionButton

2 Answers2