Search code examples
androidandroid-layoutandroid-fragmentsandroid-framelayoutfloating-action-button

FAB inside FrameLayout to be on top of fragments


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: enter image description here


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>