Home / UI / Material Design / Android Material Design Floating Action Button Tutorial
androidFABCover

Android Material Design Floating Action Button Tutorial

Google announced Material Design Support Library in their Google IO 2015. One of the interesting components is the Android Material Design Floating Action Button (FAB). In this tutorial we’ll have a look on Android Material Design Floating Action Button (FAB) parameters and functions.

In the previous tutorial we discussed Android Material Design Snackbar and you can check our Android Material Design Series from here. 

Floating Action Button (FAB) is a round button doing a primary action on your interface. The Android Material Design Floating Action Button  gives you a single consistent implementation, by default colored using the colorAccent from your theme.

Quick Overview:

The floating action button consists of xml + java code as like many android widgets.

1. XML Code:

Note: 

The parent layout of the Floating Action Button should be Coordinator Layout which was introduced also in the design support library, it’s a layout  which provides an additional level of control over touch events between child views, something which many of the components in the Design library take advantage of.

  • Coordinator Layout resolve the issue of Snackbar displaying over the Floating Action Button.
  • Floating Action Button automatically moves upward as the Snackbar animates in and returns to its position when the Snackbar hides.
  • Coordinator Layout enables user to swipe Snackbar away before the timeout.

Android Coordinator Layout with FAB

2. Java Code:

Android Floating Action Button

Android Material Design Floating Action Button

1. Creating Android Project, In Android Studio, create a new project by navigating to File ⇒ New Project and fill all the required details. When it prompts to select a default activity, select Empty Activity and proceed.

2. We need to add Material Design Support Library so we can use it, so open build.gradle file and add the following code:

3. Let’s add some styles, Open colors.xml under res ⇒ values and add below color resources. If you don’t find colors.xml, create a new file with this name.

Also Open styles.xml under res ⇒ values and add below color resources.

4. Open the layout file the main activity activity_main.xml and add below code. This includes the floating action button and the parent layout is CoordinatorLayout as we discussed before

5. Finally Add this code to your Main Activity java file MainActivity.java. This code has 3 methods, one for each button on our layout and it represents the three types of the Android material design snackbar.

6. Run the project and test it. You should able see The Android Material Design Floating Action Button using Design Support Library and it will look like this:

Download Source Code

Android Material Design Floating Action Button

Summary
Article Title
Android Material Design Floating Action Button Tutorial
Description
Android Material Design Floating Action Button Tutorial and example in Coordinator Layout with Material Design Snackbar using android Design Support Library
Author
Organization
Android Gifts

About #AndroidGifts

#AndroidGifts

Check Also

featured_image

Material Design Icons with Android Studio Plugin Drawable Importer – Library #1

In this tutorial we are having Material Design Icons with Android Studio Drawable Importer Plugin which …