ViewPager inside CoordinatorLayout covers other views on API >= 21

Question

I am using the new CoordinatorLayout from Google's new design support library.

I have the following layout:

<android.support.design.widget.CoordinatorLayout>

<android.support.design.widget.AppBarLayout>

    <android.support.design.widget.CollapsingToolbarLayout
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <ImageView
            app:layout_collapseMode="parallax"/>

        <android.support.v7.widget.Toolbar />

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

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

<LinearLayout
    app:layout_behavior="@string/appbar_scrolling_view_behavior" >

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

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager" />
</LinearLayout>

<com.getbase.floatingactionbutton.FloatingActionsMenu
    app:layout_anchor="@id/viewPager"
    app:layout_anchorGravity="bottom|right|end"
    android:layout_alignParentBottom="true"
    android:layout_alignParentEnd="true"
    android:layout_alignParentRight="true"
    >

    <com.getbase.floatingactionbutton.FloatingActionButton />

</com.getbase.floatingactionbutton.FloatingActionsMenu>


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

The problem is that the ViewPager always overlays on top of the FloatingActionMenu on API >= 21, is there a fix for this? I tried using view.bringToFront() to fix this, but no luck. I also moved the Views around as well, still no luck. Things I tried:

• Moving the FABMenu inside AppBarLayout
• Moving the FABMenu inside LinearLayout

No luck.

Has anyone experienced anything similar?

Answer 1

This turned out to be a simple elevation issue, I was setting the elevation as android:elevation=".." and this was a lower elevation than another view, thus covering the FloatingActionButtonMenu. This only occurs on API >= 21.

Answer 2

although you seemed to have found the answer yourself, there is an absolutely amazing resource here: https://github.com/chrisbanes/cheesesquare

This is an implementation of viewpager inside a coordinator layout that uses the official google design support library, along with all the other goodies supported by this library (including an extremely easy to use Navigation side panel).

Why am I sharing this? Because the code is clean, uses an official latest library and is backward compatible. I found it very easy to use this as a base to my application and I am already getting good feedback on the overall implementation of the design which closely follows the material guidelines.

The example is written by a person from the official android team so it is also reliable that way!

Hope you find this useful (although not totally a direct answer to your question - but related nonetheless).

I am a new user who can't even post comments due to low rep so awarding the rep will be really helpful!

Thanks :)