Floating action button in ViewPager above a listView

Question

I have a working floating action button inside of a LinearLayout currently. The LinearLayout it is inside of is in one tab of a SlidingTabLayout. I want the floating action button to be on top of the list view inside of the first tab, and also to show inside of the second tab in the same location.

So here is the activity_main.xml where the FrameLayout at the bottom is for the floating action button:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <include
        android:id="@+id/tool_bar"
        layout="@layout/tool_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <com.stephenprotzman.o.SlidingTabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/primary"
        android:elevation="2dp" />

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1">



    </android.support.v4.view.ViewPager>

    <FrameLayout
        android:id="@+id/frame_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:layout_marginRight="16dp" />
</LinearLayout>

And if it helps, here is the fab_layout.xml where the actual floating action button is declared.

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.stephenprotzman.o.FloatingActionButton
        android:id="@+id/fab_1"
        android:layout_width="@dimen/fab_size"
        android:layout_height="@dimen/fab_size"
        android:layout_gravity="center_horizontal"
        android:layout_marginBottom="16dp"
        android:layout_marginRight="16dp"
        android:background="@drawable/fab_background"
        android:elevation="@dimen/fab_elevation"
        android:stateListAnimator="@animator/fab_anim">

        <ImageView
            android:layout_width="@dimen/fab_icon_size"
            android:layout_height="@dimen/fab_icon_size"
            android:layout_gravity="center"
            android:duplicateParentState="true"
            android:src="@drawable/fab_icons" />

    </com.stephenprotzman.o.FloatingActionButton>


</FrameLayout>

The way that I currently have it laid out the floating action button is inside of its own section of the LinearLayout so the list view just stops when it gets to the button. The plus side to this is that it does in fact show up on both tabs of the SlidingTabLayout, though still inside its own section.

In an ideal situation I would like the button to be in the designated location (16 dp from bottom and from right), but on top of the list view in the first tab, and the second tab has a map inside of it, so i would like for it to be on top of that as well.

Answer 1

    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <include
                android:id="@+id/tool_bar"
                layout="@layout/tool_bar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

            <com.stephenprotzman.o.SlidingTabLayout
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/primary"
                android:elevation="2dp" />

            <android.support.v4.view.ViewPager
                android:id="@+id/pager"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1" />

        </LinearLayout>

        <include
            android:id="@+id/fab_layout"
            layout="@layout/fab_layout"
            android:layout_width="@dimen/fab_size"
            android:layout_height="@dimen/fab_size"
            android:layout_marginBottom="16dp"
            android:layout_marginRight="16dp" 
            layout_gravity="bottom|right"/>
    </FrameLayout>