Hello, hope you are all doing well. I need to apply a bottom drop shadow on an android component and...

# compose-android

[Djuro]

Hello, hope you are all doing well.
I need to apply a bottom drop shadow on an android component and am struggling with it.
Do have some ideas maybe on how this could be done?
example in thread

[Djuro]

image.png

[Djuro]

i would like to have that disappearing effect where element 'disappear into the shadow

[Timo Drick]

You can use the elevation attribute for this. But of course it depends on which component you want the shadow on. Not all composables do have this. But there are also modifiers.

[Djuro]

There is a Column and inside of it there is a LazyColumn
I want to have something like inner top shadow on the lazyColumn inside I think

[Timo Drick]

So you have some kind of title above your list and want to have a shadow for that? And than the list elements should scroll behind the title right?

[Djuro]

yes

[Timo Drick]

Did you tried the shadow modifier for your title component?

[Djuro]

it adds shadow all around it and the issue is that I have some animation changing the size of the title also

[Djuro]

I need it just on the bottom

[Djuro]

Here is one partial solution I implemented but don't like it

[Timo Drick]

Oh ok i see. Than you can not use the buildin shadow components

[Djuro]

Box(modifier = Modifier.wrapContentSize()) {
    HorizontalDivider(
        modifier = Modifier.background(
            brush = Brush.verticalGradient(
                colors = listOf(
                    Color.Black.copy(alpha = 0.3f),
                    Color.Transparent,
                )
            )
        ),
        thickness = 5.dp,
        color = Color.Transparent
    )
    LazyColumn(...)
}

[Timo Drick]

You don't like the look or does it not work?

[Timo Drick]

Look a bit confusing using Box and wrapContentSize modifier.

[Djuro]

I assume there is a more elegant solution

[Timo Drick]

But yea sorry do not have a solution for this. Maybe anyone else?

[Djuro]

seems like a very basic thing to do, Idk why it is so complex to implement with compose 😞

[Timo Drick]

The shadow in compose is physically based calculation. So it depends on the position on the screen and there is a hardcoded light source position.
Still not sure why you do not want to use the buildin shadows.
When your title is at the top of the screen and fills the complete widht than you do have only the bottom shadow. In theory you could also use clipping to get rid of the other directions.

[Djuro]

it's not having the complete width, also title's size and shape changes during some animations.

[Djuro]

image.png

[Djuro]

this is how it looks with just a shadow

[Djuro]

box with a divider works fine I guess. I will go with that approach. I sincerely hope someone sees this and leads us to t he right approach 😄