Search code examples
androidmaterial-designshadowfloating-action-buttonandroid-elevation

Can't remove "shadow" from unelevated transparent FloatingActionButton


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.

FAB with background FAB without background but with shadow

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.

FAB size increased to 200 showing icon

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>

Solution

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