Create a Floating Action Button

## Introduction

This tutorial follows the tutorial Create a Toolbar, which teaches how to implement a Toolbar by creating a CoordinatorLayout. You will need the CoordinatorLayout to insert a Floating Action Button. If your layout doesn't have one, follow the Create a Toolbar tutorial.

## Create the Floating Action Button

In your CoordinatorLayout, insert a Floating Action Button after your activity content. Set the android:src to the icon you want to be displayed. You can use the standard icons by typing @android:drawable/, or you can download or create new ones by yourself. Set the gravity to the position you want the FAB to be displayed.

```
<android.support.design.widget.FloatingActionButton
 android:id="@+id/fab"
 android:layout\_width="wrap\_content"
 android:layout\_height="wrap\_content"
 android:layout\_gravity="bottom|end"
 android:layout\_margin="@dimen/fab\_margin"
 android:src="@android:drawable/ic\_dialog\_email" />

```

Your layout should look like this:

```
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout\_width="match\_parent"
 android:layout\_height="match\_parent"
 android:fitsSystemWindows="true"
 tools:context="br.com.jeanknapp.helloworld.BasicActivity">

 <android.support.design.widget.AppBarLayout
 android:layout\_width="match\_parent"
 android:layout\_height="wrap\_content"
 android:theme="@style/AppTheme.AppBarOverlay">

 <android.support.v7.widget.Toolbar
 android:id="@+id/toolbar"
 android:layout\_width="match\_parent"
 android:layout\_height="?attr/actionBarSize"
 android:background="?attr/colorPrimary"
 app:popupTheme="@style/AppTheme.PopupOverlay" />

 </android.support.design.widget.AppBarLayout>

 <include layout="@layout/content\_basic" />

 <android.support.design.widget.FloatingActionButton
 android:id="@+id/fab"
 android:layout\_width="wrap\_content"
 android:layout\_height="wrap\_content"
 android:layout\_gravity="bottom|end"
 android:layout\_margin="@dimen/fab\_margin"
 android:src="@android:drawable/ic\_input\_add" />

</android.support.design.widget.CoordinatorLayout>

```

## Importing

Import the following classes:

```
import android.view.View;
import android.support.design.widget.FloatingActionButton;

```

View is used to handle the click in the Floating Action Button and the FloatingActionButton is the base class for itself.

## Override the onCreate() method

Get the FAB by using the findViewById() method. Then setup a click listener to perform the desired function when clicked.

```
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
 @Override
 public void onClick(View view) {
 Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH\_LONG)
 .setAction("Action", null).show();
 }
});

```

When you finish, your Java Class file should look like this:

```
package br.com.jeanknapp.helloworld;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;

public class MainActivity extends AppCompatActivity {

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity\_main);
 Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
 setSupportActionBar(toolbar);

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

```

## Conclusion

Your activity should now have a working Floating Action Button. For the next steps, you should play along with the CoordinatorLayout and the gravity of the FAB to place it in other positions, such as between the toolbar and the content layout, and so on.

You now know how to create a Floating Action Button and how to place it on your Activity.