Strange behaviour of the CoordinatorLayout in conjunction with ViewPager

Question

I have the following main page layout in my app:

<?xml version="1.0" encoding="utf-8"?>

<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="match_parent">

    <android.support.v4.view.ViewPager
        android:id="@+id/mainPager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/app_bar_scrolling_view_behavior">
    </android.support.v4.view.ViewPager>

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >

        <android.support.v7.widget.Toolbar
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/actionToolbar"
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:minHeight="?attr/actionBarSize"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:title="@string/app_name"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways">
        </android.support.v7.widget.Toolbar>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:layout_scrollFlags="scroll|enterAlways">
        </android.support.design.widget.TabLayout>
    </android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>

The scrollable content is the ViewPager. I use the ViewPager in conjunction with the TabLayout:

ViewPager viewPager = (ViewPager) v.findViewById(R.id.mainPager);
TabLayout tabLayout = (TabLayout) v.findViewById(R.id.tabLayout);
tabLayout.setupWithViewPager(viewPager);
tabLayout.setTabMode(TabLayout.MODE_FIXED);
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);

All fragments in the ViewPager's adapter has a RecyclerView inside. When i first scroll up the RecyclerView's content (so that app bar is hidden), then switch to another page of data in the ViewPager and scroll RecyclerView's content down, the app bar is ... invisible. The main steps leading to this problem:

running on devices with api level 11 or higher (on devices with api level less than 11 all is ok);
Scrolling content up;
Switching to another ViewPager's page;
Scrolling content down to make app bar visible;
app bar is invisible.

Where is my problem? Thanks.

EDIT1: Fragment's toolbar initialization

Toolbar toolbar = (Toolbar) view.findViewById(R.id.actionToolbar);
toolbar.setTitle(toolbarTitleResId);
toolbar.inflateMenu(menuResId);
toolbar.setOnMenuItemClickListener(listener);

EDIT2: Fragment's layout

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

    <android.support.v7.widget.Toolbar
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/actionToolbar"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:layout_alignParentTop="true"
        android:minHeight="?attr/actionBarSize"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        android:background="?attr/colorPrimary">
    </android.support.v7.widget.Toolbar>

    <View
        android:id="@+id/anchor"
        android:layout_height="8dp"
        android:layout_width="match_parent"
        android:background="@drawable/shadow_gradient_drawable"
        android:layout_below="@+id/actionToolbar">
    </View>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/verticalRecyclerView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/anchor"/>
</RelativeLayout>

I don't see anything that stands out in the code you posted. Can you add the code for your toolbar initialization inside the fragment and the fragment layout file? — blackcj, Jul 01 '15 at 16:04
With the added Fragment code, everything is still working correctly on my API 22 device. I would recommend giving the toolbars different id's to avoid naming conflicts but even with the same id, I wasn't able to reproduce the issue. If you could post more code here or put the project on Github, I'd be happy to take another look. — blackcj, Jul 02 '15 at 15:24
@blackcj, ok, i will try to make my code cleaner and if i do not find the error i will put it on Github. — vadim, Jul 02 '15 at 18:15
As far as I know, the children for CoordinatorLayout must be, AppBarLayout, NestedScrollView, FloadingActionButton or any child layouts inheriting from one of these layouts. Adding a viewpager as a direct child of CoordinatorLayout can make that child not visible or not rendered properly. I have tried it with some other layout group but not with ViewPager. I did not have pleasant experience with it. It is very messy, was forced to change to a much standard layout instead. — Neon Warge, Jun 30 '16 at 00:29

score 8 · Accepted Answer · answered Jul 04 '15 at 13:55

I was able to reproduce this on my API 16 device (still no issues on API 22). This is definitely a bug in the AppBarLayout, however, there is a quick work around. This is only an issue when the AppBarLayout becomes completely hidden. Add a view with 1dp height to the AppBarLayout and everything should work without really being noticeable on the view.

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >

    <!-- Toolbar and tab bar code -->
    ...

    <!-- Add this -->
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/colorPrimary" />
</android.support.design.widget.AppBarLayout>

This solution works perfectly! Thank you for your responses. — vadim, Jul 04 '15 at 14:37

score 0 · Answer 2 · answered Sep 16 '16 at 11:41

0

We can also apply this solution for Switching to another ViewPager's page

appBarLayout.setExpanded(true, true);

Here 2nd parameter If it is true it AppBarLayout will expand with animation.

answered Sep 16 '16 at 11:41

Naveen Kumar M

7,497
7
60
74

Strange behaviour of the CoordinatorLayout in conjunction with ViewPager

2 Answers2