2

I am trying to create this kind of a layout where -

  1. A CollapsingToolbarLayout that has a ViewPager like google play app.
  2. Below that there is a Grid RecyclerView.
  3. And at the end, there is another ViewPager.

The RecylerView scrolls normally until the end when CollapsingToolbarLayout expands.

enter image description here 

<?xml version="1.0" encoding="utf-8"?>

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/app_bar_layout"
            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/collapsing_toolbar"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                app:contentScrim="?attr/colorPrimary"
                app:expandedTitleMarginEnd="64dp"
                app:expandedTitleMarginStart="48dp"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:fitsSystemWindows="true"
                    android:orientation="vertical"
                    app:layout_collapseMode="parallax">

                    <TextView
                        android:id="@+id/text_home_active"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_margin="@dimen/margin_normal"
                        android:background="@color/header_bg"
                        android:gravity="center_vertical"
                        android:textColor="@android:color/black"
                        android:textSize="@dimen/title_date_text_size" />

                    <android.support.v4.view.ViewPager
                        android:id="@+id/viewpager_home"
                        android:layout_width="fill_parent"
                        android:layout_height="170dp"
                        android:layout_gravity="center"
                        android:overScrollMode="ifContentScrolls" />
                </LinearLayout>

                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    android:background="@color/color_primary"
                    android:minHeight="?attr/actionBarSize"
                    app:layout_collapseMode="pin"
                    app:theme="@style/ToolBarStyle" />

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

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

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

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:weightSum="3">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="0dp"
                    android:layout_weight="2"
                    android:orientation="vertical">

                    <TextView
                        android:id="@+id/text_home_popular"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:background="@color/header_bg"
                        android:gravity="center_vertical"
                        android:padding="@dimen/margin_normal"
                        android:textColor="@android:color/black"
                        android:textSize="@dimen/title_date_text_size" />

                    <android.support.v7.widget.RecyclerView
                        android:id="@+id/grid_home_popular"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:clipToPadding="false"
                        android:scrollbars="none"
                        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="0dp"
                    android:layout_gravity="bottom"
                    android:layout_weight="1"
                    android:elevation="5dp"
                    android:orientation="vertical">

                    <TextView
                        android:id="@+id/text_home_offers"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_margin="@dimen/margin_normal"
                        android:gravity="center_vertical"
                        android:text="@string/text_home_offers"
                        android:textColor="@android:color/black"
                        android:textSize="@dimen/title_date_text_size" />

                    <android.support.v4.view.ViewPager
                        android:id="@+id/viewpager_home_offers"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:overScrollMode="ifContentScrolls" />
                </LinearLayout>

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

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerViewNavigation"
        android:layout_width="300dp"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        android:background="#ffffff"
        android:scrollbars="none" />

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

My problem is toolbar collapse only when I move outside the RecyclerView.

mihirjoshi
  • 12,161
  • 7
  • 47
  • 78
  • Do you want that bottom `ViewPager` to stay pinned to the bottom while the `RecyclerView` is scrolling? Also, your bottom `ViewPager` has `android:layout_height="wrap_content"`. Is that working for you? My understanding of `ViewPager` is that it doesn't honor how high the individual pages want to be. – kris larson Mar 03 '16 at 11:19
  • Can you provide more detail about "toolbar collapse only when I move outside the RecyclerView"? I'm trying to picture what is actually happening. – kris larson Mar 03 '16 at 11:21
  • @krislarson Actually I am stuck in recyclerview and collapse toolbar, I havent worked on the bottomviewpager. I am scrolling the recyclerview it is scrolling but for toolbar to collapse, I either have to provide scroll gesture above or below the recyvlerview. – mihirjoshi Mar 03 '16 at 11:50
  • I always have problems having scrolling components inside `NestedScrollView` (I know that's what it's supposed to be for, but I can never get it to do what I want.) My first recommendation would be to take that `text_home_popular` `TextView` and actually set up the `RecyclerView` adapter to make it the first item in your list. Sounds crazy but I've done this type of thing several times and it solves all my problems. I'll put a full answer together for you later. – kris larson Mar 03 '16 at 14:23
  • similar question with no answer( maybe the answer to this question help you) : http://stackoverflow.com/questions/37479828/how-to-put-recyclerview-below-toolbar-and-above-tablayout-and-viewpager-also-han – Hamed Ghadirian May 27 '16 at 10:45

1 Answers1

0

This solution solved my problems.

So Simply when the Appbar is fully expanded do not allow the recycler view to scroll instead we will use the scroll from the NestedScrollView, otherwise the Recycler View will scroll normaly.

  appBarLayout.addOnOffsetChangedListener(new AppBarStateChangeListener() {
        @Override
        public void onStateChanged(AppBarLayout appBarLayout, State state) {
            if (state == State.COLLAPSED)
                mRecyclerView.setNestedScrollingEnabled(true);
            if (state == State.EXPANDED)
                mRecyclerView.setNestedScrollingEnabled(false);
        }
    });
Viktor Petrovski
  • 796
  • 5
  • 14