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?

One more thing: View A is always visible. It shrinks to a set minimum, but it never disappears. — Katedral Pillon, Jul 13 '15 at 16:39
I would really love to see a good answer to this post. I am upvoting. If you are interested as well, please upvote. — Konsol Labapen, Jul 13 '15 at 16:40

score 10 · Accepted Answer · answered Jul 19 '15 at 17:09

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

enter image description here

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.

score 1 · Answer 2 · answered Jul 15 '15 at 21:18

1

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

answered Jul 15 '15 at 21:18

Sarpe

5,747
2
28
26

1

Thanks for the link. While it may answer the question, I would prefer to know how to do it. Material Design is here to stay. And I would rather not use a library every time I need to do something cool. I hope you understand. I will try to look at the code in there to see what I can figure out. Thanks. – Katedral Pillon Jul 17 '15 at 17:50
No problem, it's perfectly reasonable. If you'll find what your are looking for, consider to answer your own question for the community – Sarpe Jul 18 '15 at 18:22

Chris Fox · Answer 3 · 2015-07-20T09:39:11.343

1

This project by iPaulPro should fit your needs. To get this behavior properly work your fragments have to use a RecyclerView or a NestedScrollView. By the way, it's NOT a library.

edited Jul 20 '15 at 09:39

answered Jul 19 '15 at 16:49

Chris Fox

76
1
6

How to create something similar to Play Newsstand layout

3 Answers3