RecyclerView with FloatingActionButton

Question

I have an activity that has a RecyclerView (optionally in a CardView) and a FloatingActionButton

I want the FAB to be always on screen at the bottom right, but when I scroll to the end of the RecyclerView, the FAB is hiding part of the content on the last item.

Using android:layout_marginBottom="48dp" on the parent CardView (or the RecyclerView itself after removing the CardView) fixes that issue, but it causes the RecyclerView to shrink to the screen size minus the 48dp margin.

I want the RecyclerView to be full size (i.e. fits all items), but when I scroll over the items until I reach the last item, there should be that margin so that the FAB does not cover the last item of the RecyclerView. That is similar to the behavior of the email list in the Google Inbox/Gmail app.

I have seen many questions with similar (but not same) problem, but none of the solutions worked for me. I know there should be some easy fix for this problem, and I don't want to extend LinearLayoutManager, as it seems too much for this problem. I also don't want to hide the FAB on scroll.

Here is what I have so far:

activity_main.xml

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorBackground"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay"/>

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/card_list"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_add"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:onClick="onClick"
        app:srcCompat="@drawable/ic_add"/>
</android.support.design.widget.CoordinatorLayout>

card_list.xml

<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="@dimen/activity_vertical_margin"
    android:background="@android:color/white"
    android:layout_marginBottom="48dp"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/activity_main">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</android.support.v7.widget.CardView>

mVck · Accepted Answer · 2017-02-13T02:43:43.433

31

Remove the layout_marginBottom from the CardView and add the following to the RecyclerView:

android:paddingBottom="48dp"
android:clipToPadding="false"

edited Feb 13 '17 at 02:43

answered Feb 13 '17 at 02:32

mVck

2,910
2
18
20

Actually, I am using `layout_marginBottom`. `paddingBottom` was from one of the trials. Updated the question. Tried your suggestion with and without `layout_marginBottom` but it only added extra white space at the end of the `RecyclerView` – A.A. Feb 13 '17 at 02:40
Sorry @A.A. it's clipToPadding="false" (not "true"). I edited my answer. – mVck Feb 13 '17 at 02:41
That's very close to what I want, but there is still white space at the end of the list. I want this space to show the background of the `CoordinatorLayout` instead – A.A. Feb 13 '17 at 03:02
@A.A. I guess you could play with the background of the RecyclerView (set some transparency maybe) and the background of its items to have what you want. – mVck Feb 13 '17 at 03:08
This works great...until the SnackBar pushes the FAB up but not the RecyclerView. Anyone have a solution for this? Does some behavior need to be added to the RecyclerView in the CoordinatorLayout? – Tenfour04 Feb 28 '20 at 03:17

RecyclerView with FloatingActionButton

1 Answers1