Floating action button not displaying over recyclerview(which is inside a DrawerLayout)

Question

I am trying to get FAB over recyclerview which in my case will cover the whole screen. The FAB wont display even recyclerview is empty. Following is my xml code.

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context="com.technistan.ledger.CreateLedger"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

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


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

            <android.support.v7.widget.RecyclerView
                android:paddingLeft="2dp"
                android:paddingRight="2dp"
                android:id="@+id/recyclerView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"

                />


            <android.support.design.widget.FloatingActionButton
                android:id="@+id/myFAB"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|end"
                android:layout_margin="20dp"
                app:elevation="4dp" />


        </FrameLayout>

    </LinearLayout>


    <fragment
        android:id="@+id/fragment_navigation_drawer"
        android:layout_width="280dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:layout="@layout/fragment_navigation_drawer"
        android:name="com.technistan.ledger.NavigationDrawerFragment"
        tools:layout="@layout/fragment_navigation_drawer" />


    </android.support.v4.widget.DrawerLayout>

The preview is showing floating button fine like in the below snap; https://www.dropbox.com/s/18u5pt5v6kkkibj/Screen%20Shot%202015-09-13%20at%201.19.20%20PM.png?dl=0

But when i run the app there is no FAB displayed. I had tried many combinations but couldn't succeed. I tried this over listview without navigationdrawer (simple activity and it was working there i.e. displayed over listview).

Any help will be appreciated guys. Thanks

[EDIT:] I think the problem is because of the parent layout i.e. android.support.v4.widget.DrawerLayout, I had copy pasted the code from start of to its end to another empty activity and it shows the floating button over it there. But still unable to figure it out how to resolve this issue, I nee to display floating action button inside the Drawerlayout.

Answer 1

Try it like this :

Remove all layouts.

Keep only one parent, that's CoordinatorLayout.

Inside CoordinatorLayout, put both your RecyclerView and FloatingActionButton.

CoordinatorLayout should auto arrange your toolbar, recycler and fab, since is programmed to handle the design support library components.

Here's an example. You can use RecyclerView in place of the FrameLayout (which dynamically loads fragments at runtime). I generally use RecyclerView in another Fragment and load the fragment in here at runtime. This keeps the xml files clean.

<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/layout_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:elevation="0dp">

        <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/ThemeOverlay.AppCompat.Light"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

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


    <!-- Main layout for fragment placing -->
    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" >

    </FrameLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fabBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_action"
        android:layout_gravity="bottom|right"
        android:layout_marginBottom="@dimen/fab_margin_bottom"
        android:layout_marginRight="@dimen/fab_margin_right"
        app:fab_colorNormal="@color/pink"
        app:fab_colorPressed="@color/pink_pressed"
        app:borderWidth = "0dp" />


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

<!-- Nav drawer -->
<android.support.design.widget.NavigationView
    android:id="@+id/navigation"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    app:headerLayout="@layout/nav_header"
    app:itemIconTint="@color/pink_pressed"
    app:itemTextColor="@color/primary_text"
    app:menu="@menu/nav_menu" />

</android.support.v4.widget.DrawerLayout>