CODEWITHSUNDEEP
androidmaterial-designfloating-action-button
Juliatzin
Juliatzin

Reputation: 19695

No elevation For FloatingActionButton ( FAB ) in Support Material Design

With the help of this question I built a Floating Action Button to add elements to my Listview

The code is easy:

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    app:backgroundTint="@color/spg_rosa"
    app:borderWidth="0dp"
    app:elevation="4dp"
    app:fabSize="normal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_add_white_48dp"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"
    />

The thing is 

app:elevation="4dp"

is not working, I can't see any shadow!

I grab the icon from Google : https://www.google.com/design/icons/

Any idea?

EDIT: I'm using it in Samsung S3 Mini ( API 16 )

Upvotes: 3

Views: 4157

Answers (3)

Juliatzin
Juliatzin

Reputation: 19695

Thing was My Listview were black! I changed color theme to white, and I could see the shadow !

Upvotes: 0

Martin Cazares
Martin Cazares

Reputation: 13705

Your problem is the "android:layout_alignParentBottom="true", that means your button is right at the bottom edge, try adding at least 10dp of margin at the bottom and it will fix your problem.

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    app:backgroundTint="@color/spg_rosa"
    app:borderWidth="0dp"
    app:elevation="4dp"
    app:fabSize="normal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_add_white_48dp"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"
    android:layout_marginBottom="10dp"
    />

Regards!

Upvotes: 4

shadow-01
shadow-01

Reputation: 201

I just tested your sample on a Samsung S3 Mini (API 16). For me the elevation works. because the elevation value is so small it's not very visible, try to increase the value. As BrentM says the elevation is not working if app:borderWidth="0dp" is not added.

Upvotes: 6

Related Questions