Linear animation demonstration

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.

Once you got it, you can add any View or Drawable that you want to show in this overlay calling add(Drawable drawable) method on ViewOverlay, or add(View view) on ViewGroupOverlay.

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.

So when some of these animations ends, we should have to call clear() or remove(Drawable drawable) methods, to remove the view from our ViewOverlay to keep it clean and avoid memory leaks.

Sounds cool!

Yeah, but…

  • 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…

Let’s see

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.

vo-all

Red section

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.

vo1

Orange section

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.

vo2

Green section

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.

vo3

You can download and check our project from right here.
That’s all folks, enjoy!

No Comments

Post a Comment