Android: pin TabLayout to top of Scrollview

Question

I was looking at the twitter app on my phone.

You can see that when a user scrolls up, the tabLayout actually just pins itself onto the bottom of the toolbar nicely and does not move at all.

I thought maybe they did it by just putting all of the top part of the app (the profile picture, the profile wallpaper of the bicycle on the grass, the text), into a CollapsingToolBarLayout and AppBarLayout but actually, only the profile wallpaper with the bicycle on the grass is part of the CollapsingToolBarLayout and AppBarLayout as that is the only part that actually collapses. The text part just scrolls up and the tabLayout just pins to the top below the toolbar.

I read the credits on the twitter app and it appears that they used the SlidingTabLayout to achieve their effect. SlidingTabLayout is similar to tabLayout with the latter being supported in the support library.

It looks like a fairly common pattern that is used by mainstream apps nowadays as well -

Google+ app uses it in their profile view on the app:

Facebook Moments uses it in their app:

Any idea how they did all managed to do this?

I'm looking to do something similar to all these apps.

My requirements are to:

1. Have a collapsingToolBarLayout that collapses when you scroll up
2. Have a textview underneath the collapsingToolBarLayout that would scroll and "hide" underneath the toolBar when it fully collapses.
3. Have a tabLayout underneath the textview that would "stick" to the tabLayout when you have scroll the textview under the collapsingToolBarLayout.
4. Have a recyclerview underneath the tabLayout so that when you click on each tab in the tabLayout, recyclerview will switch between lists of "Tweets", "Photos", "Favourites" etc.

I looked at two other questions that were posted on SO:

Can the tab selection indicator of TabLayout be pinned to the top of the screen while scrolling?. The answer here appears to be changing the behavior of the tabLayout but I doubt changing the behavior would actually generate what the twitter app does. As I mentioned, the tabLayout appears to sit outside the CollapsingToolBarLayout and AppBarLayout and the behavior should only be effective if it is sitting within the CollapsingToolBarLayout and AppBarLayout.

How to pin TabLaout at top of ScrollView?. This question asks something similar to what I asked, but does not give enough detail and has no answers.

Alate

Answer 1

for those first 3 questions look here (link seems dead) so this wayback machine link. it points to a github demo repo at https://github.com/slidenerd/Android-Design-Support-Library-Demo

As for the 4th you need to create fragments for each tab and load them when they are selected for a simple approach, or you can create one fragment and communicate with it to show specific content when a tab is selected..

EDIT couldn't find an updated link so here are the answers

1. Use CoordinaterLayout.
2. Any thing you want to collapse (or hide) with tool bar goes inside collapsingToolBarLayout.
3. Any thing that stays after collapsed toolBar goes inside of AppBarLayout after CollapsingToolbarLayout.

ex -

<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:background="@android:color/background_light"
    android:fitsSystemWindows="true"
    >

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

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/main.collapsing"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginEnd="64dp"
            >

            <ImageView
                android:id="@+id/main.backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:fitsSystemWindows="true"
                android:src="@drawable/material_flat"
                app:layout_collapseMode="parallax"
                />

            <android.support.v7.widget.Toolbar
                android:id="@+id/main.toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin"
                />
         <!-- ADD ANY THING THAT GETS SCROLLED ALL THE WAY UP WITH TOOLBAR -->
        </android.support.design.widget.CollapsingToolbarLayout>

     <!--- ADD TAB_LAYOUT HERE---> 

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

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="20sp"
            android:lineSpacingExtra="8dp"
            android:text="@string/lorem"
            android:padding="@dimen/activity_horizontal_margin"
            />
    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_margin="@dimen/activity_horizontal_margin"
        android:src="@drawable/ic_comment_24dp"
        app:layout_anchor="@id/main.appbar"
        app:layout_anchorGravity="bottom|right|end"
        />
</android.support.design.widget.CoordinatorLayout>

Judah

This is funny but I actually watched that exact Slidenerds video last night and thought that it would actually work if I create two separate Collapsingtoolbarlayout. Will try this later. – Alate

It actually doesn't do quite what I want it to do.When I look at the slidenerd example, the example slides up and both the tabLayout and the toolbar disappears off the screen. I can get it to stick in place at the top by changing the scollFlag to exitUntilCollapsed, but then the textview and the tabLayout will both stick to the top of the toolbar, which is not what I want. I want the textview to scroll off the screen and the tabLayout to stick. – Alate

you need one collasingBarLayout inside that you will have 2 children 1. Toolbar with attribute collapsMode="pin" and, 2. TextView with attribute collapseMode="parallax" – Judah

and if you don't want tabStrip to collapse just put it out side CollapsingBarLayout. – Judah

Thanks - this is close to the effect of what I want to do. Just one point, if you want it to scroll without the parallax effect, you will need to set the textview attribute to collapseMode="none" – Alate

@Alate the link does not work. could you please explain your solution for design layout like profile layout of twitter? – Henceforward

Link is dead, what to do? – Hennahane

The link is broken. – Hypnosis

found page contents on the wayback machine : web.archive.org/web/20150730222400/http://slidenerd.com:80/2015/…, points to github demo repo at github.com/slidenerd/Android-Design-Support-Library-Demo – Travertine

@Alate were you able to achieve the same ui layout as twitter profile? I'm trying to achieve one and I tried using 2 collapsing toolbar layouts (1 - bg image and toolbar, 2 - viewgroup with profile details) but the 2nd collapsing toolbar won't collapse, been stuck for weeks and I still have no idea how to achieve it – Elvaelvah

Hey @Alate did you guys achive it? Can you please look at this one? https://mcmap.net/q/660829/-part-of-the-content-of-a-collapsingtoolbarlayout-is-getting-sticky-on-top-when-used-with-viewpager-and-recyclerview/6341943 – Theta

@SulabhDeepPuri after 5 years best description ever about where it is for hiding or pin. what is the the good resource to know more about UI component android in your opinion ? everything I learned was practical with testing and running. too hard to understand which component is must where to use. – Niu

Answer 2

By default there may not be a library that supports that. But you can indeed achieve it with a little bit of programming. Listen to the scrollview events through ViewTreeObserver, and manipulate others. If you are still not sure, let's make a library for it. You make an app and post in github, I will collaborate to make it working.

Brune

Hey Muktadar can you please take a look at this https://mcmap.net/q/660829/-part-of-the-content-of-a-collapsingtoolbarlayout-is-getting-sticky-on-top-when-used-with-viewpager-and-recyclerview/6341943 – Theta

Answer 3

The closest solution to achieve the above mentioned is MaterialViewPager. It's a good starting point, you can fork it and modify for your own preferences, and you can customize it many ways.

Ellett

The library doesn't really do what I want it to do without a lot of rework as the library appears to be built to display lists of info but it is not useful for a typical "social" app. The reason why I want a textview underneath the collapsingToolBarLayout is because I can give info on the profile of the person similar to how the twitter app does it without requiring the user to click anywhere to see the actual info. There should be a way to do it in code - its such a widely used and useful concept. – Alate