Bottom nav bar with curved edge and shadow- Jetpack Compose

Asked May 17 '22 at 08:26

Active May 17 '22 at 18:43

Viewed 1,693 times

I am trying to build a bottom nav bar with curved edges at the top start and top end.
When setting a shadow, it is not showing the shadow correctly.
How to set a shadow around? Or am I doing any wrong thing?

Code

BottomNavigation(
    backgroundColor = Color(0xffffff),
    modifier = Modifier
        .graphicsLayer {
            clip = true
            shape = RoundedCornerShape(topStart = 30.dp, topEnd = 30.dp)
            shadowElevation = 2.2f
        }
        .height(100.dp),
    elevation = 8.dp,
)

Screenshot

How to add a shadow around the top start and end edges?

edited May 17 '22 at 14:52

Abhimanyu

11,351
7
51
121

asked May 17 '22 at 08:26

Harish Padmanabh

1

I actually see the shadow on your image, try increasing `shadowElevation` – Phil Dukhov May 17 '22 at 11:04
I did it . But still its giving the same . – Harish Padmanabh May 17 '22 at 13:50
Its the background color set to gray of the page not shadow – Harish Padmanabh May 17 '22 at 13:51
1

[This](https://i.stack.imgur.com/SaD3k.gif) is how [this code](https://gist.github.com/PhilipDukhov/a492cf97f221cff6096446413623c0a6) works to me - `shadowElevation` definitely works – Phil Dukhov May 18 '22 at 02:29

Bottom nav bar with curved edge and shadow- Jetpack Compose

0 Answers0