Skip to content

Shadows

ZieIony edited this page May 7, 2015 · 2 revisions

Views in Material Design are flat, of simple shape, cannot bend or fold. Shadows can be only black, rectangular or oval and work only on flat surfaces. These rules make the shadow casting pretty simple.

Basically a shadow in MD is a blurred, black shape of a view. It means that it's possible to backport shadows using these steps:

  • Take a view.
  • Create an offscreen bitmap. It's size should be a little bigger than the view.
  • Draw the view to that bitmap using LightingColorFilter set to 0,0. It should give you a black shape of that view.
  • Blur the bitmap. Blur's radius should be a function of an elevation of the view. There are many different methods of blurring. Probably the best of them is to use RenderScript and ScriptIntrisincBlur. This also seems to be the method Lollipop is using internally.
  • Draw the blurred bitmap.
  • Draw the view on the bitmap.

This is the method Carbon uses for drawing shadows. There are few things to note:

  • Shadows have to be drawn not by the view, but by it's parent. On older platforms it's impossible to draw outsize view's bounds correctly.
  • Blurring large shapes can be a very heavy task. You have to reuse shadows.
  • Blurring actual views is also pretty demanding. Lollipop blurs shapes, not views. It means that to get a shadow of a rectangular view, you only have to blur a small square and draw it like a 9-path.
  • RenderScript doesn't work on some devices. In such case you have to do that by yourself.
Clone this wiki locally