How to make rounded bottom navigation in Android Jetpack Compose

Question

I want to make a Bottom naviation in Android Jetpack compose but in every source I found, The navigation built with compose is normal, flat one Just like This,

The point is I could not find a way to make something like this

How can I do just a thing ? Thanks

Answer 1

Just use clip Modifier and add RoundedCornerShape with the top corners , here is sample code

BottomNavigation(
            backgroundColor = colorResource(id = R.color.black),
            modifier = Modifier.fillMaxWidth().clip(RoundedCornerShape(15.dp, 15.dp, 0.dp, 0.dp))
        )