Jetpack Compose BottomBar transparent background color when it has rounded corners

Question

this is the code I am using to have a BottomNavigation with rounded corners in a Scaffold.

BottomNavigation(
        backgroundColor = Color.Transparent,
        modifier = Modifier
            .fillMaxWidth()
            .clip(RoundedCornerShape(150.dp, 150.dp, 0.dp, 0.dp))
    ) {
        Box(
            modifier = Modifier.fillMaxWidth()
                               .height(120.dp)
                               .background(Color.Green)
        )
    }

this is the result:

that red color is coming from Scaffold's background color. how can I replace that red color with transparent, so the content wouldn't be cut?

Answer 1

Try changing the containerColor of the scaffold. Like this way:

Scaffold(
    containerColor = Color.Transparent
){
    ...
}

Answer 2

Made Changes In And Check The Output. Red Color Is For Showing That Scaffold Background Is Transparent You Can remove the red colour.

Preview

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.BottomNavigation
import androidx.compose.material.Text
import androidx.compose.material3.Scaffold
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.jetpackcomposeplayground.ui.theme.JetpackComposePlayGroundTheme

@Preview
@Composable
fun Pre() {
    JetpackComposePlayGroundTheme {
        Ex12()
    }
}

@Composable
fun Ex12() {
    Scaffold(
        containerColor = Color.Red,
        bottomBar = {
        BottomNavigation(
            backgroundColor = Color.Transparent,
            modifier = Modifier
                .fillMaxWidth()
                .clip(RoundedCornerShape(150.dp, 150.dp, 0.dp, 0.dp))
        ) {
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(120.dp)
                    .background(Color.Green)
            )
        }
    }) {
        Column(
            modifier = Modifier
                .padding(it)
                .fillMaxSize()
                .background(Color.Red)
        ) {
            Text(text = "Content")
        }
    }
}

Answer 3

Technically, the Scaffold is composed over Surface and the BottomNavigation is composed over scaffold so when you clip the bottom navigation then scaffold background color will be shown and if you set scaffold backgroundColor to Color.Transparent then you can see the surface backgound (Blue in our case) but there will be no red scaffold color as it is now transparent.

But for your requirement you can try the following code this will give result same as the preview picture. Here we have BottomNavigation in the Scaffold content instead of composable lambda to the scaffold.

// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
    Scaffold(
        backgroundColor = Color.Transparent,
    ) {
        Column(
            modifier = Modifier
                .padding(it)
                .fillMaxSize()
        ) {
            Box(
                modifier = Modifier
                    .weight(1f)
                    .fillMaxWidth()
                    .background(Color.Red)
            ) {
                // ...
                Text(text = "Hello World!")
            }
            BottomNavigation(
                modifier = Modifier
                    .fillMaxWidth()
                    .clip(RoundedCornerShape(150.dp, 150.dp, 0.dp, 0.dp))
            ) {
                // ...
                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(120.dp)
                        .background(Color.Green)
                )
            }
        }
    }
}