Android Image animation. Picture reveal from top to bottom

Question

I want to display an image, but this image will reveal itself from top to bottom slowly. You can imagine that if this image is a text, then this text will be revealed line by line. And each line is revealed by the fade effect. Is there anyway to do this ? I don't even know which term should I search for.

Answer 1

There is one way I know to do that and it is just simple and it's by using the class called TransitionManager .

Here's a simple code you can put on your onCreate and test it.

    final ImageView image = new ImageView(this);
        image.setImageResource(R.mipmap.ic_launcher);

    // Set the initial position of the image
    RelativeLayout.LayoutParams imageDetails = new RelativeLayout.LayoutParams(
            RelativeLayout.LayoutParams.WRAP_CONTENT,
            RelativeLayout.LayoutParams.WRAP_CONTENT
    );
    imageDetails.addRule(RelativeLayout.CENTER_HORIZONTAL, RelativeLayout.TRUE);
    imageDetails.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM, RelativeLayout.TRUE);

    final ViewGroup layout = (ViewGroup)findViewById(R.id.mainLayout);
    layout.setOnTouchListener(new ViewGroup.OnTouchListener()
    {
        @Override
        public boolean onTouch(View v, MotionEvent event)
        {
            // Use the default transition of TransitionManager
            TransitionManager.beginDelayedTransition(layout);

            // Set the final position of the image
            RelativeLayout.LayoutParams imageDetails = new RelativeLayout.LayoutParams(
                    RelativeLayout.LayoutParams.WRAP_CONTENT,
                    RelativeLayout.LayoutParams.WRAP_CONTENT
            );
            imageDetails.addRule(RelativeLayout.CENTER_HORIZONTAL, RelativeLayout.TRUE);
            imageDetails.addRule(RelativeLayout.ALIGN_PARENT_TOP, RelativeLayout.TRUE);
            image.setLayoutParams(imageDetails);

            return true;
        }
    });

    layout.addView(image, imageDetails);

There is one disadvantage that I know when using this approach. The minimum SDK version should be 19.

PS: If you want more control on the transitions or animations you make. Just read further on animations and transitions on Android.

Answer 2

OK, if you want to move the view from top to down, you could just use an animator to animate that. If you want to Reveal the image from top to bottom, then you can do that with a trick. Have an image view and load your image in it. Now have another view on top of it. All you have to is animate the height of that view until, the top coincides with the bottom. You will have your reveal animation.

If you want to create the reveal with fade effect, then you can mask the view on top and animate the mask. I used this in the past to create the circular reveal. For the mask view take a look at this : https://github.com/christophesmet/android_maskable_layout