Android Toolbar show/hide blank space

Question

I'm trying to have my toolbar hide or show when the user is scrolling a list. To do it, I'm using a translation but a blank space appears instead of my actionBar. If I use a setVisibility(View.GONE), the blank space will appear during the animation and hide when it's done which is ugly..

Here is a short video of my issue

And here is how i do my animation (from Google I/O app) :

public void showToolbar(boolean show){
    if (show) {
        toolbar.animate()
                .translationY(0)
                .alpha(1)
                .setDuration(HEADER_HIDE_ANIM_DURATION)
                .setInterpolator(new DecelerateInterpolator());
    } else {
        toolbar.animate()
                .translationY(-toolbar.getBottom())
                .alpha(0)
                .setDuration(HEADER_HIDE_ANIM_DURATION)
                .setInterpolator(new DecelerateInterpolator());
    }
}

And here is my layout :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/mainContent">

<include layout="@layout/toolbar"
    android:id="@+id/my_toolbar" />

<fragment
    android:name="com.ar.oe.fragments.SectionsFragment"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="?attr/actionBarSize"/>

</RelativeLayout>

And my toolbar

<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/my_toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
/>

Answer 1

You need animate your container and not your toolbar.

Try this:

RelativeLayout mainContent = (RelativeLayout) findById(R.id.mainContent);

public void showToolbar(boolean show){
if (show) {
    mainContent.animate()
            .translationY(0)
            .alpha(1)
            .setDuration(HEADER_HIDE_ANIM_DURATION)
            .setInterpolator(new DecelerateInterpolator());
} else {
    mainContent.animate()
            .translationY(-toolbar.getBottom())
            .alpha(0)
            .setDuration(HEADER_HIDE_ANIM_DURATION)
            .setInterpolator(new DecelerateInterpolator());
}
}

It work for me ;)

If you want to move your fragment with your toolbar, you need animate your fragment and not only your bar.

Answer 2

It is better that you show slide up translate animation for both toolbar and your below fragment (together), when user is trying to scroll, such that only toolbar goes out of the view and fragment reaches the top. (within say, 200ms). To do this, translate the whole outer Relative Layout by say some 20% (you can change such that only toolbar goes out of the view) :

Add slide_up.xml in your anim folder :

<?xml version="1.0" encoding="utf-8"?>
<set
   xmlns:android="http://schemas.android.com/apk/res/android">  
   <translate 
    android:fillAfter="false"
    android:fromYDelta="0%" 
    android:toYDelta="-20%" 
    android:duration="200"/>

</set>

Then, when scroll event is triggered, do the following :

 ...
 RelativeLayout rel = (RelativeLayout)findViewById(R.id.mainContent);
 Animation slideUp = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.slide_up);
 rel.startAnimation(slideUp);
 ...

Hope this helps...