Linear animation demonstration

ViewOverlay and animations in Android

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!

7 Comments
  • Dave Smith

    August 20, 2013 at 5:25 pm Reply

    Your example demonstrates very well the primary use for ViewGroupOverlay (temporarily adding views to another parent for easy animation), but I did want to make something clear.

    The following statement: “Once you got it, you can add any View or Drawable that you want to show in this overlay” is not quite true.

    In the case of Views, you cannot construct and arbitrary View in code and place it in an overlay as a new addition. You can only add views that have been previously measured and laid out in the existing view hierarchy (though again, your example that the container is not required to be a parent is also a good one).

    It is also important to note that adding a View to ViewGroupOverlay removes it from its current layout container. With your example using FrameLayout this is not a problem, but if the view were in a container like a LinearLayout, this forces a re-layout of the container as if that view is no longer there, which is often visually jarring and not the experience we want. All that to say that ViewGroupOverlay can’t wholesale replace the way some view animations need be coded.

    • Arun

      September 20, 2013 at 6:33 am Reply

      Thanks for that extra bit of insight!

  • Grantland Chew

    August 20, 2013 at 8:26 pm Reply

    Great overview of ViewOverlays! I was wondering, what did you use to create gif animations of the emulator?

  • Android动画设计之ViewOverlay

    August 22, 2013 at 2:38 am Reply

    […] 参照文章:http://www.lafosca.cat/viewoverlay-in-android/ […]

  • rexi1r

    June 3, 2014 at 1:32 pm Reply

    hello how can i use ViewOverlay in older version of android like 4.2.2?

    • Ignasi Busquets

      June 3, 2014 at 2:17 pm Reply

      Hi, I think there’s no way to use it before 4.3 🙁

  • rexi1r

    June 3, 2014 at 5:56 pm Reply

    A lot of people in the world use versions before 4.3 and we have to make apps for all versions.

Post a Comment