I'm drawing a shadow around my bottom bar using the shadow modifier but it looks sharp. How can I dr...

# compose

[Se7eN]

I'm drawing a shadow around my bottom bar using the shadow modifier but it looks sharp. How can I draw a smoother shadow? I've tried playing around with the elevation but got nothing

[Se7eN]

I need something like this:

[dewildte]

That shadow kind of defies Android's built-in light laws.

[dewildte]

Interesting but nonsensical or natural.

[dewildte]

I think it's purpose is to make the bar stand out against it's background but that would not be needed if the bar was a different color then it's background in the first place.

[dewildte]

The shadows in the bar in the picture seem to defy the laws of physics.

[Chris Sinco [G]]

@Se7eN code snippet please?

[Se7eN]

BottomAppBar(
    modifier = Modifier.shadow(elevation = 1.dp),
    backgroundColor = Color.Transparent,
    cutoutShape = CircleShape,
    elevation = 0.dp,
    ...
) {
   Row { ... }
}

[Se7eN]

I'm not on PC right now but the code is some like this

[Se7eN]

@dewildte Good to know that. I'm creating a transparent bar and that's why I need a shadow

[dewildte]

If the bar is transparent it would not leave a shadow.

[Se7eN]

So what else can I do?

[Chris Sinco [G]]

So you really only want a shadow for the FAB? I think if your bottom app bar background is transparent, you might be better off having the FAB as a separate Composable where you can directly control the elevation on it.

[Se7eN]

No, I want the shadow for the whole bottom bar including the cutout, just like in the second image. For the cutout, I'm waiting for that BottomAppBarCutoutShape to be exposed because it's private right now.

[Se7eN]

Also, I have my FAB in the Scaffold

[Chris Sinco [G]]

Gotcha. Though as Eric mentioned, if the background color of the bar is transparent and you set elevation on it, you’ll just see the shadow modifier drawn, which is probably what you don’t want?

[Se7eN]

Yeah if I set an elevation, the whole bar is covered with the shadow.

[dewildte]

Covered implies the shadow is on top. shadows are underneath, but the bar is transparent so you see the shadow.

[Se7eN]

Oh got it

[Chris Sinco [G]]

Yeah it seems just with elevation that you can’t make the shadow as bold as your earlier screenshot without having access to or reimplementing BottomAppBarCutoutShape

[Chris Sinco [G]]

In general, it seems there is limited control over the shadow in terms of blur, spread, and color. I’m not sure if it’s being considered to enable more customization for the Modifier or in general, but maybe @Adam Powell or @romainguy have thoughts.

[romainguy]

Blur and spread are not controllable, at least directly. You can, in recent versions of Android, control the surface of the light that projects those shadows

[romainguy]

This has the side effect of modifying the “blur” of the shadow

[romainguy]

Note that there’s no blur involved in our shadowing system, it is the result of properly computing the umbra and penumbra created by an area light project through an occluder

[Chris Sinco [G]]

Sorta like this diagram?

[romainguy]

Yep, except with quads instead of spheres

[romainguy]

Very first prototype (which was fully raytraced :))

[MaxUt]

@romainguy any idea how to add blur and spread to the shadow modifier ?

[Chris Sinco [G]]

Some hints from @Nader Jawad https://kotlinlang.slack.com/archives/CJLTWPH7S/p1625775629281900?thread_ts=1625037042.127700&cid=CJLTWPH7S