CODEWITHSUNDEEP
android
Leo DroidCoder
Leo DroidCoder

Reputation: 15046

CollapsingToolbarLayout and ViewPager

I am using a ViewPager inside CollapsingToolbarLayout.
The problem is that when I swipe the ViewPager which is not fully expanded, toolbar title moves in the place where it should be with fully expanded state (by default to the bottom left corner). Then after collapsing title completely disappears.

Here is how my layout looks like:

<?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:layout_above="@+id/button_remember_word">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <android.support.v4.view.ViewPager
                android:id="@+id/pager_gallery"
                android:layout_width="match_parent"
                android:layout_height="240dp"/>


            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"/>
        </android.support.design.widget.CollapsingToolbarLayout>

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

    <android.support.v4.widget.NestedScrollView
        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"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:id="@+id/text_word_description"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/tmp_lorem"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

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

And here is how I am setting the toolbar title:

  Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
  setSupportActionBar(toolbar);
  mToolbar.setTitle("A title");
  // also tried this way
  CollapsingToolbarLayout collapsingToolbarLayout = 
      (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
      collapsingToolbarLayout.setTitle("Another title");

Adding a couple of screenshots: 1. Normal expanded state enter image description here

  1. Normal collapsed state
    enter image description here

  2. If in this state I swipe the ViewPager
    enter image description here

  3. Title disappears
    enter image description here

enter image description here

Any pice of advice is appreciated

Upvotes: 1

Views: 781

Answers (1)

AmirhosseinAbd93
AmirhosseinAbd93

Reputation: 101

use app:layout_collapseMode="parallax" for your viewPager 

<android.support.v4.view.ViewPager
                android:id="@+id/pager_gallery"
                android:layout_width="match_parent"
                app:layout_collapseMode="parallax"
                android:layout_height="240dp"/>

Upvotes: 1

Related Questions