Animating view visibility with both fade in and zoom in

Question

I have a RelativeLayout whose width and height are as large as the app window, and its visibility is initially set to View.GONE.

I'd like to show this view when a button is clicked. I'd like fade in and zoom in to be applied simultaneously. The fade in part is easily done using ViewPropertyAnimator. My problem is that I'm clueless as to how the view can be made to appear as if it is expanding to the full size from a smaller size as it fades in.

Is there any built in animation for this? I've done a bit of searching but haven't found anything. Maybe I'm not using the right search keywords or something. Could anybody please help?

Answer 1

• Concatenate the methods of ViewPropertyAnimator,

so the animations will run in parallel. AnimationSet is part of an old api and you should prefer view property animations over it. If you want to use that technique (which is a bit longer to write and less optmized), you can opt for AnimatorSet (Animat-or ...).

Here is a code snippet that solves your problem with view property animations:

view.setVisibility(View.VISIBLE);
view.setAlpha(0.f);
view.setScaleX(0.f);
view.setScaleY(0.f);
view.animate()
    .alpha(1.f)
    .scaleX(1.f).scaleY(1.f)
    .setDuration(300)
    .start();

A good tutorial on view property animations is here.

Answer 2

This can be done using an AnimationSet, adding AlphaAnimation and ScaleAnimation.

AnimationSet animation = new AnimationSet(true);
animation.addAnimation(new AlphaAnimation(0.0F, 1.0F));
animation.addAnimation(new ScaleAnimation(0.8f, 1, 0.8f, 1)); // Change args as desired
animation.setDuration(300);
mView.startAnimation(animation);