Part 1 – Floating action button

Welcome to the first part of the tutorial series on Android design support library. As said in the series announcement post, last week I am done with creating a complete example using android design support library and its components. I thought to write this series to share my learning with you and I would take you through the new components, undocumented things and issues lying inside the android design support library. In this part, we will talk about Floating action button.

Floating Action button

Floating action button (FAB) is simply a circle button with rounded shadow, floats above the UI and used to display any promoted action, like adding a new item, compose mail, etc.

Based on the FloatingActionButton class code, the floating button can be an either of two sizes: i) Normal (56dp) or ii) Mini (40dp)

final int getSizeDimension() {
   switch(this.mSize) {
   case 0:
   default:
       return this.getResources().getDimensionPixelSize(dimen.fab_size_normal);
   case 1:
       return this.getResources().getDimensionPixelSize(dimen.fab_size_mini);
   }
}

Remark:
FloatingActionButton is nothing but a view extending ImageView.

Add Android design support library dependency

First thing first, add a below line to include design support library in gradle file:

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

Step 1:
Include FloatingActionButton in the xml layout file. In addition, assuming xmlns:app=”http://schemas.android.com/apk/res-auto is declared as namespace the top of your layout.

<FrameLayout
   android:id="@+id/layoutInner"
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <android.support.design.widget.FloatingActionButton
       android:id="@+id/btnFloatingAction"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_gravity="bottom|right" />

</FrameLayout>

Attributes:

Developer documentation of Floating action button (FAB) contains description about only fabSize attribute, have reported issue (#178117) already about including details about other attributes, but until then below are some of the attributes:

• By default Floating action button uses the ascent color given in application theme for its background, but you can use app:backgroundTint attribute or call setBackgroundTintList (ColorStateList tint) method to change the background color.
• As said above Floating action button size can be either Normal or Mini, you can use app:fabSize attribute (with value either normal or mini).
• Use android:src attribute to change the drawable for the Floating action button
• Use app:rippleColor to set the color for the ripple effects when Floating action button pressed
• Use app:borderWidth to set the border width for the FAQ
• Use app:elevation to set the idle state’s shadow depth (default is 6dp)
• Use app:pressedTranslationZ to set the press state’s shadow depth (default is 12dp)

Step 2:
Include the required attributes to display FAB with the image and size.

<android.support.design.widget.FloatingActionButton
   android:id="@+id/btnFloatingAction"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="bottom|right"
   android:src="@drawable/ic_plus"
   app:fabSize="normal"
   app:rippleColor="@android:color/background_dark"/>

Step 3:
We can assign the click listener same way we assign to widgets like ImageView and Button!

FloatingActionButton btnFab = (FloatingActionButton) findViewById(R.id.btnFloatingAction);
btnFab.setOnClickListener(new View.OnClickListener() {

   @Override
   public void onClick(View v) {
       Toast.makeText(MainActivity.this, "Hello FAB!", Toast.LENGTH_SHORT).show();
   }
});

We are done with the FAB example!

Issues:

At the time of writing this article, there are some bugs in library for FAB. To see that run this example in Kitkat and Lollipop devices. You would see below output:

FloatingActionButton Lollipop

FloatingActionButton Kitkat

Issue 1: Margin issue in Android 4.4 and 5.0
It’s clearly noticeable that there is a margin issue in Lollipop. To resolve this issue, define the bottom and the right margin both with 16dp for API 21+ and both with 0dp for pre-lollipop.

values/dimens.xml

<dimen name="fab_margin_right">0dp</dimen>
<dimen name="fab_margin_bottom">0dp</dimen>

values-v21/dimens.xml

<dimen name="fab_margin_right">16dp</dimen>
<dimen name="fab_margin_bottom">16dp</dimen>

and refer the same values in your FAB inside layout:

<android.support.design.widget.FloatingActionButton
   ...
   ...
   android:layout_marginBottom="@dimen/fab_margin_bottom"
   android:layout_marginRight="@dimen/fab_margin_right"/>

Issue 2: Shadow issue in Android 5.0
Now, you might have caught shadow issue while checking above screenshots! So the issue is FAB doesn’t have any shadow but has in Kitkat, to resolve this issue in Lollipop, just give border width in FAB:

<android.support.design.widget.FloatingActionButton
   ...
   ... 	
   app:fabSize="normal"
   app:borderWidth="0dp"
   android:layout_marginBottom="@dimen/fab_margin_bottom"
   android:layout_marginRight="@dimen/fab_margin_right"/>

Issue 3: RotateAnimation doesn’t work on FAB (Issue ID: #176116)

Download source code:
You can download the source code of this example: https://github.com/PareshMayani/DesignSupportLibraryExamples

In Summary

This bring us to the end of this part. In this part, we have talked about floating action button, attributes and issues. We would look how to animate floating action button based on the certain actions like scrolling RecyclerView up and down, but that I would cover once we are done with exploring CoordinatorLayout.

Read next part about SnackBar, another component of Android Design support library.