Android Floating Action Button Example Tutorial

Today we will learn about Android Floating Action Button. We’ll discuss the FloatingActionButton, that’s a new component included in the Material Design Guidelines and SnackBar, which is a Material Design replacement of a Toast.

Android Floating Action Button

Android Floating Action Button is used to pay emphasis to the most important function on the screen. It’s a cool and stylish way to get user’s attention to it.

Android Floating Action Button Overview

To use Material Design widgets in our project we need to compile the following dependency in our build.gradle file as shown below.

The FloatingActionButton widget is defined in the xml layout as follows:

Few observations made from the above xml layout defined are:

  1. FloatingActionButton extends the ImageView class. This is evident from the android:src attribute defined.
  2. In the above xml layout elevation attribute is used to cast a shadow over the button and pressedTranslationZ causes the shadow to grow when pressed.

A FloatingActionButton is placed within a CoordinatorLayout. A CoordinatorLayout helps facilitate interactions between views contained within it, which will be useful later to describe how to animate the button depending on scroll changes.

SnackBar is a more enhanced widget when compared to a Toast. A SnackBar is invoked as follows:

We have discussed SnackBar at length in another tutorial.

Important Note: If you’ve been following these Android Tutorials well, you must have noticed that with the new build tools update to 23.1.1 the project structure of a new empty project has changed and the above mentioned widgets are present by default in a new Android Studio Project. So instead of implementing the above mentioned widgets, let’s take a quick tour of the new project structure.

Android Floating Action Button Example Project Structure

android-fab-snackbar-project

As you can see a new xml layout file named content_main.xml is added. It’s the same as the earlier activity_main.xml.

Android Floating Action Button Example

The new activity_main.xml is given below:

A toolbar is added by default as a replacement of an ActionBar. It’s added inside an AppBarLayout which is a direct child of CoordinatorLayout
The AppBarLayout is used to achieve various scrolling behaviours such as collapse, flex space, and quick return.

The MainActivity.java is defined as given below:

A new attribute is added to the application tag inside the AndroidManifest.xml named android:supportsRtl="true". This enables right to left layouts in the application.

Running this default application produces an output like below:

android floating action button example Android FloatingActionButton

As you can see, on clicking the floating action button, a SnackBar is displayed. This brings an end to this tutorial. You can create a new project in Android Studio and run it to see these features.
Note: Make sure that you’re using the latest build tools.

Reference: Android Reference Doc

By admin

Leave a Reply