Floating Action Button blocking other components

Question

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 in your list

Answer 1

Add a blank View with the same height as floating button in footer of list. So when you scroll your list, last item will come up and floating button will not hide last item of list. This is a simple and quick solution.

Answer 2

I just do what I think the Google Gmail app is doing and add padding to the RecyclerView (or ListView). Remember to set clipToPadding to false so that the RecyclerView behaves correctly when it is inside a CoordinatorLayout.

<android.support.v7.widget.RecyclerView 
    android:id="@+id/my_recyclerview" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:clipToPadding="false" 
    android:paddingBottom="100dp" />

Answer 3

I just had this issue now, and I solved it this way:

public void addBlankSpace(ListView listView)
{
    Space space = new Space(listView.getContext());
    space.setMinimumHeight(Core.dpToPx(50));
    listView.addFooterView(space);
}

And I guess there is always a better way. like checking if you even need it. and only then to display it. but for now, this simple code works just fine.

And here is the conversion function:

public static int dpToPx(int dp)
{
    return (int)(dp * Resources.getSystem().getDisplayMetrics().density);
}

Or we can just add some padding:

listView.setPadding(0, 0, 0, Core.dpToPx(50));