Shadows In Compose | Jetpack Compose Tips

ADHITHYA RAMAKUMAR: Users love apps with depth, dimension, and realism.

One of the easiest, yet effective, ways to achieve this is shadows.

For a long time, our mechanisms for rendering shadows were constrained to different elevation levels.

While you can still leverage these presets, they historically lacked a straightforward bot for fine-grained control that you have in popular design tools.

However, our latest Compose APIs now grant us a great level of precision with two new powerful modifiers, drop shadows and inner shadows.

In the next few minutes, we will go beyond rudimentary elevation to construct truly delightful user interfaces, all through shadows.

All right, let's dive in.

[MUSIC PLAYING]

Typically, design specs for shadows revolve around four fundamental parameters.

These include the x and y offsets, the blur radius, the spread, and, of course, the color.

The drop shadow modifier provides an interface for you to control each of these aspects through its shadow parameter.

Let's look at how to use drop shadow. The radius parameter dictates the softness and diffusion of your blur.