CODEWITHSUNDEEP
androidandroid-viewpagerandroid-coordinatorlayoutandroid-appbarlayout
vadim
vadim

Reputation: 175

Strange behaviour of the CoordinatorLayout in conjunction with ViewPager

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:

  1. running on devices with api level 11 or higher (on devices with api level less than 11 all is ok);
  2. Scrolling content up;
  3. Switching to another ViewPager's page;
  4. Scrolling content down to make app bar visible;
  5. 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>

Upvotes: 7

Views: 5902

Answers (2)

Naveen Kumar M
Naveen Kumar M

Reputation: 7557

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.

Upvotes: 0

blackcj
blackcj

Reputation: 3661

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>

Upvotes: 8

Related Questions