Design Support Library (II): Floating Action Button

37 Comments / Blog, Development / By

If you already read the first article regarding Navigation View, you may be wondering what else the new Android Design support library can do for you. In this occasion, I´ll talk about Floating Action Button.

Introduction

The Floation Action Button (FAB) is a new component included in Material Design guidelines that emphasizes the most important action in our current screen. It´s a bold and stylish way to attract users attention.

Though there is an enormous hype surrounding this component, it´s really important to create FABs only when they are really necessary, and when they show an action that it´s gonna be used quite often (ideally, all the times the activity is shown). It´s interesting to read other voices that affirm FABs are a bad idea.

Floating Action Button

Using Floating Action Button

The use of FAB is really simple, though this component has brought some debate these days after the launch of the design library, because some things didn´t work as expected.

I´ll show you the general behaviour, and then some ideas you might take into account to make it work properly.

First, the only thing you need is use a FloatingActionButton, which extends ImageView, so many of the things you know about that control will be helpful. This is the way you add it to you XML:

[xml]
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_add_black"
android:layout_gravity="bottom|end"
app:elevation="6dp"
app:pressedTranslationZ="12dp"/>
[/xml]

As you see, I only added an icon, an elevation (so that it shows a shadow) and a pressedTranslationZ; that way the shadow will grow when it´s pressed. A nice effect, and really easy to add this way. I also added some gravity flags to set it in the bottom right part of the screen. This is supposing you use a FrameLayout. You can adapt it to the layout you use.

Extra options

Those previous customizations are the simplest ones. The FAB will take the color from the accent color defined in the theme, and the ripple color from the colorControlHighlight, though all these things are customizable.

For the background color you could do:

[xml]
app:backgroundTint="@color/mycolor"
[/xml]

And for the ripple:

[xml]
app:rippleColor="@android:color/white"
[/xml]

You also have methods available to do all this programmatically, but the backgroundTint is a bit more difficult because it use a state list, so this is the way to go (thanks Carlos Morera for the tip):

[java]
fab.setBackgroundTintList(ColorStateList.valueOf("Your color"));
[/java]

There are two different sizes of FAB available, and it´s easy to get the mini version just by adding another property:

[xml]
app:fabSize="mini"
[/xml]

Cautions

Although these things will be probably fixed in future, here are a couple of tricks to make FAB work as expected. First, if you run previous code, you´ll find a lot of different unexpected behaviours depending on the Android version you are using. All of these problems seem to be caused by a property called borderWidth, which you need to set explicitly to 0:

[xml]
app:borderWidth="0dp"
[/xml]

Besides, you will see that with this XML, pre-lollipop versions will get some margin around, while 21+ won´t get it. The reasoning is the same as what you could see on CardView: Shadows on pre-lollipop are rendered using a drawable, which uses its own space to draw it, while the shadows in Lollipop are rendered by the system. CardView had a property that enabled a compat padding.

But Floating Action Button doesn´t. However, this is really easy to simulate. Just add a padding that is dependent on the android version:

[xml]
android:layout_margin="@dimen/fab_compat_margin"
[/xml]

You now only need to define the value on its proper dimen.xml files.

For values:

[xml]
app:borderWidth="0dp"
[/xml]

For values-v21:

[xml]
app:borderWidth="16dp"
[/xml]

Easy, right?

Click Event

You can add a click event as usual:

[java]
fab.setOnClickListener(new View.OnClickListener() {
@Override public void onClick(View v) {
Snackbar.make(content, "FAB Clicked", Snackbar.LENGTH_SHORT).show();
}
});
[/java]

Conclusion

Though the impression when using Design Support Library is that it is not perfectly polished, it´s true that with some simple tricks it works quite good and saves a lot of time. I´ll keep investigating new components on future articles. Remember you can see all this code and much more in a small working example at Github.

The team from Webucator has created a video from this article. Take a look!

