RecyclerView with FloatingActionButton

A.A. picture A.A. · Feb 13, 2017 · Viewed 13k times · Source

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>

Answer

mVck picture mVck · Feb 13, 2017

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

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