Shadows In Compose | Jetpack Compose Tips

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

ADHITHYA RAMAKUMAR: A los usuarios les encantan las apps con profundidad, dimensión y realismo.

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

Una de las formas más fáciles pero efectivas de lograr esto son las sombras.

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

Durante mucho tiempo, nuestros mecanismos para renderizar sombras estaban limitados a diferentes niveles de elevación.

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

Aunque todavía puedes aprovechar estos preajustes, históricamente carecían de una forma directa para un control preciso como el que tienes en herramientas de diseño populares.

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

Sin embargo, nuestras últimas APIs de Compose ahora nos dan un gran nivel de precisión con dos nuevos y potentes modificadores: sombras externas y sombras internas.

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

En los próximos minutos, iremos más allá de la elevación rudimentaria para construir interfaces de usuario verdaderamente encantadoras, todo a través de sombras.

All right, let's dive in.

Muy bien, vamos a ello.

[MUSIC PLAYING]

[MUSIC PLAYING]

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

Típicamente, las especificaciones de diseño para sombras giran alrededor de cuatro parámetros fundamentales.

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

Estos incluyen los desplazamientos x e y, el radio de desenfoque, la expansión y, por supuesto, el color.

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

El modificador de sombra externa proporciona una interfaz para controlar cada uno de estos aspectos a través de su parámetro de sombra.

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

Veamos cómo usar drop shadow. El parámetro de radio dicta la suavidad y difusión de tu desenfoque.