Using CoordinatorLayout with SwipeRefreshLayout and RecyclerView and FloatingActionButton together

Question

I am trying to put all this elements together, but i can't see the the FloatingActionButton My code is this:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="xx.xx.xxxx.xxxxxxxx.Activity.MainFragment">

<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/swipe_refresh_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/my_recycler_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="5dp"
            android:scrollbars="vertical" />

        <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="16dp"
            android:src="@drawable/ic_add_white_24dp"
            app:fab_colorNormal="@color/btn_accent"
            app:fab_colorPressed="@color/btn_accent_pressed"
            app:fab_colorRipple="@color/btn_ripple1"
            app:fab_shadow="true" />

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

I tried to switch SwipeRefreshLayout and CoordinatorLayout position, and then the FloatingActionButton appeared, but i couldn't scroll up, because it activated the refresh of SwipeRefreshLayout. how can i make it work?

Answer 1

Move the fab outside of the SwipeRefreshLayout.

<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/swipe_refresh_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.v7.widget.RecyclerView
            android:id="@+id/my_recycler_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="5dp"
            android:scrollbars="vertical" />
    </android.support.v4.widget.SwipeRefreshLayout>
    <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="16dp"
        android:src="@drawable/ic_add_white_24dp"
        app:fab_colorNormal="@color/btn_accent"
        app:fab_colorPressed="@color/btn_accent_pressed"
        app:fab_colorRipple="@color/btn_ripple1"
        app:fab_shadow="true" />
</android.support.design.widget.CoordinatorLayout>