Search code examples
androidanimationtranslate-animation

Translate animation on views with position dependencies

I am running into an issue where I have a header view that I would like to translate in and out of visibility--using translate animation--that is positioned directly above the main content view. To illustrate what I mean, look at the image below. The blue section is the header, and the orange section is the main content.

enter image description here

Example code

TranslateAnimation animation = new TranslateAnimation(0, 0, 0, -rlInfoBar.getHeight());
        animation.setFillAfter(true);
        animation.setDuration(10000);

        animation.setAnimationListener(new TranslateAnimation.AnimationListener() {

            @Override
            public void onAnimationStart(Animation animation) {
            }

            @Override
            public void onAnimationEnd(Animation animation) {
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });
        rvItems.startAnimation(animation);
        rlInfoBar.startAnimation(animation);

When I translate the blue section, even though the main section is declared "android:layout_below="@+id/" it remains in position. My idea was to then translate them both, however, when doing that the main content is shifted up but the bottom of the screen is also shifted up revealing the background of the parent view. How to solve this issue? Do I have to translate both views plus stretch the main content view or somehow anchor the main content view to the bottom of the screen?

Result of translating both views

enter image description here

Solution

  • Do I have to translate both views plus stretch the main content view or somehow anchor the main content view to the bottom of the screen?

    Well, if you don't stretch the main content View then anchoring it to the bottom will cause a gap to appear at the top as soon as the header View moves up. So I think you'll need a set of animations (scale and translate) for it.

    Or you use the Transition framework, in this case a ChangeBounds transition will do the job for both Views

    View sceneRoot = <someViewGroupContainingBothViews>;
TransitionManager.beginDelayedTransition(sceneRoot, new ChangeBounds());
rlInfoBar.setY(<newY_CoordinateOfHeaderView>);