FAB not positioning inside CoordinatorLayout with RecyclerView

Question

I am trying to display a list of items with a FAB to add a new item. The current screen is as below.

I have a CoordinatorLayout which has only a RecyclerView and the FAB. My problem is the FAB is not getting anchored to the bottom of the page, but to the bottom of the RecyclerView whose height seems to behave as if its wrap_content, but I've declared as match_parent. The RecylerView has a silver background for illustrative purposes.

<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"
tools:context="com.ae.apps.tripmeter.fragments.expenses.TripsListFragment">

<android.support.v7.widget.RecyclerView
    android:id="@+id/list"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_alignParentTop="true"
    android:background="@color/silver"
    android:layout_margin="@dimen/activity_horizontal_margin"
    app:layoutManager="LinearLayoutManager"
    tools:listitem="@layout/fragment_trip"/>


<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"
    android:layout_gravity="bottom|end"
    android:layout_margin="@dimen/fab_margin"
    android:src="@android:drawable/ic_input_add"
    app:elevation="8dp"/>

I can't figure out why I am not able to position the FAB at the bottom of the page.

Answer 1

Try putting the RecyclerView in a 'content' layout file and add it to the main layout via

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

---

EDIT:

The FAB should not be placed in the Fragment if it is to reside at the bottom of the Activity. Remove the FAB from the fragment and add it to the main activity. Like this:

<?xml version="1.0" encoding="utf-8"?>
<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:fitsSystemWindows="true"
    tools:context="com.your_company.your_project">

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

    <-- ref. your recycler here -->
    <include layout="@layout/content_with_your_list"/>

    <-- Put the FAB here -->
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_input_add"
    />

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

Now in your fragment remove the FAB! It should reside in your main activity with the CoordinateLayout. Use a simple LinearLayout in your fragment.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              app:layout_behavior="@string/appbar_scrolling_view_behavior"
              tools:showIn="@layout/activity_your_main_activity"
              >


    <android.support.v7.widget.RecyclerView
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/silver"
        android:layout_margin="@dimen/activity_horizontal_margin"
        app:layoutManager="LinearLayoutManager"/>


</LinearLayout>

You will need to make changes were appropriate in order to fit you your project.

---

Toggle FAB visibility

In order to toggle the visibility of the FAB add the following property to the FloatingActionButton in your Parent Activity.

android:visibility="gone"

and make it visible in code with:

mFab.setVisibility(View.VISIBLE);

or invisible, again with

mFab.setVisibility(View.GONE);

Whenever you need, eg. when a fragment is displayed or removed.