Search code examples
androidandroid-toolbarandroiddesignsupportandroid-tablayout

Toolbar not collapsing with TabLayout


I would like to let the Toolbar collapse when the user scrolls in one of the TabLayout's tabs (supplied by ViewPager).

This is the functionality I desire:

enter image description here

enter image description here

However, my layout does not only not scroll, but also cuts off content at the bottom (to be exact, it cuts off 48dp - the height of a toolbar):

enter image description here

I use the ViewPager to display each Fragment as a tab. The Fragments consist of a simple ScrollView holding a TextView. Here is the layout:

<?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:fitsSystemWindows="true">

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

        <android.support.v7.widget.Toolbar
            android:id="@+id/ueber_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:layout_scrollFlags="scroll|enterAlways" />

        <android.support.design.widget.TabLayout
            android:id="@+id/ueber_tabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="fixed"
            app:tabGravity="fill"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:tabIndicatorColor="@android:color/white"/>

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

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

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

Each fragment has the following layout:

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <TextView
        android:id="@+id/ueber_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="14sp"
        android:textColor="#000000"
        android:linksClickable="false"
        android:textColorLink="#000000"
        android:fontFamily="serif"
        android:padding="16dp"/>

</ScrollView>

The ViewPager is set up by a ViewPagerAdapter:

ViewPager viewPager = (ViewPager) findViewById(R.id.ueber_viewpager);

ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
adapter.addFrag(new ContentFragment(), "Über");
adapter.addFrag(new ContentFragment(), "Impressum");
adapter.addFrag(new ContentFragment(), "Lizenzen");
viewPager.setAdapter(adapter);

TabLayout tabLayout = (TabLayout) findViewById(R.id.ueber_tabLayout);
tabLayout.setupWithViewPager(viewPager);

Solution

  • Use a NestedScrollView instead of a ScrollView.

    <android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">