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:
compile 'com.android.support:design:25.3.1'
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"/>
where the 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 normal
or mini
to 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 true
or false
. Set to true
to 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.