Android: How to expand and shrink a view diagonall

Question

I am trying to animate a view which expands and shrinks back to the initial size. I tried using animation set to add two animations so that the second animation will start after the first animation but was not able to get it working.

AnimationSet expandAndShrink = new AnimationSet(true);
ScaleAnimation expand = new ScaleAnimation(
     1f, 1.5f, 
     1f, 1.5f,
     Animation.RELATIVE_TO_PARENT, 0,
     Animation.RELATIVE_TO_PARENT, 0);

ScaleAnimation shrink = new ScaleAnimation(
     1.5f, 1f, 
     1.5f, 1f,
     Animation.RELATIVE_TO_PARENT, 1f,
     Animation.RELATIVE_TO_PARENT, 1f);

expandAndShrink.addAnimation(expand);
expandAndShrink.addAnimation(shrink)
expandAndShrink.setFillAfter(true);
expandAndShrink.setDuration(1000);
expandAndShrink.setInterpolator(new AccelerateInterpolator(1.0f));

view.bringToFront();
view.startAnimation(expandAndShrink);

I really appreciate any help to get it working. Thanks in advance

Answer 1

I have fixed "expand" and "shrink" animations, and added durations for both. Also you should add shrink.setStartOffset(1000); so second animation starts later

    AnimationSet expandAndShrink = new AnimationSet(true);
    ScaleAnimation expand = new ScaleAnimation(
         1f, 1.5f, 
         1f, 1.5f,
         Animation.RELATIVE_TO_PARENT, 0,
         Animation.RELATIVE_TO_PARENT, 0);
    expand.setDuration(1000);

    ScaleAnimation shrink = new ScaleAnimation(
         1.5f, 1f, 
         1.5f, 1f,
         Animation.RELATIVE_TO_PARENT, 0f,
         Animation.RELATIVE_TO_PARENT, 0f);
    shrink.setStartOffset(1000);
    shrink.setDuration(1000);

    expandAndShrink.addAnimation(expand);
    expandAndShrink.addAnimation(shrink);
    expandAndShrink.setFillAfter(true);
    expandAndShrink.setInterpolator(new AccelerateInterpolator(1.0f));

    view.startAnimation(expandAndShrink);

Answer 2

I'll explain the way I chose to animate layout changes.

Android has a special Animation class named ScaleAnimation where we can smoothly expand or collapse views.

Show view by expanding diagonally:

ScaleAnimation expanding = new ScaleAnimation(
   0, 1.0f,
   0, 1.0f,
Animation.RELATIVE_TO_PARENT, 0,
Animation.RELATIVE_TO_PARENT, 0);
expanding.setDuration(250);

view.startAnimation(expanding)

where the constructor used is:

ScaleAnimation(float fromX, float toX, float fromY, float toY, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)

So you can change values accordingly.

For example, the below example would animate view horizontally:

ScaleAnimation expanding = new ScaleAnimation(
   0, 1.1f,
   1f, 1f,
   Animation.RELATIVE_TO_PARENT, 0,
   Animation.RELATIVE_TO_PARENT, 0);
expanding.setDuration(250);

You can change fromX,toX, fromY & toY according to the need.

For example if view is shown and you have to just expand it, put fromX and fromY to 1.0f, and toX, toY according to the need.

Now, using the same class you can create a more cool effect for showing view by expanding view a little bit extra and then shrinking it to original size. For this purpose, AnimationSet will be used. So it would create a kind of bubble effect.

Below example is for creating bubble effect for showing the view:

AnimationSet expandThenShrink = new AnimationSet(true);

ScaleAnimation expanding = new ScaleAnimation(
   0, 1.1f,
   0, 1.1f,
Animation.RELATIVE_TO_PARENT, 0,
Animation.RELATIVE_TO_PARENT, 0);
expanding.setDuration(250);

ScaleAnimation shrinking = new ScaleAnimation(
   1.1f, 1f,
   1.1f, 1f,
Animation.RELATIVE_TO_PARENT, 0,
Animation.RELATIVE_TO_PARENT, 0);
shrinking.setStartOffset(250);
shrinking.setDuration(120);

expandThenShrink.addAnimation(expanding);
expandThenShrink.addAnimation(shrinking);
expandThenShrink.setFillAfter(true);
expandThenShrink.setInterpolator(new AccelerateInterpolator(1.0f));

view.startAnimation(expandThenShrink);