Fragment hidden by a ViewPager

Question

I have an issue about a Fragment this is hidden by ViewPager. I know the fragment is there behind since i experimented setting the ViewPager height to a fixed amount of pixels. Then it shows up i its container right below the viewpager. But What I want is the viewpager to cover all the screen and the when a user clicks on a button in the toolbar the fragment should appear ontop of all other views - that is the viewpager.

So my question - how could I make the Fragment to be shown on top of all other views?

 <?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"
android:id="@+id/linlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>

<include layout="@layout/toolbar"/>

<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#4f83cc"
    style="@style/MyCustomTabLayout"
    app:tabMode="scrollable"
    >
</android.support.design.widget.TabLayout>



<android.support.v4.view.ViewPager

    android:id="@+id/viewPager"
    android:layout_below="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    />

<FrameLayout
    android:id="@+id/container"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:elevation="10dp"
    android:translationZ="5dp"
    >

</FrameLayout>


</LinearLayout>

Answer 1

You should use a FrameLayout. Since you're using a LinearLayout, your fragment ends up being laid out below your ViewPager, that's what they're for. A FrameLayout would always lay out it child views by stacking them ontop of each other.

Change your XML to this instead:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_height="match_parent"
android:layout_width="match_parent"
>

<!-- Your first child-->
<LinearLayout
    android:id="@+id/linlayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    >

    <include layout="@layout/toolbar"/>

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#4f83cc"
        style="@style/MyCustomTabLayout"
        app:tabMode="scrollable"
        >
    </android.support.design.widget.TabLayout>



    <android.support.v4.view.ViewPager

        android:id="@+id/viewPager"
        android:layout_below="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />


</LinearLayout>

<!--Your Fragment Container (Second Child) is now above the views above it-->

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

</FrameLayout>

</FrameLayout>