Android toolbar show / hide empty space

Question

I am trying to hide or show the toolbar when the user scrolls the list. For this, I use translation, but instead of my actionBar, empty space appears. If I use setVisibility (View.GONE), the empty space will appear during the animation and hide when it is done, which is ugly.

Here is a short video about my problem

And here is how I do my animation (from a Google I / O application):

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 to animate your container, not the toolbar.

Try the following:

 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()); } } 

This works for me;)

If you want to move a fragment using the toolbar, you need to animate your fragment, not just your panel.

Answer 2

It’s better that you show the slide animation animation for both toolbars and your fragment below (together) when the user tries to scroll, so that only the toolbar leaves the view and the fragment reaches the top. (within, say, 200 ms). To do this, translate the entire external relative layout, say, by about 20% (you can change it so that only the toolbar leaves the view):

Add slide_up.xml to the folder with your file:

 <?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 the scroll event fires, 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 ...