Android Tabbed Activity Scrolling

Question

I want to create an Android App. For my main screen I use the Tabbed Activity. It looks like I want. But when I surround my TextView with a ScrollView it only scrolls the text, but it should look like this:

So it should look before I scroll:

And like this after I scrolled:

Here is the Tabbed Activity:

<?xml version="1.0" encoding="utf-8"?>

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingTop="@dimen/appbar_padding_top"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways"
        app:popupTheme="@style/AppTheme.PopupOverlay">

    </android.support.v7.widget.Toolbar>
    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

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

<android.support.v4.view.ViewPager
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:layout_margin="@dimen/fab_margin"
    android:src="@android:drawable/ic_dialog_email" />

And here the text Fragment:

<RelativeLayout 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"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.obware.story.Activitys.MainActivity$PlaceholderFragment">

<TextView
    android:id="@+id/section_label"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

Does anyone know how I can do that?

Answer 1

Since this is a Tablayout, I am assuming that you are using Fragments and a ViewPager. (this still applies even without a viewpager)

In this case, You will have to send an answer to you activity which is base to hide the toolbar. Declare an interface inside you base activity which has the Tab layout.

say :

interface HideToolBarInterface{

  public void hideTheToolbar(boolean shouldbehidden);
}

Now implement this interface inside your activity and overrride the abstract method declared.

eg:

public void hideTheToolbar(boolean shouldbehidden){
 if(shouldbehidden){
  getSupportActionBar().hide(); // if you have set your own toolbar, hide it similarly
 }else{
   getSupportActionBar().show(); 
 }
}

Now inside your fragments, set a onScrollListener to your ListView or RecyclerView whatever you are using to show the list.

Now when the list is scrolled, you can use the Listeners onScrollChanged, apply you logic to call the interface method to hide the toolbar like:

//on some condition(say SCROLL_STATE_FLING) do the following:
((HideToolbarInterface)getActivity()).hideTheToolbar(true);

//on some other conditon(say SCROLL_STATE_IDLE unhide it:
((HideToolbarInterface)getActivity()).hideTheToolbar(false);

You can check for other options here:

android lollipop toolbar: how to hide/show the toolbar while scrolling?