android lollipop: content above tabs: scrolling issue

Question

I have an activity just like Google NewsStand where there is an image above tabs. When the user starts scrolling up, the image and tabs start scrolling up (as if the scrolling is disabled for the contents under the tabs) and the contents of the tab start scrolling once the image above the tabs goes past the screen. All this happens in one scroll motion. See Google NewsStand app for what I'm talking.how can this be achieved?

I'm using appcompat-21 and toolbar for the material look. Thanks a lot for answering this...

Below is the sample code (based on SlidingTabsBasic)

ACTIVITY_MAIN.XML

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:id="@+id/sample_main_layout">

<FrameLayout
      android:id="@+id/sample_content_fragment"
      android:layout_weight="2"
      android:layout_width="match_parent"
      android:layout_height="0px" />

FRAGMENT_SAMPLE.XML

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:orientation="vertical">

    <TextView android:layout_height="200dp" android:layout_width="wrap_content"
        android:text="some random text"/>

    <com.example.android.common.view.SlidingTabLayout
          android:id="@+id/sliding_tabs"
          android:layout_width="match_parent"
          android:layout_height="wrap_content" />

    <android.support.v4.view.ViewPager
          android:id="@+id/viewpager"
          android:layout_width="match_parent"
          android:layout_height="0px"
          android:layout_weight="1"
          android:background="@android:color/white"/>
     </LinearLayout>

PAGER_ITEM.XML

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="wrap_content" android:layout_width="wrap_content">

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:orientation="vertical">

    <TextView
          android:id="@+id/item_subtitle"
          android:layout_width="wrap_content"
          android:layout_height="400dp"
          android:textAppearance="?android:attr/textAppearanceLarge"
          android:text="Page:"/>

    <TextView
          android:id="@+id/item_title"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:textSize="80sp" />

   </LinearLayout>
    </ScrollView>

This code as is allows you to scroll contents vertically within the tabs. I also want to scroll the content of the entire screen first before scrolling the tabs, just like in the NewsStand app, all in one scroll motion. How do I achieve this?