2

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.

Community
  • 1
  • 1
android developer
  • 114,585
  • 152
  • 739
  • 1,270
  • `RevealAnimator` is implemented calling native, hidden APIs. Achieving a "similar visual effect" for other shapes might be possible, but probably with different methods. – matiash Jan 05 '15 at 17:51
  • @matiash So the bounty was for nothing? I was hoping there would be a workaround... Or at least something better than what I did before... Is there at least a circle-reveal-animation for previous Android versions? – android developer Jan 05 '15 at 19:44
  • Not that I know of, sorry. Hope to be proved wrong though :) – matiash Jan 06 '15 at 17:59

4 Answers4

4

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.

asethi
  • 146
  • 12
  • Cool ! can you please post a sample code of how to use for the example I've written about (to reveal some view from top to bottom, like a curtain) ? Actually, I remember I saw something that was made by Romain Guy that is similar to this one (here http://www.curious-creature.com/category/android/ ) . Will it work well with ListView ? Do they use the same technique ? – android developer Jan 09 '15 at 08:31
0

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

Community
  • 1
  • 1
TTransmit
  • 3,270
  • 2
  • 28
  • 43
  • So the solution that I've proposed for ImageView (here: http://stackoverflow.com/questions/19519921/how-to-animate-imageview-from-center-crop-to-fill-the-screen-and-vice-versa-fac/19616416#19616416 ) is about the same as they did ? – android developer Jan 08 '15 at 17:49
  • The final result and the underlying strategy is the same but by just using the standard API 1 translate animation it can be achieved in 5-10% of number of lines of codes. – TTransmit Jan 08 '15 at 18:09
  • It doesn't look like translate animation. it reveals a larger and larger area of the recent-items list. Maybe you could show a sample code that demonstrates it? Would even be nicer if you would handle the keyboard showing up, though I already have a solution for that. – android developer Jan 08 '15 at 18:38
  • I wanted to check we are talking about the same animation. You can see it at 0:14 in this video http://youtu.be/ma-DGvCajWM?t=14s . If it is the same it just looks like it translates down behind a Linear Layout with a grey background on which the EditText for searching is present. – TTransmit Jan 08 '15 at 19:09
  • No, this is not the same. Maybe it's because I try it Lollipop, or you have an old version of the app. It occurs also on "Google Now" (not the launcher) when starting to type something. – android developer Jan 08 '15 at 19:34
  • Yes, that's it. I've written a possible solution now, but I don't think that this is what Google does. – android developer Jan 08 '15 at 20:07
0

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.
android developer
  • 114,585
  • 152
  • 739
  • 1,270
  • I think that is how its done. Unless they have a new animator to do it. In the older version, they the background picture swipes out before the new version swipes in to avoid the need to overdraw. They may also be animating the height of the ListView using a Transformation to avoid overdraw. Because it is a list it can be scrolled to the bottom and should reveal like that as the height increases. – TTransmit Jan 08 '15 at 20:25
  • It's either that, or they made a really customized view. I don't think that if they use the solution I've written, they use 2 animations. one is enough, and after it's done they can remove the masking view (or let it stay for when they need to reverse it. – android developer Jan 08 '15 at 21:02
  • Google are a huge company, Now is a major app and this is a very visible animation. They could easily afford to have someone spend a few hours writing a custom animator and then spend the rest of the week optimising it. Knowing how seriously these companies take design they probably had a team of developers and designers trying out hundreds of slight variations over months. Also, another way to avoid drawing the background twice would be to have the views for each row of the list become visible only once they pass the bottom of the search box. – TTransmit Jan 08 '15 at 21:30
  • Actually, now that I think about it, here's a sample that might be useful: http://www.curious-creature.com/2012/12/13/android-recipe-2-fun-with-shaders/ . Maybe with some work, this could be useful on this case too. – android developer Jan 09 '15 at 08:30
0

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

Stanislav Kinzl
  • 370
  • 4
  • 6
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. [Read this](https://stackoverflow.com/help/how-to-answer). – Shanteshwar Inde Mar 12 '19 at 10:38