Animate ViewPager to fill screen in Android

Question

So I have a view which looks like this:

enter image description here

What I am trying to achieve is for the entire view to shift up to hide the big image up top when the user scrolls down on the GridView. Basically, if they want to see more of the gridview, the layout scrolls up to increase the gridview size.

However when I actually do this, here is what happens:

enter image description here

It works fine, except the GridView doesn't increase in size to fill the new space in the screen, so the lower portion of the window there is all white as you can see.

Here is how I am doing what I have so far:

private void hideHeader(boolean animate) {
    if(animate) {
        AnimatorSet set = new AnimatorSet();
        set.playTogether(
                ObjectAnimator.ofFloat(mImageHeader, "translationY", -mImageHeader.getHeight()),
                ObjectAnimator.ofFloat(mShareButton, "translationY", -mImageHeader.getHeight()),
                ObjectAnimator.ofFloat(mIndicator, "translationY", -mImageHeader.getHeight()),
                ObjectAnimator.ofFloat(mViewPager, "translationY", -mImageHeader.getHeight())
        );

        set.setDuration(700l);
        set.start();
    }
    else {
        //TODO finish
    }
}

As you can probably tell from the code, I'm using a ViewPager. In this case, the GridView is actually a fragment, which is where I first thought my problem was coming from. However, its not the case that the ViewPager is filling the screen and the fragment inside of it is not, rather the ViewPager itself is what is not filling down vertically:

enter image description here

Here is the XML of the parent fragment (which contains the big image, Share button, and viewpager + indicator):

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:orientation="vertical"
                android:background="@android:color/white"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

    <include android:id="@+id/fp_abf"
             layout="@layout/action_bar_footer"/>

    <include android:id="@+id/fp_image_header"
             layout="@layout/widget_image_header"
             android:layout_below="@id/fp_abf"/>

    <TextView android:id="@+id/fp_share_button"
              android:layout_width="match_parent"
              android:layout_height="60dp"
              android:layout_below="@id/fp_image_header"
              android:gravity="center"
              android:background="@drawable/selectable_action_button_grey_to_bit_green"
              android:textSize="14dp"
              android:textColor="@android:color/white"
              android:text="@string/share_caps"/>

    <com.viewpagerindicator.TabPageIndicator android:id="@+id/fp_indicator"
                                             android:layout_width="match_parent"
                                             android:layout_height="wrap_content"
                                             android:layout_below="@+id/fp_share_button"
                                             android:background="@color/header_background"/>

    <android.support.v4.view.ViewPager android:id="@+id/fp_pager"
                                       android:layout_width="match_parent"
                                       android:layout_height="match_parent"
                                       android:layout_below="@id/fp_indicator"/>

</RelativeLayout>

I originally had this as a LinearLayout, but tried to switch it to Relative to see if that would make any difference (it didn't).

As you can see, the ViewPager has a layout_height of "match_parent", which I thought would be sufficient for it to fill all of the space it has available. I think what is happening is that the view isn't being notified that it has more space to work with and therefore redrawing its bounds, but I'm not sure how to trigger that myself.

Does anyone know how to do that (or a better method for me to achieve what I want)? Thanks for reading.

Your method isn't bad, but what you might want to do is write a custom Animator to handle LayoutParams, changing the height of the Views and not their position. In this way, the big image goes from it's current height to 0, and the ViewPager from it's current height to that + the height of the big image. It might be necessary to call a relayout during the animation as well. — Tom, Jan 09 '14 at 00:38
@Tom I thought about using the scaleY function on the ViewPager, but the problem is that like stretches the view rather than increasing its bounds. I also tried doing viewPager.invalidate() after the animation completes, but that didn't work either. — JMRboosties, Jan 09 '14 at 01:18
I wasn't referring to `scaleY`, I meant a custom Animator that actually modified the `LayoutParams.height` property. Check this out: http://stackoverflow.com/questions/7902976/objectanimator-animate-linearlayout-width — Tom, Jan 10 '14 at 17:51

score 0 · Accepted Answer · answered Jan 30 '14 at 21:49

I figured it out. There are two things that need to be done:

1) Add a method which manually resets the layout params of the ViewPager to the exact height you want. Once you have the method, call it in the animation's listener's onAnimationStart method .This looks something like this for me:

private void hideAnimationStart() {
    int containerHeight = mContainer.getHeight();
    int shareHeight = mShareButton.getHeight();
    int indicatorHeight = mIndicator.getHeight();

    int newHeight = containerHeight - (shareHeight + indicatorHeight);

    LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) mViewPager.getLayoutParams();
    params.height = newHeight;

    mViewPager.setLayoutParams(params);
}

Basically measuring the space I want it to take up.

2) You also need to change the layout parent type to LinearLayout instead of RelativeLayout. I don't know why only Linear works, but that seems to be the case.

I'll also include the method I used to revert the view back to its original state. In this case, call this method in the animation set's listener's onAnimationEnd:

private void showAnimationEnd() {
    int containerHeight = mContainer.getHeight();
    int shareHeight = mShareButton.getHeight();
    int indicatorHeight = mIndicator.getHeight();
    int imageHeight = mImageHeader.getHeight();

    int newHeight = containerHeight - (shareHeight + indicatorHeight + imageHeight);

    LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) mViewPager.getLayoutParams();
    params.height = newHeight;

    mViewPager.setLayoutParams(params);
}

Animate ViewPager to fill screen in Android

1 Answers1