AndroidPub
Published in

AndroidPub

Android ViewOverlays — Simple Layering

If you’ve ever needed to create a layered image, you might be tempted to create multiple ImageViews and load each layer into their respective ImageViews. Or you might have tried to do some fancy Bitmap composition using a Canvas.

There is an easier way! ViewOverlay and ViewGroupOverlay! Added in API 18, these two classes make things relatively simple in terms of setting up an overlaid image. I’ll show two examples of static image overlays, but ViewOverlay can also be extremely useful in animating views (see Suneet Agrawal’s post here for a nice example).

Setting Up Our Sandbox

Create a new Android project in Android Studio, match the minimum SDK version to what your app is, or at the very least API 18. We want to isolate what we’re trying to do in a small project so we have greater flexibility to try our approach out and better understand what we’re doing.

I set my main activity up to have an ImageView and two buttons to toggle between the video thumbnail and the bookmarked item.

I added the following drawables to my project:

Bookmark Drawable

Don’t forget to add vectorDrawables.useSupportLibrary = true to your app module’s gradle file.

Example: Video Thumbnail

Add some code to populate the target ImageView with the video thumbnail resource. When you press the button you should be able to see it.

The next step we need to take is creating the LayerDrawable for the overlay. We can create a new ImageView and populate it with our resource, but that’s not what we’re trying to do!

  • Create a new Drawable Resource file, name it “ic_play_layered.xml”
  • Change the root element from selector to layer-list
  • I’d add two drawables, the first is a color drawable that is partially transparent to make the play button pop. The second is the play button:
  • Create a function to add the overlay drawable onto the ImageView in MainActivity
  • Call this overlayImage function in the button press and pass in the ic_play_layered resId

Note: You can adjust the Rect declaration to pull from whatever width and height you’d like

The end result; fine tuning the sizing & padding on the button exempt

Example: Bookmarked Item

Okay; so a video thumbnail isn’t too bad, but what if I don’t want something overlaying the whole image? Well, there’s a solution for that too!

  • Create a new Drawable Resource. Call this one “ic_bookmark_layered.xml”
  • We’re going to set the padding and gravity on the item we add to the layer list.
  • To fix the issue of drawables floating off the images, I adjusted my ImageView to be wrapContent for width & height as opposed to a fixed 300dp x 300dp. If you don’t have this issue, don’t worry about it!
  • Call the addOverlay function with R.drawable.ic_bookmark_layered as the resId.

Your end result should look something like this due to the padding:

Conclusion:

Using layer drawables can help reduce the complexity of overlaying two images significantly, and utilizes functionality already provided by Android.

I’m providing two rough examples, but feel free to reach out with questions or comments. I’m happy to help if I can!

--

--

The (retired) Pub(lication) for Android & Tech, focused on Development

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store