Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change animations used by animateLayoutChanges mechanism?

I have a RecyclerView in which user selects an item. Upon selection certain view becomes visible before the text (see image). I want to animate its appearance.

Graphical representation

animateLayoutChanges property on the item's layout does the job perfectly, except for the animation type for view appearance - it fades in. I want it to scale from 0 to 100% size, I believe it's called 'pop up' animation.

If I disable animateLayoutChanges and use XML animation for that, it works, but the nearby text is no longer animated (it should slide to accomodate space for the view and its margin). It instantly shifts to the right and then animation is played. This is worse with reverse animation, since the text overlaps the view before it has disappeared.

So I need to combine default mechanism and my own animation somehow. What would be the simplest way to accomplish that without delving into custom animations?

like image 760
mrnateriver Avatar asked Feb 03 '16 10:02

mrnateriver


1 Answers

After much digging in the wrong places, found the answer myself. Might help somebody.

animateLayoutChanges property if enabled utilizes an instance of LayoutTransition to do its job in ViewGroup.

So in order to change animations, you can create an instance of LayoutTransition, set Animator for the transition that you need to change and then assign that instance to ViewGroup via setLayoutTransition().

In my case the result is:

Animator scaleDown = ObjectAnimator.ofPropertyValuesHolder((Object)null, PropertyValuesHolder.ofFloat("scaleX", 1, 0), PropertyValuesHolder.ofFloat("scaleY", 1, 0));
scaleDown.setDuration(300);
scaleDown.setInterpolator(new OvershootInterpolator());

Animator scaleUp = ObjectAnimator.ofPropertyValuesHolder((Object)null, PropertyValuesHolder.ofFloat("scaleX", 0, 1), PropertyValuesHolder.ofFloat("scaleY", 0, 1));
scaleUp.setDuration(300);
scaleUp.setStartDelay(300);
scaleUp.setInterpolator(new OvershootInterpolator());

LayoutTransition itemLayoutTransition = new LayoutTransition();
itemLayoutTransition.setAnimator(LayoutTransition.APPEARING, scaleUp);
itemLayoutTransition.setAnimator(LayoutTransition.DISAPPEARING, scaleDown);

ViewGroup av = (ViewGroup)v.findViewById(R.id.animated_layout);
av.setLayoutTransition(itemLayoutTransition);

More info in LayoutTransition reference documentation.

like image 168
mrnateriver Avatar answered Oct 03 '22 07:10

mrnateriver