floating action button stay between toolbar and frame that shows fragments

Question

I could able to place FAB button perfectly at bottom right of the layout. But I want FAB button to be placed at the intersecting point of toolbar and frame layout which i am using it for fragments.

Below is my activity_main.xml which is designed with DrawerLayout. I have tried with CoordinatorLayout but some how with my current frame inside the layout, i couldn't able to place the FAB button as shown in this link

https://i.sstatic.net/6RjOq.jpg

or

https://i.sstatic.net/xCxE0.png

My activity_main.xml

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

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:id="@+id/viewA">
    <LinearLayout
        android:id="@+id/container_toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <include
            android:id="@+id/toolbar"
            layout="@layout/toolbar" />
    </LinearLayout>

    <FrameLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">

        <FrameLayout
            android:id="@+id/container_body"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1" />

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|right"
            android:layout_marginRight="10dp"
            android:layout_marginBottom="16dp"
            app:fabSize="normal"
            android:src="@mipmap/ic_action_stop"
            app:backgroundTint="@color/colorPrimaryDark"
            app:rippleColor="#F06292"
            app:elevation="6dp"
            app:pressedTranslationZ="12dp"/>

    </FrameLayout>

</LinearLayout>
<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_height="match_parent"
    android:layout_width="wrap_content"
    android:layout_gravity="start"
    android:fitsSystemWindows="true"
    app:headerLayout="@layout/drawer_header"
    app:menu="@menu/drawer"
    />

I do not want scrolling of content in the fragment shown in container_body but want only fab button shows middle right of toolbar and frame.

I have looked into other stackoverflow post How can I add the new "Floating Action Button" between two widgets/layouts

but I couldn't able to figure out where should I put FrameLayout that shows fragment data.

Thank you Danail for reference to tutorial which gave some help.

Now FAB shows between toolbar and fragment as I desired.

Updated activity_main.xml is below

SOLUTION

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

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="150dp">

    <LinearLayout android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/viewA"
        android:orientation="vertical">

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

        <LinearLayout
            android:id="@+id/viewB"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="horizontal">

            <FrameLayout
                android:id="@+id/container_body"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                />
            </LinearLayout>

    </LinearLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="12dp"
        android:clickable="true"
        android:src="@mipmap/ic_action_play"
        app:layout_anchor="@id/toolbar"
        app:layout_anchorGravity="bottom|right|end"
        app:fabSize="normal"
        app:backgroundTint="@color/colorPrimaryDark"
        app:rippleColor="#F06292"
        app:elevation="6dp"
        app:pressedTranslationZ="12dp"/>

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

<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_height="match_parent"
    android:layout_width="wrap_content"
    android:layout_gravity="start"
    android:fitsSystemWindows="true"
    app:headerLayout="@layout/drawer_header"
    app:menu="@menu/drawer"
    />

This is showing FAB as required and shown in image links.

Answer 1

There is useful information in this guide. Take a closer look at the "Embedding FloatingActionButton in Header" section.

As a summary: You should use the layout_anchor and layout_anchorGravity attributes of the FAB. In your case the toolbar would be the "anchor" and you should use layout_anchorGravity="bottom|right|end".