Android L – Floating Action Button (FAB) –

Development issue/problem:

Has Google already published a specific style or component for this new round FAB button, or do I have to implement the design myself?

The key is described here: Google Design | Floating Action Buttons

PROCESSING (05/2015) : Take a look at Lucas/Gabriel’s answer, which shows an easy way to implement this solution using the design help library.

How can I solve this problem?

Solution 1:

UPDATE: There is now an official widget for the FAB: Floating action button, see answer to Gabriele Mariotti for details.

According to Adam Powell and Chet Haase, they didn’t create a widget for the FAB button because it’s a very simple part.

The Google IO 2014 speech asked the question Google I/O 2014 – Materials Science : Developing Android applications with Material Design, at the end of the conference (around 37:50) there was this exact question, it can be heard here:

Chet Haaz says there is a RoundedBitmapDrawable (I haven’t checked if that’s the name) that should do all the work of defining Outline.

You can also do this with your own drawing, where you define the height and programmatically define a contour circle.

This should give you a round button with a shadow on the L trigger.
But I think you’ll have to build Shadow to L yourself.

I need to check the CardView code to see how it mimics the pre-L shadow. I probably will, but I don’t have time for that right now. If no one gives me details, I’ll do it after I find time to check.


Gabriele Mariotti (see his answer below, thank you) has added a code to show how.

Thanks to @shomeser’s comments, he wrote a library to the great :

How to use it:

Dependencies {
compiles ‘com.shamanland:fab:0.0.3’

You can also read his answer to another question: How can I insert a new action button floating between two widgets/lay-outs?

Solution 2:

UPDATE: 16/08/2019 with the official hardware components for the Android library.

Add new hardware components for Android to your build.gradle :

Implementation of

Then add it to the layout:

And use it:

FloatingActionButton Floating action button =
(FloatingActionButton) findViewById(;
floatingActionButton.setOnClickListener(new OnClickListener() {
public void onClick(view view) {
// Click handling.
}) ;

If you use a material theme, such as B. Theme.MaterialComponents, your FAB will inherit the hardware style. Otherwise, just apply @style/Widget.MaterialComponents.FloatingActionButton

More information can be found here.

UPDATE: 30/05/2015 with the official design library.

There’s now an official widget.

Add this dependency to your build.gradle.

Compile design: 22.2.0.

Add this view to your layout:

And use it:

Floating action button fab = (Floating action button) findViewById(;
fab.setOnClickListener(new View.OnClickListener() {
public null and void onClick(View view) {


UPDATE: 12.02.2014 with Android 5 code

You can also add a stateList animator to your :

Where anim.xml :




Look at Daniele’s answer.

About the design Daniele mentioned.
Add the height attribute to the button and define the contour with a code :

About the sketch:

the MainActivity public class expands the activity {

protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState) ;
setContentView(R.layout.layoutfab) ;

//Outline : Old method in L-PREVIEW
//int size = getResources().getDimensionPixelSize( ;
//Outline outline = new Outline() ;
//outline.setOval(0, 0, size, size) ;
//findViewById( ;

Button fab = (Button) findViewById(;
ViewOutlineProvider viewOutlineProvider = new ViewOutlineProvider() {
public void getOutline(View, Outline outline) {
// Or read size directly from view width/height
int size = getResources().getDimensionPixelSize(R.dimen.fab_size);
outline.setOval(0, 0, size, size);


Give here a description of the image

Solution 3:

Google now offers an official library, the Design Library, which contains the Fab button. Just add the next addiction to Gradles:

Compile design: 22.2.0.

Then you can use the dust button as follows:

For more information, see their announcement

or on the Javadoc page

Solution 4:

Since the FAB Labels feature has been added (as in Evernote or Inbox applications), do not hesitate to use it:

Dependence on the cradle :

Compile com.getbase:push button:1.3.0.


menu_labels_style.xml :

fab_label_background.xml :

Have fun!

Good luck!

Related Tags:

custom floating action button android,android floating action button,extended floating action button android,android floating action button menu,floating action button android library,floating action button android dependency,multiple floating action button android,floating action button with text android