Hide top layout on scrolling up and show on scrolling down (like collapsingToolbarLayout)

Question

I had followed this answer https://stackoverflow.com/a/36796343 and acheived tablayout in mid screen. Now I want to hide top layout on scrolling up and bottom tablayout to be in full screen. Also on scrolling down the page should restore to original position. https://drive.google.com/open?id=0B_sVfcILd-_8UzlXUlBLekFDcWV2eTVJamxYaGkxVXFTVHow

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
app:layout_scrollFlags="scroll|enterAlways"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<LinearLayout
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <RelativeLayout
        android:id="@+id/top_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <include layout="@layout/display_agents_row"/>

    </RelativeLayout>
    <RelativeLayout
        android:id="@+id/bottom_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.TabLayout
            android:id="@+id/pager_header"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_gravity="center"
            android:layout_marginTop="0dp"
            android:background="@color/black"
            android:minHeight="60dp"
            app:tabGravity="fill"
            app:tabIndicatorColor="@color/red"
            app:tabMode="fixed"
            app:tabSelectedTextColor="@color/white"
            app:tabTextAppearance="@style/TextAppearance.AppCompat.Small.Inverse" />

        <android.support.v4.view.ViewPager
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/pager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@+id/pager_header"/>
    </RelativeLayout>
</LinearLayout>


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

My fragment

public class DisplayPartnerFragment extends Fragment {
Agent agent;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    // Inflate the layout for this fragment
    View v = inflater.inflate(R.layout.display_partner, container, false);

    agent=new Gson().fromJson(getArguments().getString("agent"),Agent.class);

    if (agent!=null){
        setData();
        ((AppCompatActivity) getActivity()).getSupportActionBar().setTitle(""+agent.getName());
    }

    // Locate the viewpager in activity_main.xml
    ViewPager viewPager = (ViewPager) v.findViewById(R.id.pager);

    // Set the ViewPagerAdapter into ViewPager
    ViewPagerAdapter adapter = new ViewPagerAdapter(getChildFragmentManager());
    adapter.addFrag(new SelectServiceFragment(), "About");
    adapter.addFrag(new SelectServiceFragment(), "Overview");

    viewPager.setAdapter(adapter);

    TabLayout mTabLayout = (TabLayout) v.findViewById(R.id.pager_header);
    mTabLayout.setupWithViewPager(viewPager);


    return v;
}

class ViewPagerAdapter extends FragmentStatePagerAdapter {
    private final List<Fragment> mFragmentList = new ArrayList<>();
    private final List<String> mFragmentTitleList = new ArrayList<>();

    public ViewPagerAdapter(FragmentManager manager) {
        super(manager);
    }

    @Override
    public Fragment getItem(int position) {
        return mFragmentList.get(position);
    }

    @Override
    public int getCount() {
        return mFragmentList.size();
    }

    public void addFrag(Fragment fragment, String title) {
        mFragmentList.add(fragment);
        mFragmentTitleList.add(title);
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return mFragmentTitleList.get(position);
    }
}

private void setData() {

}

}

Answer 1

Replace the root LinearLayout with CoordinatorLayout and add app:layout_scrollFlags="scroll|enterAlways" to the top_layout.

EDIT: Also add app:layout_behavior="@string/appbar_scrolling_view_behavior" to the ViewPager.