Hide top and bottom toolbars when using CoordinatorLayout

Question

I have managed to figure out how to add a bottom toolbar to CoordinatorLayout , but can't seem to figure out how to hide the bottom RelativeLayout .

If I add @string/appbar_scrolling_view_behavior to the bottom RelativeLayout , the bottom bar appears when the user scroll upwards. The desired effect is both top and bottom bars appear when the user scrolls upwards. Any ideas how I would approach this? A universal bottom bar (for simple actions) across all the tab is needed since my ViewPager contain complicated code from other libraries.

A floating action button is not preferable since it hides the collection of actions inside a button that requires the user to tap and expand. Here below is my xml layout for managing the tabs and pager:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:ads="http://schemas.android.com/tools">

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">


    <android.support.design.widget.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_scrollFlags="scroll|enterAlways">

        <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="#1378BB"
            app:layout_scrollFlags="scroll|enterAlways"/>


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

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

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



    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|enterAlwaysCollapsed"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        >

        <android.support.v7.widget.Toolbar
            android:id="@+id/tabs"
            android:background="#3202c4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|enterAlwaysCollapsed"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="100dp"
            />
    </RelativeLayout>

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

Any thoughts or ideas? I tried placing the toolbar inside CollapsingToolbarLayout and use layout_alignParentBottom="true" , but that only anchored the toolbar to AppBarLayout and not the entire CoordinatorLayout

Only if I could get @string/appbar_scrolling_view_behavior to trigger the other way around for the bottom RelativeLayout (make bar appear when scrolling in the opposite direction it was intended to trigger)

Answer 1

You need to add custom CoordinatorLayout.Behavior to the bottom Toolbar . Toolbar must be a direct child of CoordinatorLayout .

Mark it with:

app:layout_behavior="{name_of_the_class_of_behavior}"
app:layout_scrollFlags="scroll|enterAlways"

In custom behaviour override to methods:

@Override
public boolean layoutDependsOn(CoordinatorLayout parent, View fab, View dependency) {
    return dependency instanceof AppBarLayout;
}

and the second one is:

public boolean onDependentViewChanged(CoordinatorLayout parent, View fab, View dependency)

where you control the visibility of the target view. Basically what is needed is to measure what part of AppBarLayout is shown, translate it and set it to your view accordingly:

CoordinatorLayout.LayoutParams lp = (CoordinatorLayout.LayoutParams) view.getLayoutParams();
int viewBottomMargin = lp.bottomMargin;
int distanceToScroll = view.getHeight() + viewBottomMargin;
float ratio = dependency.getY() / toolbarHeight;
view.setTranslationY(-distanceToScroll * ratio);

More about it here