3

In version 5 of Google Play Store app, scroll to the content, ActionBar on with scrolling, but the tabs are fixed to get on top.

How to do this?

BEFORE SCROLL

enter image description here

AFTER SCROLL

enter image description here

Joaquin Iurchuk
  • 5,499
  • 2
  • 48
  • 64
Cícero Moura
  • 2,027
  • 1
  • 24
  • 36

3 Answers3

6

As others have suggested, use ObservableScrollView from: https://github.com/ksoichiro/Android-ObservableScrollView

Try putting both the Toolbar and the SlidingTabStrip in the same container, then animate that container as the user scrolls the ObservableScrollView, for example:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
         xmlns:tools="http://schemas.android.com/tools"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         tools:context=".MainActivity">

    <com.github.ksoichiro.android.observablescrollview.ObservableListView
        android:id="@+id/listView"
        android:layout_height="match_parent"
        android:layout_width="match_parent"/>

    <LinearLayout
        android:id="@+id/toolbarContainer"
        android:orientation="vertical"
        android:elevation="10dp"
        android:background="@color/material_deep_teal_200"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"/>

            <!--Placeholder view, your tabstrip goes here-->
            <View
                android:layout_width="wrap_content"
                android:layout_height="48dp"/>
   </LinearLayout>
</FrameLayout>

Then when you override the ObservableScrollViewCallbacks you could do something like this:

@Override
public void onScrollChanged(int scrollY, boolean firstScroll, boolean dragging) {

    toolbarContainer.animate().cancel();

    int scrollDelta = scrollY - oldScrollY;
    oldScrollY = scrollY;

    float currentYTranslation = -toolbarContainer.getTranslationY();
    float targetYTranslation = Math.min(Math.max(currentYTranslation + scrollDelta, 0), toolbarHeight);
    toolbarContainer.setTranslationY(-targetYTranslation);
}

@Override
public void onUpOrCancelMotionEvent(ScrollState scrollState) {
    float currentYTranslation = -toolbarContainer.getTranslationY();
    int currentScroll = listView.getCurrentScrollY();

    if (currentScroll < toolbarHeight) {
        toolbarContainer.animate().translationY(0);
    } else if (currentYTranslation > toolbarHeight /2) {
        toolbarContainer.animate().translationY(-toolbarHeight);
    } else {
        toolbarContainer.animate().translationY(0);
    }
}

The onUpOrCancelMotionEvent stuff is to animate the container to prevent the toolbar from being only half shown/hidden.

Here's a demo video just for reference: https://drive.google.com/file/d/0B7TH7VeIpgSQSzZER1NneWpYa1E/view?usp=sharing

memoizr
  • 2,081
  • 2
  • 18
  • 24
  • how is your main layout look like? It seems you only change the Y position of toolbar. I want to know parent layout of listview and toolbarcontainer and their relationsihp. – Gunhan May 23 '15 at 06:46
  • `ObservableListView` and the toolbar container would both be sibilings, nested within the same parent. I added the parent layout and the `ObservableListView` to the example. I hope it helps. – memoizr May 23 '15 at 09:21
  • According to your example scrollview's top part lie under the toolbar. Do you add an empty view to your scrollview with height of toolbar? Or don't you need to compansate this overlapping section somehow like by using margins or paddings? – Gunhan May 23 '15 at 12:02
  • Yes, they overlap. Both approaches may be fine depending on circumstances. If you use padding, you'll have to set `android:clipToPadding="false"` in your parent layout to avoid cutting off the `ListView`. However, I usually go the empty header route, as it gives more flexibility for my use cases, in my opinion. – memoizr May 24 '15 at 08:53
  • @Splatters Hello, I'm trying to implement it on a Fragment wich on my Activity have tabs, how do I add the animation? – Skizo-ozᴉʞS ツ Oct 28 '15 at 14:45
1

Answer is here:

https://github.com/ksoichiro/Android-ObservableScrollView :D

This library is excellent for my case and very others

Cícero Moura
  • 2,027
  • 1
  • 24
  • 36
1

Great that you answer your question by yourself ;) Here is another small hint: Use a seperated layout for your tabs or integrate them into your toolbar and then tranlsate the toolbar only as far as you can see the tabs on top.

Mann
  • 661
  • 5
  • 9