ViewOverlay y animaciones en Android
Lo sentimos, este post sólo está disponible en inglés.
ViewOverlay is a class that we can find in Android since its version 4.3 (API version 18) that provides a transparent layer on top of a View, to which you can add visual content and that does not affect the layout hierarchy.
It always has the same size and position as its host view, allowing you to add content over that view.
Oh, and how does it work?
You just have to call the getOverlay() method from any View of your app to get its ViewOverlay, or a ViewGroupOverlay if you are calling this method from some ViewGroup object, but both of them uses the same concept.
ViewOverlay API is so simple, aside from add(Drawable drawable), we can also find clear() and remove(Drawable drawable). These are the only methods that we have to use to handle the views that we move to our ViewOverlays.
Ok, but why should I use ViewOverlay?
Well, for now everything that I came up to my mind to do with this new API can be done using RelativeLayout and a bit of tricky & ugly code. But this lets us to do that things in a friendly way.
Essentially, this component is visual-only, so views attached to a ViewOverlay will not respond to any touch or tap event. ViewOverlay mechanism was conceived to be used combined with stuff like animations.
Using ViewOverlays we can animate views through other layouts in view hierarchy, even if they are not any of its parents.
- This is only for API 18+, although we hope it will be backported at some support library in the near future.
- Right now, there is not a single example.
We can not do anything to solve the first point, but today we have been playing with this new stuff to try to understand how it works. So…
We have coded a simple app with just one Activity and a simple XML that has one top-level LinearLayout and 3 inner FrameLayout, with one Button inside each of them. This is how it works.
When we press the button, it’s moved to its parent-parent layout (the main, first-level, layout) ViewGroupOverlay, so the button can be moved along all the screen, as the animation does.
In this case, we don’t have used ViewOverlay technique. So, it’s the default behavior when we perform an animation that want to go further than its container’s size.
Finally, in this example we combine the two types of animations. First we do an alpha animation from 1f to 0f, and when it finishes, the button is added to a non-parent ViewOverlay (the orange layout), and the second animation starts through the orange section.
You can download and check our project from right here.
That’s all folks, enjoy!