CODEWITHSUNDEEP
android-viewpagervertical-scrollingandroid-collapsingtoolbarlayout
Shumin Gao
Shumin Gao

Reputation: 697

Android collapsing toolbar when vertical viewpager is scrolled down

I have the collapsing toolbar layout in xml:

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

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/pink"
        app:layout_scrollFlags="scroll|enterAlways"
        />

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorColor="@color/background_white"
        />

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

What I want to do is: collapse the tool bar if vertical viewpager is scrolled down. And expand the toolbar if the viewpager is scrolled up. How could I achieve this?

Thanks.

Upvotes: 1

Views: 2178

Answers (2)

Anudeep Samaiya
Anudeep Samaiya

Reputation: 1968

The following will solve your problem

<?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:id="@+id/main_content" 
android:layout_width="match_parent"
android:layout_height="match_parent">

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

<android.support.design.widget.CollapsingToolbarLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:minHeight="?attr/actionBarSize"
    android:fitsSystemWindows="true"
    app:layout_scrollFlags="scroll|enterAlwaysCollapsed">

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    android:fitsSystemWindows="true"
    app:layout_collapseMode="pin"
    app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.CollapsingToolbarLayout>

<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>
</android.support.design.widget.AppBarLayout>

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

Now only you have to add RecylcerView in your view pager fragments

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.RecyclerView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:id="@+id/recyclerview" />

The next thing that you need to do is hook all of this up in your Activity do usual intialization of viewpager in your MainActivity and setup your fragments to infalte the above recyclerview and voila its done

Upvotes: 0

Anantha Babu
Anantha Babu

Reputation: 216

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

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

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

Put NestedScrollView in your fragment . thats all . it will scroll like charm.

Upvotes: 1

Related Questions