Animating content when hiding the action bar / toolbar
I used the code in the Google IO repository: https://github.com/google/iosched/blob/master/android/src/main/java/com/google/samples/apps/iosched/ui/BaseActivity.java
I'm trying to hide the toolbar when scrolling up and it works great, but my problem is that my main content stays fixed when the toolbar animates offscreen.
The code that starts the animation on the R.id.toolbar_actionbar:
view.animate()
.translationY(-view.getBottom())
.alpha(0)
.setDuration(HEADER_HIDE_ANIM_DURATION)
.setInterpolator(new DecelerateInterpolator());
I tried to put the toolbar on a linear line with content but didn't change anything. Only if I set the action bar to visibility = gone does the content move up.
Does anyone know what I should do in order to render the animated content along with the live animation of the toolbar?
Basically the question boils down to this: How can I animate the position of one view and make other views live with it?
Google's IO code seems to just animate the toolbar and the rest of the content animates it, but I can't seem to get that to work.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="@+id/toolbar_actionbar"
layout="@layout/toolbar_actionbar" />
<FrameLayout
android:id="@+id/main_fragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/adsContainer"
android:layout_below="@+id/toolbar_actionbar" />
<LinearLayout
android:id="@+id/adsContainer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#000000"
android:orientation="horizontal" />
</RelativeLayout>
<!-- The navigation drawer -->
<ExpandableListView
android:id="@+id/left_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#111"
android:choiceMode="singleChoice"
android:divider="@android:color/transparent"
android:dividerHeight="0dp" />
</android.support.v4.widget.DrawerLayout>
source to share
This little snippet can be used to animate the height of the view:
public void animateHeight(final View view, int from, int to, int duration) {
ValueAnimator anim = ValueAnimator.ofInt(from, to);
anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
int val = (Integer) valueAnimator.getAnimatedValue();
ViewGroup.LayoutParams layoutParams = view.getLayoutParams();
layoutParams.height = val;
view.setLayoutParams(layoutParams);
}
});
anim.setDuration(duration);
anim.start();
}
The call will look something like this:
View view = findViewById(R.id.view);
// Wait for layout to be drawn before measuring it
view.addOnLayoutChangeListener(new View.OnLayoutChangeListener() {
@Override
public void onLayoutChange(View view, int i, int i2, int i3, int i4, int i5, int i6, int i7, int i8) {
view.removeOnLayoutChangeListener(this);
animateHeight(view, view.getHeight(), 0, 5000);
}
});
source to share
I also had the same problem that the content stayed where it was even after the action bar (appcompat v7 dashboard widget) slides up when the list view is scrolled.
Follow Christer's schema for the activity layout.
It might be a dirty fix, or it might be I messed up my layouts. But still post here for better solutions. So this is it:
The root element My Content (snippet) was like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/main_content_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize" >
............
And my activity layout looked like this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<FrameLayout
android:id="@+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<include
android:id="@+id/toolbar_actionbar"
layout="@layout/action_bar" />
</RelativeLayout>
.........other stuff.........
The dirty fix was to introduce a fake toolbar in the Fragment layout and keep it on top.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/main_content_view"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<View
android:id="@+id/fakeToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentTop="true" />
.............Other elements like ListView/GridView below this........
And the onscroll methods make fakeToolbar visible / invisible along with the actual up / down toolbar:
mToolbar.animate().translationY(0).alpha(1)
.setDuration(HEADER_HIDE_ANIM_DURATION)
.setInterpolator(new DecelerateInterpolator()).withStartAction(new Runnable() {
@Override
public void run() {
fakeToolbar.setVisibility(View.VISIBLE);
}
});
This fix gave a smooth transition to the layout when scrolling.
source to share