: How do I keep my floating action button from blocking other components? The new Material Design of Google recommends to use floating action buttons to draw attention to the user for the main

@Yeniel278

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.

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

Vote Up Vote Down

@Bryan765

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: stackoverflow.com/questions/27768495/not-able-to-add-empty-view-below-recyclerview

Vote Up Vote Down

@Karen819

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();
}
}

Vote Up Vote Down

@Turnbaugh909

There are some different ways you can handle this.


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.
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.


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.

Vote Up Vote Down

@Chiappetta793

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.

Vote Up Vote Down