21

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

  • 1
    This question really should be over on ux.stackexchange.com – mawcsco Jun 4 '15 at 14:50
13

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.

7

May be a bit simplistic and not the most elegant solution, but: add an empty 'dummy' entry to the end of the list, so the user can scroll further than the last entry.

  • 1
    This could be considered the "official" solution, because the Gmail app uses it. – Vicky Chijwani May 2 '15 at 6:26
  • 1
    Also, you can call it "padding at the bottom of the list" rather than a dummy entry (which, as you point out, sounds inelegant). – Vicky Chijwani May 2 '15 at 6:28
3

This works for me. Add bottom padding to RecyclerView

<android.support.v7.widget.RecyclerView 
android:id="@+id/my_recycler_view" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:clipToPadding="false" 
android:paddingBottom="30dp" 
android:scrollbars="vertical"/>

Ref: https://stackoverflow.com/questions/27768495/not-able-to-add-empty-view-below-recyclerview

1

I used this in a RecyclerView.Adapter's onBindViewHolder method to set the bottom margin of the last item in the list to 72dp so that it will scroll up above the floating action button.

This does not require a dummy entry in the list.

@Override
public void onBindViewHolder(ViewHolder holder, int position) {
    // other binding code goes here.

    if (position + 1 == getItemCount()) {
        // set bottom margin to 72dp.
        setBottomMargin(holder.itemView, (int) (72 * Resources.getSystem().getDisplayMetrics().density));
    } else {
        // reset bottom margin back to zero. (your value may be different)
        setBottomMargin(holder.itemView, 0);
    }
}

public static void setBottomMargin(View view, int bottomMargin) {
    if (view.getLayoutParams() instanceof ViewGroup.MarginLayoutParams) {
        ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) view.getLayoutParams();
        params.setMargins(params.leftMargin, params.topMargin, params.rightMargin, bottomMargin);
        view.requestLayout();
    }
}
  • Works for me :). – OWADVL Jan 25 '18 at 19:49
1

Bouncing off the "Relocate the button" idea in the accepted answer, the Scrolling techniques part of material design guidelines has one possible implementation of that idea.

Namely, the floating action button breaks the edge between the content and an app bar with flexible space. When scrolling:

The flexible space shrinks until only the toolbar remains. When scrolling to the top of the page, the flexible space grows into place again.

The floating action button animates onto the screen as an expanding piece of material.

https://material.io/guidelines/components/buttons-floating-action-button.html#buttons-floating-action-button-behavior

fab between app bar and content

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.