Shadows In Compose | Jetpack Compose Tips

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

ADHITHYA RAMAKUMAR: Os usuários adoram aplicativos com profundidade, dimensão e realismo.

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

Uma das maneiras mais fáceis e eficazes de conseguir isso são as sombras.

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

Por muito tempo, nossos mecanismos de renderização de sombras eram limitados a diferentes níveis de elevação.

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

Embora você ainda possa aproveitar essas predefinições, elas historicamente careciam de uma maneira direta para controle granular que você tem em ferramentas de design populares.

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

No entanto, nossas mais recentes APIs Compose agora nos concedem um grande nível de precisão com dois novos modificadores poderosos, sombras projetadas e sombras internas.

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

Nos próximos minutos, iremos além da elevação rudimentar para construir interfaces de usuário verdadeiramente agradáveis, tudo através de sombras.

All right, let's dive in.

Tudo bem, vamos lá.

[MUSIC PLAYING]

[MÚSICA TOCANDO]

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

Normalmente, as especificações de design para sombras giram em torno de quatro parâmetros fundamentais.

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

Estes incluem os deslocamentos x e y, o raio de desfoque, o espalhamento e, claro, a cor.

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

O modificador de sombra projetada fornece uma interface para você controlar cada um desses aspectos através do seu parâmetro de sombra.

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

Vamos ver como usar a sombra projetada. O parâmetro de raio dita a suavidade e a difusão do seu desfoque.