ViewOverlay in Android

What is an Overlay?

An overlay is an extra layer that sits on top of a View (the “host view”) which is drawn after all other content in that view (including children if the view is a ViewGroup). Interaction with the overlay layer is done by adding and removing drawables. This class was added in API 18.

What is the use of ViewOverlay?

Overlay adds an extra layer on Z-axis on top of existing view to the adding view. This is used to show the added drawable on top of existing one with higher priority or positive value on the z-axis.

Let’s consider an example of folding and opening a paper.

Fourfold animation

In order to achieve this animation, we will add four views of same dimensions and apply rotate animation with different pivots on those views one after another.

We have already added four views using LinearLayout (which will be simpler in our case) and assigned them different background colors.
For a better explanation, will name the first square in the folding animation which is marked as red color as the first square, the green one as second square, the blue as third and grey as the fourth square.

Now in order to fold the third and fourth squares in the first pass, we have written the animation code below in res/animator/bottom_close_up.xml.

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:ordering="together">
    <objectAnimator
        android:propertyName="rotationX"
        android:valueFrom="0"
        android:valueTo="180"
        android:valueType="floatType" />
    <objectAnimator
        android:propertyName="alpha"
        android:valueFrom="@dimen/fourfold_from_alpha"
        android:valueTo="@dimen/fourfold_to_alpha"
        android:valueType="floatType" />
</set>

and apply the same using AnimatorSet object to the third and fourth squares.

 val animatorSet = AnimatorInflater.loadAnimator(context,
                     R.animator.bottom_close_up) as AnimatorSet
 animatorSet!!.setTarget(thirdSquare)
 animatorSet!!.duration = animationDuration.toLong()
 animatorSet!!.interpolator = interpolator
 animatorSet!!.start()

When we apply the same to third and fourth squares and run the application, it looks like below.

Animating third and fourth squares

This is not what we expected right.

No !!!

Ok, let’s try to understand the code and the situation.
The first thing we did was added all four views or squares with different backgrounds in the same plane or the z-axis. Perfect!
The next moment we try to animate the third and fourth squares which work well but not as expected because they were in the same plane on z-axis but in actual animation, we were expecting them to rotate above the first and second squares.

So what we are missing?
Yes, you guess it right. An elevation on Z-axis for third and fourth squares while the first pass which can give them a feel of rotating above first-second squares and rest of the view.

Let’s give it a try with ViewOverlay and run it.

this.overlay.add(thirdSquare)
this.overlay.add(forthSquare)

animation with overlay

Isn’t it what we were expecting.

Exactly !

So what difference does overlay made?
It added an extra layer on the z-axis and added third and fourth squares on that axis which gives us a proper feeling of rotating third and fourth squares on top of first and second squares.
Similar way we can add each and every square separately to the overlay when we want them to rotate over other views.

But wait

Few things one should always keep in mind while using overlays.

• The bounds of the drawable should be relative to the host view.
• Any drawable added to the overlay should be removed when it is no longer needed or no longer visible.
• Adding an already existing Drawable is a no-op.
• Passing null parameter will result in an IllegalArgumentException being thrown.

You can also read about ViewGroupOverlay which works the same but for a view group here.

And we are done.

So give it a try and complete the above animation. If you feel stuck, you can get the complete source code for the above animation here.

Source: Android Docs