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?

Roana

Can you tell me which content is cutting ? – Hilarius

consider a case where 1-scaffold bg is red 2- content bg is blue 3- bottom bar bg is green. what I want is when I clip bottom bar with a shape, the only colors I see be blue and green. but the problem is I'm also seeing a red color that is related to scaffold. – Roana

Answer 1

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

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

Dinghy

do you mean "backgroundColor"? because there is no such field as "containerColor". – Roana

if you are using M2 it will be backgroundColor and if you are using M3 it will be containerColor – Gaggle

@ChiragThummar you are right. I changed "backgroundColor" or "containerColor" to Transparent. but again, activity's window background color was used and not transparent. – Roana

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")
        }
    }
}

Gaggle

I tried the Materail2 version of your response and it's not working. I set the backgroundColor of Scaffold to transparent. but background of bottomNav was still reading activity's windowBackground color – Roana

did you tried using M3? – Gaggle

share your complete screen code so I can analyze it better – Gaggle

I tried your code but still the color around the BottomBar is not the same as content color. I can't share the image your code results in the comment section. to be more specific I want the color around the BottomBar to be the same as Color.Red. – Roana

check my edited reply for you – Gaggle

but your solution is not general. what if my content changes background color from red to blue? – Roana

You are not even thinking of changing color of both when you want to change the color – Gaggle

I’m sorry, I didn’t understand. could you rephrase your comment please? – Roana

if your content change background color you can change both color of content and topappbar at same time – Gaggle

yeah, but I want to just change one and only one color, "content bg color". changing "container color" when "content bg color" changes, is a workaround and is not very convenient. but it will work for sure. – Roana

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)
                )
            }
        }
    }
}

Hilarius

but this is still showing a blue color – Roana

@Roana I have set Blue and background color in theme that's why is showing blue as the surface color as we have discussed in the comments. What you need instead of blue ? – Hilarius

I want that to be red as the content – Roana

But in comment you said that you are using Blue as the content bg and red as the scaffold bg. Now if you want Red instead of Blue then you can just change the scaffold backgroundColor to Red and use the BottomNavigation as the parameter and remove extra composables. – Hilarius

@Roana Do you want like this: i.imgur.com/op4purK.jpeg where Red is the Scaffold backgroundColor ? – Hilarius

yes. something like that – Roana

Then try my above solution in previous comment. – Hilarius