Rockmaninoff
Rockmaninoff

Reputation: 3573

How can I smoothly translate a View up and off screen using an Animation?

Imagine you have this layout:

___________________________________________
|                                         |
|                                         |
|               TOP CONTENT               |
|                                         |
|_________________________________________|
|                                         |
|                                         |
|                 BOTTOM                  |
|                 CONTENT                 |
|                                         |
|_________________________________________|

I want to slide the top content off of the screen, which I can successfully do using a Translate Animation (defined in XML). I have a listener set up so that at the end of the Animation, TOP CONTENT's visibility is set to View.GONE. My issue is that while the animation is executing, the area that TOP CONTENT takes up remains on the screen. BOTTOM CONTENT does not slide up with it. Basically, for that 500 ms in which the animation is executing, BOTTOM CONTENT stays at its position, then abruptly shifts up once the animation is over.

How can I make it so that BOTTOM CONTENT maintains its layout_below parameter with the bottom edge of TOP CONTENT and smoothly scrolls up with TOP CONTENT? Does this require another Animation to be used on BOTTOM CONTENT?

Thanks for any help!

Upvotes: 3

Views: 2714

Answers (3)

Otieno Rowland
Otieno Rowland

Reputation: 2250

I have a solution that worked for me, and even better uses animations to make it smooth.

private int heightOfScreen;

   @Override
    public void onViewCreated(View view, Bundle savedInstanceState) {
        configureLayoutListener();
    }

private void configureLayoutListener() {
        mNormalModelayoutContainer.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                heightOfScreen = mNormalModelayoutContainer.getHeight();
                ViewTreeObserver viewTreeObserver = mNormalModelayoutContainer.getViewTreeObserver();
                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
                    viewTreeObserver.removeOnGlobalLayoutListener(this);
                } else {
                    viewTreeObserver.removeGlobalOnLayoutListener(this);
                }
            }
        });
    }

    private void animate() {
        View viewToShiftOut = mNormalModelayoutContainer;
        View viewToShiftIn = mEditModelayoutContainer;
        ObjectAnimator outAnim = ObjectAnimator.ofFloat(viewToShiftOut, "y", 0, -heightOfScreen/2);
        ObjectAnimator inAnim = ObjectAnimator.ofFloat(viewToShiftIn, "y", heightOfScreen/2, 0);
        outAnim.setDuration(1000);
        inAnim.setDuration(1000);
        outAnim.start();
        inAnim.start();
    }

This works for a fragment, but can be adapted for about any view or activity. N/B: - Notice how and from where we measure the height - The in and out views move in oppsosite directions but can be made to move in any compass direction.

Upvotes: 0

Codeman
Codeman

Reputation: 12375

Just an idea:

Try playing with makeInAnimation(Context c, boolean fromLeft) and makeOutAnimation(Context c, boolean toRight).

These are originally designed to slide right/left, but you may be able to override them or perform a transformation on the default animations.

Also, make sure you are using an AnimationSet.

This will ensure both animations are played simultaneously.

Hope this helped!

source: http://developer.android.com/reference/android/view/animation/AnimationUtils.html

Upvotes: 2

Wroclai
Wroclai

Reputation: 26925

Does this require another Animation to be used on BOTTOM CONTENT?

That's usually how I do it and it works fine.

Upvotes: 1

Related Questions