FAB inside FrameLayout to be on top of fragments

Issue

In my layout I have a FrameLayout in which I intend to display different layouts depending on user input. I want to display a FloatingActionButton in all those layouts.

In order to not repeat the FloatingActionButton in all of them, I want to have it attached to the FrameLayout. The problem is that the button is not displayed correctly on top of the fragment layout. For example, the initial fragment displayed, has a GridView and the button is behind it.

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<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="xeniasis.mymarket.MainActivity">

    <include
        android:id="@+id/toolbar"
        layout="@layout/toolbar" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:baselineAligned="false"
        android:orientation="horizontal"
        android:weightSum="4">

        <LinearLayout
            android:id="@+id/categories_layout"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:paddingRight="20dp">

            <ExpandableListView
                android:id="@+id/categories_listView"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
        </LinearLayout>

        <FrameLayout
            android:id="@+id/mainPane"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="3">

            <android.support.design.widget.FloatingActionButton
                android:id="@+id/settings"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|start"
                android:layout_margin="8dp"
                android:clickable="true"
                android:elevation="5dp"
                android:src="@android:drawable/ic_menu_search" />
        </FrameLayout>
    </LinearLayout>
</LinearLayout>

and the fragment layout displayed programmatically:

<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="xeniasis.mymarket.MainActivity">

        <android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/swipeRefreshContainer"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:paddingBottom="@dimen/activity_vertical_margin"
            android:paddingLeft="8dp"
            android:paddingRight="8dp"
            android:paddingTop="@dimen/activity_vertical_margin">

            <GridView
                android:id="@+id/productsGridview"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_alignParentLeft="true"
                android:layout_alignParentRight="true"
                android:layout_alignParentTop="true"
                android:numColumns="3"></GridView>

        </android.support.v4.widget.SwipeRefreshLayout>
</LinearLayout>

The result:

Solution

In the FrameLayout, declare another Framelayout and inflate the fragment there. It should work.

... <LinearLayout>
     .....

   <FrameLayout
        android:id="@+id/mainPane"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="3">

        <FrameLayout
            android:id="@+id/fragment_inflate"
            android:layout_width="match_parent"
            android:layout_height="match_parent">


        <android.support.design.widget.FloatingActionButton
            android:id="@+id/settings"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|start"
            android:layout_margin="8dp"
            android:clickable="true"
            android:elevation="5dp"
            android:src="@android:drawable/ic_menu_search" />
    </FrameLayout>

Answered By - Udayaditya Barua