ViewPager内的CollapsingToolbarLayout

Question

I am using a ViewPager which loads different pages. These shall be made of CollapsingToolbarLayout .

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <android.support.v4.view.ViewPager
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</FrameLayout>

Once inflated, the layout shall work like this:

It shall allow swiping through pages and every page has a picture in its toolbar which can collapse individually. Is this possible?

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/root_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:background="@color/background"
    android:transitionName="@string/transition_session_background">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@null"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll"
            android:minHeight="1px"
            android:fitsSystemWindows="true"
            android:background="@null"
            app:titleEnabled="false">



                <ImageView
                    android:id="@+id/photo"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:scaleType="centerCrop"
                    android:transitionName="@string/transition_session_image" />



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



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

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

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/scroll_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:clipToPadding="false">


    </android.support.v4.widget.NestedScrollView>


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

Answer 1

It shall allow swiping through pages and every page has a picture in its toolbar which can collaps individually. Is this possible?

No, unfortunately toolbar having its own state for each page of viewpager is not possible. The reason is simple to understand, since the viewpager is a view of equal hierarchy as the viewpager the viewpager and toolbar work independently.

Although, you can have an app where each time a page is changed in viewpager, the toolbar either remains collapsed or expanded. To achieve this set up viewpager's on page change listener

// Attach the page change listener inside the activity
vpPager.addOnPageChangeListener(new OnPageChangeListener() {

    // This method will be invoked when a new page becomes selected.
    @Override
    public void onPageSelected(int position) {
        appBarLayout.setExpanded(true);//or false as you wish
    }


}); 

Using Support Library v23, you can call appBarLayout.setExpanded(true/false) in your onPageSelected() overridden method.

Answer 2

you can use Collapsing toolbar with viewpager and a Tablayout :

    <?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:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapse_toolbar"
            android:layout_width="match_parent"
            app:titleEnabled="false"
            android:layout_height="250dp"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            //your image view under toolbar
            <ImageView
                android:id="@+id/header"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@drawable/test"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:gravity="top"
                android:minHeight="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:titleMarginTop="15dp" />

            <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:layout_gravity="bottom"
                app:tabIndicatorColor="@color/colorAccent" />

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

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

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


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

here is a good implementation Example: http://manishkpr.webheavens.com/android-material-design-tabs-collapsible-example/