How to create something similar to Play Newsstand layout

Question

I am trying to “recreate” (something similar to) the Play Newsstand layout. Per the documentation the general structure for CoordinatorLayout is

<CoordinatorLayout>
    <!—  view that shrinks —>
    <AppBarLayout>
        <CollapsingToolbarLayout>
            …
        </CollapsingToolbarLayout>
    </AppBarLayout>

    <!— view that scrolls —>
    <SomeScrollView >
        ….
    </SomeScrollView>
</CoordinatorLayout>

Except when I look at the Newsstand app, what I am able to see is that SomeScrollView is really a ViewPager for TabLayout. For my particular case, my main issue is that my SomeScrollView has to be some sort of container for fragments. So basically what I want is

-------
|   A |
|     |
-------
|  B  |
|     |
-------

Where A is the collapsible portion and B is the scrolling portion. Again, for my case B is a container for dynamic fragments. So A will have a TabLayout and when user clicks on a tab it causes the visible fragment in B to change. The fragment in B will contain either a RecycleView or a scrollable TextView. (Actually one of the Fragments is a FrameLayout that contains both a RecycleView and a TextView, either of which is visible at a time)

Here is my code so far:

<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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <!-- collapsing view -->
    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

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

            <include
                …
                />

            <android.support.design.widget.TabLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_scrollFlags=“…”
                />

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

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

    <!-- scrolling view -->
    <android.support.v4.view.ViewPager
        android:id="@+id/main_viewpager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >

    </android.support.v4.view.ViewPager>

    <android.support.design.widget.FloatingActionButton
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|right|end"
        android:src="@drawable/ic_add"
        android:layout_margin="@dimen/minor_horizontal_margin"
        android:clickable="true"/>

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

Will someone please help me complete it?

Answer 1

Now, this library can exactly replicate the Play Newstand layout.

Its very easy to use and has got a huge scope for customizations. I am aware of the fact that you are not willing to use a library as such, but this can make things so much easy for you.

Just add this,

compile ('com.github.florent37:materialviewpager:1.0.7@aar'){
    transitive = true
}

and add the layout in XML,

<com.github.florent37.materialviewpager.MaterialViewPager
    android:id="@+id/materialViewPager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:viewpager_logo="@layout/header_logo"
    app:viewpager_logoMarginTop="100dp"
    app:viewpager_color="@color/colorPrimary"
    app:viewpager_headerHeight="200dp"
    app:viewpager_headerAlpha="1.0"
    app:viewpager_hideLogoWithFade="false"
    app:viewpager_hideToolbarAndTitle="true"
    app:viewpager_enableToolbarElevation="true"
    app:viewpager_parallaxHeaderFactor="1.5"
    app:viewpager_headerAdditionalHeight="20dp"
    app:viewpager_displayToolbarWhenSwipe="true"
    app:viewpager_transparentToolbar="true"
    app:viewpager_animatedHeaderImage="true"
    />

and follow the customization guidelines on the library page. Now, if you are still not convinced to use it, you still can head over to it and check how the library was built. It can give you enough insight on creating it yourself (but it will be time-consuming)

Hope it helps.

Answer 2

This ObservableScrollView seems to be something similar to what you are looking for: https://github.com/ksoichiro/Android-ObservableScrollView