5

I am developping an app that has a page where there must be a header followed by multiple recycler views within a viewpager. However, I do not know how to "hide" the header when scrolling down.

The following layout would not work :

- RecyclerView
    - Header
    - SlidingTabLayout
    - ViewPager
        - RecyclerView

Because a verticaly scrollable view cannot be put inside another verticaly scollable view. But it is possible to create this type of layout in another way because twitter did it :

enter image description here

So how does one achieve to create this type of layout?

Theorical solution suggestion

If we had this layout :

- LinearLayout
    - Header
    - SlidingTabLayout
    - ViewPager
        - RecyclerView

And when the RecyclerView is scrolled, we would move manually every element upwards so the Header would progressively be "hidden" and the ViewPager would be higher, could it work?

Raphael Royer-Rivard
  • 2,252
  • 1
  • 30
  • 53
  • 2
    you can do it with https://developer.android.com/reference/android/support/design/widget/CoordinatorLayout.html and http://android-developers.blogspot.de/2015/05/android-design-support-library.html – Budius Aug 30 '15 at 18:49
  • 1
    did you ever get this figured out? If so do you have a sample app you can share? – Learn2Code Apr 04 '19 at 15:53

1 Answers1

3

Because a verticaly scrollable view cannot be put inside another verticaly scollable view

That is not true, you can put scrollable view into another scrollable view. It is only very hard to manage the scrolling events and most of the times it is not necesseary. You should not nest scrollable views.

However, there are interfaces for NestedScrollingChild and NestedScrollingParent which, when implemented properly can hadle the scrolling events. The commonly used case is nesting a RelativeLayout or NestedScrollView within a CoordinatorLayout. This is also how you could implement a Twitter–like layout.

You can find information in the blogpost announcing the Android Design Support Library or many other tutorials. The basic layout you should use is following

<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.support.design.widget.AppBarLayout
        android:layout_height="192dp"
        android:layout_width="match_parent">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <android.support.v7.widget.Toolbar
                android:layout_height="?attr/actionBarSize"
                android:layout_width="match_parent"
                app:layout_collapseMode="pin"/>

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

    <! -- Your Scrollable View -->
    <android.support.v7.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</android.support.design.widget.CoordinatorLayout>
Lamorak
  • 10,957
  • 9
  • 43
  • 57
  • Hey @Raphael Royer-Rivard I was trying to implement this exact thing and I am facing some issues. can you guys look at this https://stackoverflow.com/q/61640784/6341943 – hushed_voice May 10 '20 at 15:08