Android Material Design Adding a FloatingActionButton (FAB)

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Insert
> Step 2: And Like the video. BONUS: You can also share it!

Example

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): Material FAB

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.



Got any Android Question?