Android Design Library - Floating Action Button Padding/Margin Issues

Question

I'm using the new FloatingActionButton from the Google Design Library and I am getting some strange padding/margin problems. This image (with developer layout options on) is from API 22.

And from API 17.

This is the XML

<android.support.design.widget.FloatingActionButton         android:id="@+id/fab"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_alignParentEnd="true"         android:layout_gravity="bottom|right"         android:layout_marginLeft="16dp"         android:layout_marginRight="20dp"         android:layout_marginTop="-32dp"         android:src="@drawable/ic_action_add"         app:fabSize="normal"         app:elevation="4dp"         app:borderWidth="0dp"         android:layout_below="@+id/header"/> 

Why is the FAB in API 17 so much larger padding/margin wise?

Answer 1

Update (Oct 2016):

The correct solution now is to put app:useCompatPadding="true" into your FloatingActionButton. This will make the padding consistent between different API versions. However, this still seems to make the default margins off by a little bit, so you may need to adjust those. But at least there's no further need for API-specific styles.

Previous answer:

You can accomplish this easily using API-specific styles. In your normal values/styles.xml, put something like this:

<style name="floating_action_button">     <item name="android:layout_marginLeft">0dp</item>     <item name="android:layout_marginTop">0dp</item>     <item name="android:layout_marginRight">8dp</item>     <item name="android:layout_marginBottom">0dp</item> </style> 

and then under values-v21/styles.xml, use this:

<style name="floating_action_button">     <item name="android:layout_margin">16dp</item> </style> 

and apply the style to your FloatingActionButton:

<android.support.design.widget.FloatingActionButton ... style="@style/floating_action_button" ... /> 

As others have noted, in API <20, the button renders its own shadow, which adds to the overall logical width of the view, whereas in API >=20 it uses the new Elevation parameters which don't contribute to the view width.