Lollipop’s shadows on Gingerbread

Material Design introduced the elevation concept. Views can now have depth and cast animated shadows rendered by the framework. Sadly these features work only on Android 5.0, even with the compatibility library.

Android Lollipop comes with a new rendering thread. I would guess that it’s used for preparing and rendering shadows. The compatibility library doesn’t port the thread as it’s a rather integral part of the UI framework.

But don’t worry, not everything is lost. We can code our own shadows. Here’s how it works:

  • Take a view with a non-zero elevation value
  • Fill the shape of the view with black and draw it on an off-screen bitmap
  • Blur the bitmap (use Render Script)
  • Draw the bitmap
  • Draw the view

As you can see, it’s pretty easy and self-explanatory. The only difficult part is the Render Script (setting up, writing the shader, and invoking the code). To make things easier you can use the built-in blur shader as I did for demo purposes.

Another thing to consider is a place for the drawing code. You cannot draw the view’s shadow in the view itself, because the drawing framework will clip it out. I’m drawing shadows right before the dispatchDraw call in each layout.

5 responses to “Lollipop’s shadows on Gingerbread

  1. Vivek January 22, 2015 at 9:57 am

    you could give the code you know

    Like

  2. Anonymous January 26, 2015 at 1:20 pm

    cool, but code is needed, please attach a link to github

    Like

  3. Jorge Díaz December 23, 2015 at 5:11 pm

    ok! but the code?

    Like

  4. Pingback: Appcompat v21 Toolbar elevation pre-lollipop

Leave a comment