How to create a "reveal" effect that's not circular?

Question

Android has a nice reveal animation (called "CircularReveal") that has a circle shape (link here and here) .

I was wondering: is it possible to do it in other shapes too?

For example, reveal a view from top to bottom, in a rectangle shape, as such:

XXX     XXX    XXX
...  => XXX => XXX
...     ...    XXX

A video of how it looks like can be found here.

In the previous way to do it, I've used a customized ObjectAnimator (link here) that changes the layout params (which works, but it's a workaround and it's not quite customizable, and it will probably not work on this case), but I wonder if there's a new way to do it, something easier and more customizable.

Also, is it possible to make this kind of animation work on previous Android versions, and not just Lollipop?

It's just that I've seen "Google Now Launcher"'s search-history appear this way, and I wonder how to make a similar thing.

Answer 1

The only solution I've come up with is to put a view as a second layer (on top of the listView) that is identical to the background, which has a scaled down animation.

so it's like that in the layout XML:

<FrameLayout >
 <ListView/>
 <View/>  
</FrameLayout>

This should work, but it's more of a workaround.

Also, it has some disadvantages:

1. another layer means more overdraw.
2. might be tricky in case you have a complex background.
3. it's probably not as nice to use as a real reveal-animation.

Answer 2

You could create a New Animator like this http://cogitolearning.co.uk/?p=1451 and define your own rectangular animator. Here is a reference link to the GitHub source code posted by the author.

Answer 3

The Google Now search history animation just looks like a simple translate to me. It looks like the top search bar is in front of the history drop down. By animating the views in front (of your view you want to be revealed) to go down, I think you would get the reveal you are looking for. See: https://stackoverflow.com/a/19766034/2832027

Answer 4

Check my project: https://github.com/mageRabbitStudios/coolandroidstuff/tree/master/MyCircularReveal_12_3_19

In there you can create any reveal animations you wish. It will sound complicated but is quite simple. I created custom ImageView where I access the "clipPath" property of its canvas.(The only way I found to change the clip mask of a view, there is simpler solution shown on the third ImageView where I access only clipBounds property of the ImageView and during that it is not neccessary to create custom view) I update the clipPath on every draw which is called only during the animation's execution using AnimatorUpdateListener and using ObjectAnimators and custom Evaluator I manage to create from circle to rectangle reveal animation :)

Convert it to Java if you don't understand Kotlin