Android L - Floating Action Button (FAB)

UPDATED: 26/08/2021

With the Material components for android add to your build.gradle:

implementation 'com.google.android.material:material:1.x.x'

Then add in your layout:

<com.google.android.material.floatingactionbutton.FloatingActionButton      android:id="@+id/floating_action_button"      android:layout_width="wrap_content"      android:layout_height="wrap_content"      android:layout_gravity="bottom|right"      android:layout_margin="16dp"      app:srcCompat="@drawable/ic_plus_24"/>

And use it:

FloatingActionButton floatingActionButton =    (FloatingActionButton) findViewById(R.id.floating_action_button);    floatingActionButton.setOnClickListener(new OnClickListener() {    @Override    public void onClick(View view) {        // Handle the click.    }});

If you are using a Theme.MaterialComponents.* theme your FAB will inherit the material style. Otherwise just apply the style @style/Widget.MaterialComponents.FloatingActionButton

<com.google.android.material.floatingactionbutton.FloatingActionButton    style="@style/Widget.MaterialComponents.FloatingActionButton"    ../>

More info here.

With Jetpack compose 1.0.x use:

//Simple FABFloatingActionButton(onClick = { /* .. */ } ) {    Icon(Icons.Filled.Add,"contentDescription")}//FAB custom colorFloatingActionButton(    onClick = { /* .. */ },    backgroundColor = Color.Blue,    contentColor = Color.White){    Icon(Icons.Filled.Add,"contentDescription")}

UPDATED: 30/05/2015 with the official Design Support Library

There an official widget now.

Just add this dependency to your build.gradle

compile 'com.android.support:design:22.2.0'

Add this view to your layout:

<android.support.design.widget.FloatingActionButton    android:id="@+id/fab"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:layout_gravity="end|bottom"    android:src="@drawable/ic_done" />

And use it:

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);        fab.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View view) {               //TODO            }        });

Documentation Android documentation.

UPDATED: 02/12/2014 with Android 5 code

Also you can add and stateListAnimator to your Button:

<Button android:stateListAnimator="@anim/anim"/>

Where anim.xml is:

<selector xmlns:android="http://schemas.android.com/apk/res/android">    <item        android:state_enabled="true"        android:state_pressed="true">        <objectAnimator            android:duration="@android:integer/config_shortAnimTime"            android:propertyName="translationZ"            android:valueFrom="@dimen/button_elevation"            android:valueTo="@dimen/button_press_elevation"            android:valueType="floatType" />    </item>    <item>        <objectAnimator            android:duration="@android:integer/config_shortAnimTime"            android:propertyName="translationZ"            android:valueFrom="@dimen/button_press_elevation"            android:valueTo="@dimen/button_elevation"            android:valueType="floatType" />    </item></selector>

Dimens.xml is

<resources>    <dimen name="fab_size">56dp</dimen>     <dimen name="button_elevation">2dp</dimen>    <dimen name="button_press_elevation">4dp</dimen></resources>

Check the Daniele's answer.

About Outline mentioned by Daniele.Add the elevation attribute to your Button, and set the Outline via code:

   <ImageButton        android:background="@drawable/ripple"        android:stateListAnimator="@anim/anim"        android:src="@drawable/ic_action_add"        android:elevation="4dp"        />

About Outline:

public class MainActivity extends Activity {     @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.layoutfab);                //Outline: OLD METHOD IN L-PREVIEW        //int size = getResources().getDimensionPixelSize(R.dimen.fab_size);        //Outline outline = new Outline();        //outline.setOval(0, 0, size, size);        //findViewById(R.id.fab).setOutline(outline);        Button fab = (Button) findViewById(R.id.fab);        ViewOutlineProvider viewOutlineProvider = new ViewOutlineProvider() {           @Override           public void getOutline(View view, Outline outline) {              // Or read size directly from the view's width/height              int size = getResources().getDimensionPixelSize(R.dimen.fab_size);              outline.setOval(0, 0, size, size);           }        };        fab.setOutlineProvider(viewOutlineProvider);    }    }

UPDATE: there's now an official widget for FAB: FloatingActionButton, see Gabriele Mariotti reply for full information.

According to Adam Powell and Chet Haase they didn't create a widget for the FAB button cause it's a very easy component to reproduce.

There was a question in the Google IO 2014 speech "Google I/O 2014 - Material science: Developing Android applications with material design", at the end of the speech (at about 37:50) there was exactly that question, you can hear it here:https://www.youtube.com/watch?v=lSH9aKXjgt8#t=2280

Chet Haase says there's a RoundedBitmapDrawable (I didn't check if that's the name) that should already do the job of defining the Outline.

But you can do it with your own drawable, set an Elevation to it and define an circle Outline programmatically.

This should give you the round button with shadow on L release.But I think You'll have to build the Shadow pre-L on your own.

I should check the code for CardView to see how it reproduce the shadow pre-L. I'll probably do that, but do not have time now. If no one pops in with the details I'll do it after I've found the time to go and check it up.

EDIT:

Gabriele Mariotti (see his answer below, thank you) added some code to show you how to do it.

Thanks to @shomeser comments, he wrote a library to make the fab button:

https://github.com/shamanland/floating-action-button

To use it:

dependencies {    compile 'com.shamanland:fab:0.0.3'}

You can also read his answer to another question: How can I add the new "Floating Action Button" between two widgets/layouts

Google now provides an official library, called design library, containing the Fab Button. Just add the following Gradle dependency:

compile 'com.android.support:design:22.2.0'

Afterwards you can use the fab button like this:

<android.support.design.widget.FloatingActionButtonandroid:id="@+id/fab"android:layout_width="wrap_content"android:layout_height="wrap_content"/>

More information can be found in their announcement

http://android-developers.blogspot.ch/2015/05/android-design-support-library.html

or on the javadoc page

http://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html