Floating Action Button’s are those neat little buttons you see generally in the lower right corner of an app. They perform some sort of positive action like creating something, like an email or a text. We’re going to see how to add a simple Floating Action Button (hereafter referred to as FAB) to an activity.

For an excellent list of design considerations when creating FAB’s, see Google’s page here.

Add the Gradle Dependency

In your “build.gradle (Module: app)” file, add the line


compile 'com.android.support:design:xx.x.x’

Where the x’s are your apps support library version number. This should be the same as the ‘com.android.support:appcompat-v7:xx.x.x’ number.

Add an Image for Your FAB

Add a vector asset to be used in your button by right clicking on your Drawable folder, and going to New -> Vector Asset.

3

Before you finish adding the icon you want, (I added the plus symbol, called “ic_add”), change the word black to white. We won’t actually change the color here because we need to create the file first but it’s easier to change the name now than later.

Change the Icon Color

Once you’ve created the icon, it will be added to your Drawable folder. Double click on it to open the file. Change the fillColor from “#FF000000” to “FFFFFFFF”.

<vector xmlns:android="http://schemas.android.com/apk/res/android"
         android:width="24dp"
         android:height="24dp"
         android:viewportWidth="24.0"
         android:viewportHeight="24.0">
     <path
         android:fillColor="#FFFFFFFF"
         android:pathData="M19,13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
 vector>

Now Code the FAB

Now add the Floating Action Button in your activity_main xml file.


<android.support.design.widget.FloatingActionButton
     android:id="@+id/FAB"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_alignParentBottom="true"
     android:layout_alignParentEnd="true"
     android:layout_alignParentRight="true"
     android:layout_margin="16dp"
     android:src="@drawable/ic_add_white_24dp"
     app:fabSize="normal"/>

AlignParentEnd and AlignParentRight are in there to support Right-To-Left (RTL) layouts, where the end would actually be the left.

If you add the FAB and get rendering errors, go to the Build menu and click on Clean Project. If this doesn’t fix it and you get an error that says “Exception raised during rendering: Unable to locate mode 0” this is because of a bug in the 25.0.0 library. Update your library and this should go away.

2

Respond to Clicks

Now in Main Activity, add the reference to the FAB and add the click listener

public class MainActivity extends AppCompatActivity
{
    FloatingActionButton fab;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        fab = (FloatingActionButton) findViewById(R.id.FAB);
        fab.setOnClickListener(new View.OnClickListener()
        {
            @Override
            public void onClick(View view)
            {
                Toast.makeText(getApplicationContext(), "I've been clicked", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

There you have it! A fine looking Floating Action Button!

fabscreen

Leave a Reply

Your email address will not be published. Required fields are marked *