Shadows In Compose | Jetpack Compose Tips
Learning Stats
مستوى CEFR
Total Words
Unique Words
Difficulty
الترجمة (130 segments)
DownloadADHITHYA 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.
Spread controls the expansion or contraction
of the shadow's geometry.
Color allows you to define the shadow's tint.
And offset precisely positions the shadow's geometry
along the x and y-axes.
The shape parameter helps define the shadow's overall contour.
This can be a standard rounded corner shape,
as seen in this example, or it can
use any geometry, such as the distinctive cookie
nine-sided shape, introduced with our recent material
expressive APIs.
Now, to create the inverse effect,
you can use inner shadow.
This creates the illusion that an element
is recessed or pressed into the underlying surface.
It is crucial to remember the rendering order.
You must first draw your background content
and then apply the inner shadow modifier
to achieve the desired concave appearance.
The true potential of these modifiers
is unlocked when you realize they can be layered.
Instead of a single shadow, you can compose multiple shadows
sequentially, each with distinct colors, blurs, and offsets.
This technique enables a vast spectrum of effects,
from subtle highlights to the vibrant, colorful glows seen
here.
To begin with, we apply the first layer of our drop shadow.
Next, we chain a second drop shadow layer on top of it
with slightly different offsets.
Then we apply the background color to the component.
And finally, we apply the inner shadow modifiers.
This deliberate chaining of drop and inner shadows
is what produces the depth effect we are aiming for.
While static shadows are effective,
dynamic shadows are way more exciting.
By integrating our shadow properties
with Compose's animation APIs, we
can make our UI respond directly to user interaction.
So when a user presses a button, the shadow
can change to provide instantaneous feedback.
To achieve this effect, we first define an outer box
and attach a clickable modifier to it.
We then declare the start and end states
for the various parameters we intend to animate.
To ensure all animations are perfectly synchronized,
we leverage updateTransition and provide it
with a desired target state.
Here, we define our buttonPressAnimation
specification, which will control the timing
and easing of the transition.
With the different parameters now applied,
we can see this fluid animation.
We have successfully evolved a static component
into an interactive one that uses animated shadows to produce
a convincing pressed effect.
Once you are comfortable with these core techniques,
you can combine them to realize popular design trends, including
realistic lighting, neomorphism, and neobrutalism.
Let's explore a few.
Beginning with emulating realistic lighting.
To achieve an effect like this, we
must consider how light behaves in the physical world.
You typically observe a crisp, direct shadow
cast by a primary light source, as well as a softer,
more diffuse ambient shadow.
We can replicate this by stacking multiple drop shadow
and inner shadow instances with varied properties.
First, we apply two chain drop shadow modifiers
with distinct properties followed by a background
modifier.
And to conclude, we apply chained inner shadow modifiers
to forge the metallic rim effect around the component's edge.
With these new modifiers, neomorphism
becomes entirely achievable.
This trend is characterized by a soft, extruded appearance
that seems to emerge organically from the background.
This technique hinges on an element
that shares the same color as its background and then applying
two faint opposing shadows--
a light one from one corner and a dark one from the opposite.
Conversely, the neobrutalist style
champions high contrast, blocky layouts,
standout color palettes, and thick, assertive borders.
To capture this effect, use a drop shadow
with zero blur and a hard distinct offset.
And you might be wondering about gradient shadows.
Yes, that's possible too.
Your shadows are not confined to solid colors.
The shadow API accepts a brush, which allows
you to create gradient shadows.
We have covered the basic mechanisms
of drop shadow and inner shadow, learned how to layer and animate
them.
When you combine these elements, you can create stunning effects
from a breathing, glowing aura to a fully
interactive and expressive user interface.
I encourage you to experiment with these modifiers
in your own projects.
You can find the complete source code for all of today's examples
at the link provided in the description.
Thanks for watching.
Happy composing!
[MUSIC PLAYING]
Key Vocabulary (50)
toward
"Go to school."
belonging
"Cup of tea."
also
"You and me."
inside
"In the house."
specific
"That book."
A third-person singular pronoun used to refer to an object, animal, or situation that has already been mentioned or is clear from context. It is also frequently used as a dummy subject to talk about time, weather, or distance.
Used to show who is intended to have or use something, or to explain the purpose or reason for an action. It is also frequently used to indicate a specific duration of time.
A preposition used to indicate that people or things are together, in the same place, or performing an action together. It can also describe the instrument used to perform an action or a characteristic that someone or something has.
A conjunction used to compare two things that are equal in some way. It is most commonly used in the pattern 'as + adjective/adverb + as' to show similarity.
Used to refer to the person or people that the speaker is addressing. It is the second-person pronoun used for both singular and plural subjects and objects.
Used to identify a specific person, thing, or idea that is physically close to the speaker or has just been mentioned. It can also refer to the present time or a situation that is currently happening.
A preposition used to show the method or means of doing something, or to identify the person or thing that performs an action. It frequently appears in passive sentences to indicate the agent or before modes of transport.
Used to indicate the starting point, source, or origin of something. It can describe a physical location, a point in time, or the person who sent or gave an item.
The word 'we' is a first-person plural pronoun used to refer to the speaker and one or more other people collectively. It is used as the subject of a sentence or clause.
An is an indefinite article used before singular countable nouns that begin with a vowel sound. It functions to indicate a non-specific person or thing, similar to the number one.
Sign up to unlock full features
Track progress, save vocabulary, and practice exercises
Description
Craft dynamic and expressive user interfaces with Shadows in Compose. Adhithya, a Staff Interaction Designer on Android, guides you through techniques to create everything from subtle highlights...
الفئات
فيديوهات ذات صلة
The Biggest Eruptions That Changed Earth Forever
Joseph Stalin Was Very Wrong About Agriculture
All Penguins Are From Australia
I Will Beat You at Rock Paper Scissors
Connect Model Context Protocol (MCP) servers to Android Studio to improve AI agent capabilities
English with Lucy
