Hello, hope you are all doing well. I need to appl...
# compose-android
d
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
image.png
i would like to have that disappearing effect where element 'disappear into the shadow
t
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.
d
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
t
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?
d
yes
t
Did you tried the shadow modifier for your title component?
d
it adds shadow all around it and the issue is that I have some animation changing the size of the title also
I need it just on the bottom
Here is one partial solution I implemented but don't like it
t
Oh ok i see. Than you can not use the buildin shadow components
d
Copy code
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(...)
}
t
You don't like the look or does it not work?
Look a bit confusing using Box and wrapContentSize modifier.
d
I assume there is a more elegant solution
t
But yea sorry do not have a solution for this. Maybe anyone else?
d
seems like a very basic thing to do, Idk why it is so complex to implement with compose 😞
t
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.
d
it's not having the complete width, also title's size and shape changes during some animations.
image.png
this is how it looks with just a shadow
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 😄