android lollipop: content above tabs: scrolling issue - android-tabs

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?