Adding a FloatingActionButton FAB
In the material design, a Floating action button represents the primary action in an Activity.
They are distinguished by a circled icon floating above the UI and have motion behaviors that include morphing, launching, and a transferring anchor point.
Make sure the following dependency is added to your app’s build.gradle file under dependencies:
Now add the
FloatingActionButton to your layout file:
<android.support.design.widget.FloatingActionButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="16dp" android:src="@drawable/some_icon"/>
src attribute references the icon that should be used for the floating action.
The result should look something like this (presuming your accent color is Material Pink):
By default, the background color of your
FloatingActionButton will be set to your theme’s accent color. Also, note that a
FloatingActionButton requires a margin around it to work properly. The recommended margin for the bottom is
16dp for phones and
24dp for tablets.
Here are properties which you can use to customize the
FloatingActionButton further (assuming
xmlns:app="http://schemas.android.com/apk/res-auto is declared as namespace the top of your layout):
app:fabSize: Can be set to
minito switch between a normal sized or a smaller version.
app:rippleColor: Sets the color of the ripple effect of your
FloatingActionButton. Can be a color resource or hex string.
app:elevation: Can be a string, integer, boolean, color value, floating point, dimension value.
app:useCompatPadding: Enable compat padding. Maybe a boolean value, such as
false. Set to
trueto use compat padding on api-21 and later, in order to maintain a consistent look with older api levels.
You can find more examples about FAB here.