CODEWITHSUNDEEP
androidandroid-jetpack-composebottombar
mrzbn
mrzbn

Reputation: 665

Jetpack Compose BottomBar transparent background color when it has rounded corners

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:

enter image description here

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?

Upvotes: 0

Views: 2454

Answers (4)

Gelson Schikorski
Gelson Schikorski

Reputation: 89

If someone is struggling with this as I was, here is a solution:

Any color (including transparent) you set in the background (content or container) of the scaffold is gonna be useless if you are applying the paddingValues of the scaffold (making the content respect the bottomBar limits, to start showing the actual content), so what is gonna solve this is to remove the paddingValues given by the scaffold from the main view inside the content lambda:

Instead of this:

    Scaffold(
        bottomBar = {
            Row {
                // ...
            }
        }
    ) { paddingValues ->  
        Column(Modifier.padding(paddingValues)) {
            // ...
        }
    }

Do this:

    Scaffold(
        bottomBar = {
            Row {
                // ...
            }
        }
    ) { _ ->  
        Column { // Removed this padding values so the content will be drawn behind the bottomBar 
            // ...
        }
    }

Upvotes: 0

Atul Sharma
Atul Sharma

Reputation: 1102

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.

Preview of code

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

Upvotes: 0

Chirag Thummar
Chirag Thummar

Reputation: 3172

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

Preview

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

Upvotes: 0

Hamid Sj
Hamid Sj

Reputation: 1023

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


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

Upvotes: 0

Related Questions