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

score 9 · Accepted Answer · edited Mar 31 '15 at 09:19

9

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.

edited Mar 31 '15 at 09:19

Anggrayudi H

14,977
11
54
87

answered Mar 31 '15 at 07:13

MohdTausif

498
4
13

score 5 · Answer 2 · edited Nov 06 '19 at 12:47

5

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" />

edited Nov 06 '19 at 12:47

Miloš Černilovský

3,846
1
28
30

answered Jul 31 '17 at 06:30

j2emanue

60,549
65
286
456

if i implement this then animation is not applied to the layout! – hetsgandhi Oct 11 '18 at 10:36

Ido · Answer 3 · 2015-04-18T07:16:18.163

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

Why not just use XML: `paddingBottom="50dp"` ? – Natix Mar 11 '16 at 00:35 — Natix, Mar 11 '16 at 00:35

score 0 · Answer 4 · answered Mar 31 '15 at 06:55

0

While loading the list, You can create a flag and find if the item in the list is last visible item in the screen,than hide the floating button.

use this to find last visible item

int currentPosition = list.getLastVisiblePosition();

You will get the last number of the item.i.e if 7th item is last visible in your list,than it will return value of currentPosition = 7;

Once you get the number of items that fit in your screen,Now check for the flag

if(listAdapterItemsArray.get(position) == currentPosition) {
    //hide button
} else {
    //nothing 
}

answered Mar 31 '15 at 06:55

What will happen if you only have 7 items in the list, they are all displayed, the list can't be scrolled but you hide the button, so it doesn't overlap the last item? – stan0 Mar 31 '15 at 07:11
Exactly.Just hide the button when list is fitting enough on the screen. – Mar 31 '15 at 07:13
Wouldn't you then lack the button's functionality? – stan0 Mar 31 '15 at 07:15
1

I said what the guy wanted.I know this kills some functionalities but its not recommended.But this guy needs to hide it anyway so i suggested a way to do that.Thats it. – Mar 31 '15 at 07:27
He didn't want to simply hide the button, but handle the case where you cannot scroll the button away. It'd be bad to loose the primary action the FAB is used for. – althaus Apr 01 '16 at 07:25

score 0 · Answer 5 · edited Sep 22 '15 at 06:17

0

You can set the position of google action button to left top using

     `android:layout_gravity="top|left"`

This way it looks good and doesn't hide anything.

edited Sep 22 '15 at 06:17

Amit Basliyal

840
1
10
28

answered Sep 22 '15 at 05:55

Ashish Rawat

5,541
1
20
17

Using `top|left` moves the button on top of the first list element. – althaus Apr 01 '16 at 07:28

score 0 · Answer 6 · edited Mar 07 '19 at 11:27

0

Add bottom padding to the RecyclerView. Also, don't use android:layout_height="wrap_content" unless you've overridden onMeasurein the layout manager. Current layout managers do not yet support wrap content.

Add the attribute android:clipToPadding="false" to achieve the goal. As mentioned in comments.

edited Mar 07 '19 at 11:27

Agilanbu

2,747
2
28
33

answered Mar 07 '19 at 10:48

RAHUL MAURYA

306
1
9

Floating Action Button blocking other components

6 Answers6

Linked