CODEWITHSUNDEEP
androiduser-interfaceandroid-layoutandroid-animationlayouttransition
API Why
API Why

Reputation: 41

Can I change the behavior of Android's LayoutTransition to eliminate the fade but keep the height animation?

It's easy to add layout transitions with this attribute:

android:animateLayoutChanges="true"

However, the animation you get does not create a pleasing user experience. When elements are added to the layout (I'm using a simple vertical LinearLayout) or change from gone to visible there's a 2-stage process that I think is rather annoying. First, room is prepared for the new element (everything else is pushed down). Then when there's enough room, the new view fades into existence. Likewise, when a view is removed or changes from visible to gone, first it fades out, then the room claimed by it gradually shrinks to zero.

I would really like a way to change the animation to what I really think is the natural way to do it: When adding a view its height gradually changes from zero to its full size, so that first you see just the top, without ever changing the alpha. When removing a view its height gradually changes to its full size to zero, so that near the end of the animation you see just the top, without ever changing the alpha.

How can I accomplish this in Android? (Note: the user can tap on several buttons together and cause several elements to appear / disappear in quick succession, before the animation for the other views ended - or even make something appear while it's still appearing).

Another question that this is perhaps not the place to ask: why isn't this the default?

(And if it's possible, can a slightly different behavior be specified in which first just the bottom of the view appears, rather than the top, like the new view slides down from under the one above it?)

Upvotes: 4

Views: 2223

Answers (1)

user39950
user39950

Reputation: 473

You have to write your own animator and set it. Code:

 final ViewGroup profileParent = (ViewGroup) view.findViewById(R.id.profileParent);
    LayoutTransition transition = new LayoutTransition();
    Animator appearingAnimation = ObjectAnimator.ofFloat(null, "translationY", 600/*profileParent.getHeight()*/, 0);
    appearingAnimation.addListener(new AnimatorListenerAdapter() {
        public void onAnimationEnd(Animator anim) {
            View view = (View) ((ObjectAnimator) anim).getTarget();
            view.setTranslationY(0f);
        }
    });
    Animator disappearingAnimation = ObjectAnimator.ofFloat(null, "translationY", 0, 600/*profileParent.getHeight()*/);
    appearingAnimation.addListener(new AnimatorListenerAdapter() {
        public void onAnimationEnd(Animator anim) {
            View view = (View) ((ObjectAnimator) anim).getTarget();
            view.setTranslationY(0f);
        }
    });
    transition.setAnimator(LayoutTransition.APPEARING, appearingAnimation);
    transition.setDuration(LayoutTransition.APPEARING, 300);
    transition.setStartDelay(LayoutTransition.APPEARING, 0);

    transition.setAnimator(LayoutTransition.DISAPPEARING, disappearingAnimation);
    transition.setDuration(LayoutTransition.DISAPPEARING, 300);
    transition.setStartDelay(LayoutTransition.DISAPPEARING, 0);

    profileParent.setLayoutTransition(transition);

Upvotes: 2

Related Questions