[youtube=https://youtu.be/eaG47lMQsUY]

Thanks for reading.

37 thoughts on “Design Support Library (II): Floating Action Button”

  1. Pedro

    Great post. Very helpful. But I have a cinceptual doubt. If you have an activity with a navigation drawer and each option if the drawer shows a diferent fragment, where shold I include the FAB, in the layout of the activity or in the layout of the fragments that need to show the FAB (not all of them need it)?

    1. Antonio Leiva

      I think it’s explained in the guidelines, check because I’m talking by heart, but I’d say you should hide it and show it in an enter/exit animation. Wherever you put does not really matter while you can fit to the specs. But it will probably be easier to set it in the activity.

    1. Antonio Leiva

      Do you need something special? It’s really very similar to previous ActionBar, and I already have an article about that.

      2. Antonio Leiva

        Yeah you can change the toolbar color when the search view is expanded, and the search view style is now fully customizable. So it could look like that too.

    2. Kamil

      The SO you posted works like a charm, although you need to take some time to implement it, but not more than 30 minutes I think, I have implemented it yesterday and it looks perfectly 😉

    1. Antonio Leiva

      You have to do it manually, there is not a default implementation in the design support library.

  5. Christian Leicht Jørgensen

    I am trying to replace the com.melnykov.fab.FloatingActionButton with this control, but when doing so the app just stalls when starting. When i remove the AppCompat control it works again. I don’t get any exceptions.
    Have you experienced something like this?

    1. Antonio Leiva

      No, I had a styled ImageView before in the example repo, and didn’t have much problem in starting using the FAB.

  6. Kamil

    Ok, and how do I fling additional options on click? I want to implement FAB over a list to display options to filter “Only A type”, “Only B type”, “All types”

    1. Antonio Leiva

      If I understood well, I´d say that a FAB is not the best solution. Anyway, you´ll have to implement that manually, the speed dial is not implemented in the design support library by default.

      1. Kamil

        Implementing a filter options for a listview isn’t a good idea for a FAB? I looked into http://www.google.com/design/spec/components/buttons-floating-action-button.html#buttons-floating-action-button-transitions and especially this example: http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsZHRMSzRFTXhoMnM/patterns_actions_fab_actions10.png – so I would say that morphing FAB into toolbar with options to filter listview can be a good UX. Do you know any examples of fab moprhing into toolbar?

      2. Antonio Leiva

        I haven´t seen it in any working app. Regarding you question, if the filter action is the most important thing in the screen and people are using it almost always they use the app, it could make sense. In the end it´s up to the designer. Check the specs to see when to use and when not to use a FAB. Nothing specific about filtering anyway.

  8. Allen

    Hi, Antonio,

    Do you know how to position the floating action button in the middle across two different views? I do not want to hard code the position. Thanks!

  9. Julián Ezequiel

    Antonio, I have a question, it’s possible that the FAB size isn’t 56×56 ? Because I already have a layout simulating a FAB with 56×56 size, and when I use the Design Support Library’s FAB, it seems to be bigger

    1. Antonio Leiva

      I haven’t tried to be honest. You could try to set your size instead of wrap_content.

  10. Suleiman

    Thank you for that brilliant post. Nice of you to even highlight the issues with the Design Support Library and its workarounds as well!

  11. Mark

    This is a great post! It’s a shame that this implementation of the floating action button is so barebones, however. To be fair it’s perhaps ‘extensible.’ But, some of the libraries on GitHub offer much more robust implementations with animations based on ListViews, etc.

  14. Amer Dawod

    i checked the project on Github and i saw this file “fab_background.xml” in the drawable folder , but i don’t see any uses for it !!
    so .. is it important to create it ?? or i can do the FAB without creating this file ??

    1. Antonio Leiva

      No sorry, I used it in that project before the design support library existed. But it’s not necessary anymore.

  15. Sagar

    Hey Antonio,

    Nice post! I had a question: How do we get the expanded FAB menu after clicking the FAB? Is there a way to do it using the design support library or do we have to rely on the third party libraries? I have searched extensively on the web for a solution but couldn’t get anything that uses native library.

    1. Antonio Leiva

      No, the design library doesn’t implement that feature. You need to do it yourself or rely on a third-party library.

  16. Sagar

    Hi, I am having a query. I am using FAB in my app. When user clicks FAB, it want it to hide immediately. In onClick() method, I have first line set to fab.setVisible(View.GONE). When I click FAB, it continues to animation of being clicked, then getting back to normal state and then its changing visiblity to GONE. There is significant delay. How do I hide immediately?

Comments are closed.