FAB inside LinearLayout to be on top of Fragments

Question

In my layout file I have a LinearLayout as parent Layout in which I have displayed ImageView using appBarLayout, and there are Tablayout as which contain listview. I need to display a FloatingActionButton in all those layouts.

When I include the FAB in the LinearLayout it doesn't display the FAB.

If I use FrameLayout instead of LinearLayout as parent layout, it displays fab but it distorts imageview and make disappear all other views(please check image: https://drive.google.com/file/d/1OTqXIMVGh_7sRtkLYu7Snn0fTP-e4VCE/view?usp=sharing). Please help me regarding this, here is my xml code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:fab="http://schemas.android.com/apk/res-auto"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical">


    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="170dp"
        android:gravity="center"
        android:elevation="0dp"
        android:id="@+id/appbarid">
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:src="@drawable/imagep"
            tools:ignore="contentDescription"/>

    </android.support.design.widget.AppBarLayout>
    <android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabGravity="fill"
        app:tabMode="scrollable"
        android:id="@+id/tablayout_id"
        app:tabTextColor="@color/tabtextcolor"
        app:tabIndicatorColor="@color/tabindicatorcolor"
        android:background="@color/colorPrimary" />
    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/viewpager_id" >

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

    <com.github.clans.fab.FloatingActionMenu
        android:id="@+id/menu"
        android:layout_above="@id/viewpager_id"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginRight="10dp"
        android:layout_marginBottom="10dp"
        android:layout_marginLeft="10dp"
        fab:menu_fab_size="normal"
        fab:menu_showShadow="true"
        fab:menu_shadowColor="#66000000"
        fab:menu_shadowRadius="4dp"
        fab:menu_shadowXOffset="1dp"
        fab:menu_shadowYOffset="3dp"
        fab:menu_colorNormal="@color/colorPrimary"
        fab:menu_colorPressed="@color/colorAccent"
        fab:menu_colorRipple="#ffffff"
        fab:menu_animationDelayPerItem="50"
        fab:menu_icon="@drawable/plus"
        fab:menu_buttonSpacing="0dp"
        fab:menu_labels_margin="0dp"
        fab:menu_labels_showAnimation="@anim/fab_slide_in_from_right"
        fab:menu_labels_hideAnimation="@anim/fab_slide_out_to_right"
        fab:menu_labels_paddingTop="4dp"
        fab:menu_labels_paddingRight="8dp"
        fab:menu_labels_paddingBottom="4dp"
        fab:menu_labels_paddingLeft="8dp"
        fab:menu_labels_padding="8dp"
        fab:menu_labels_textColor="#FFFFFF"
        fab:menu_labels_textSize="14sp"
        fab:menu_labels_cornerRadius="3dp"
        fab:menu_labels_colorNormal="#333333"
        fab:menu_labels_colorPressed="#444444"
        fab:menu_labels_colorRipple="#66FFFFFF"
        fab:menu_labels_showShadow="true"
        fab:menu_labels_singleLine="false"
        fab:menu_labels_ellipsize="none"
        android:layout_gravity="bottom|right"
        fab:menu_labels_maxLines="-1"
        fab:menu_labels_position="left"
        fab:menu_openDirection="up"
        fab:menu_backgroundColor="@android:color/transparent"
        fab:menu_fab_label="Menu"
        fab:menu_fab_show_animation="@anim/my_show_animation"
        fab:menu_fab_hide_animation="@anim/my_hide_animation">


        <com.github.clans.fab.FloatingActionButton
            android:id="@+id/myFAB"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:fab_colorNormal="#2196f3"
            app:fab_colorPressed="#40c4ff"
            app:fab_colorRipple="#99FFFFFF"
            android:src="@drawable/parts"
            fab:fab_size="mini"
            fab:fab_label="Share the app with your friends" />

        <com.github.clans.fab.FloatingActionButton
            android:id="@+id/myFAB2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:fab_colorNormal="#7e57c2"
            app:fab_colorPressed="#9575cd"
            app:fab_colorRipple="#99ffffff"
            android:src="@drawable/post"
            fab:fab_size="mini"
            fab:fab_label="Send Suggestion/Feedback" />

    </com.github.clans.fab.FloatingActionMenu>
    </LinearLayout>

Answer 1

Change top LinearLayout to CoordinatorLayoutand add app:layout_behavior="@string/appbar_scrolling_view_behavior" to FAB.