How do I keep my floating action button from blocking other components?

by

The new Material Design of Google recommends to use floating action buttons to draw attention to the user for the main action on that screen. There are quite a lot of examples of this within a list view.

Now, suppose your list view has just enough items to fill the screen, making scrolling impossible. If your list items have a certain component that the user can interact with, for example a switch or a favorite star, its possible that the floating action button is blocking this component. How should we handle this case?

EDIT: This actually always happens with the last item of the list.
Here’s an example where the ‘favorite-star’ can not be used properly. It’s also blocking content, such as the time in this example.

example of floating action button blocking UI

Answer

There are some different ways you can handle this.

  1. Don’t place vital content below the button

    This is the most obvious approach, and probably the most general. Whenever possible, structure your design to make sure that nothing vital is below the action button like other buttons, main content, etc.

    You can add extra space by using padding or a blank entry, formatting the content so the not-as-important things are not where the button will be, or some other thing – it depends on the content and the design you want.

  2. Relocate the button

    The action button doesn’t have to be in the bottom right. Depending on your design, it may make more sense to place it in another location. I think the examples below do it pretty well.

    Google just updated their material design guide and made a page just for the floating action button which shows it being used in different locations and sizing in addition to an animation (talked about below).


First image from Reddit News Pro. Second image from Mark DiSciullo.

  1. Don’t show the button all the time

    Sometimes the action button isn’t vital enough that it needs to be seen all the time. In cases like this, hiding it on scroll or while scrolling down may make sense. If and how you do so is dependent on the content and design, no one answer is true for all applications.

    Google’s updated guidelines show a version of animating the button in and out by scaling the whole thing instead of sliding like the image below.

Image from Floating Action.

Attribution
Source : Link , Question Author : dumazy , Answer Author : Zach Saucier

Leave a Comment