Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

RecyclerView with FloatingActionButton

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>
like image 945
A.A. Avatar asked Feb 13 '17 02:02

A.A.


People also ask

How to add FloatingActionButton inside RecyclerView?

you need to use Relative layout instead Linear. Look at my code for floatingActionButton, this will help you. In my case, putting it under a Relative layout led me to an error similar to this >> stackoverflow.com/questions/46030137/…. My list isn't being populated anymore.

How do I hide the floating action button?

To show and hide a FloatingActionButton with the default animation, just call the methods show() and hide() . It's good practice to keep a FloatingActionButton in the Activity layout instead of putting it in a Fragment, this allows the default animations to work when showing and hiding.

How do I add a floating action button to Kotlin?

Note that select Kotlin as the programming language. Navigate to the app > res > drawable folder. Right-click on it > New > Vector Asset > Now select the icon which you want to add and simply click on finish to add that icon to the drawable folder. Navigate to the app > res > layout > activity_main.


1 Answers

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

android:paddingBottom="48dp"
android:clipToPadding="false"
like image 96
mVck Avatar answered Sep 23 '22 03:09

mVck