I am trying to set a background image in Android using jetpack compose but the image cant fill the whole page

user_16438572 0
Viewed 3123
  1. i want to fill the image to max size of page and fill the edges below the appbar.
  2. i can fill the image to full background without using scaffold but in this case i need to use scaffold.
  3. the screenshot is attached with the question for better understanding
  4. u can check it by tapping on the link enter image description here
@Composable
fun ScaffoldBackground() {

    Scaffold(
        topBar = {
            TopAppBar(
                modifier = Modifier
                    .fillMaxHeight(0.2f)
                    .clip(
                        shape = RoundedCornerShape(bottomEnd = 30.dp, bottomStart = 30.dp)
                    ),

                // Provide Title
                title = {
                    Text(
                        text = "Dashboard",
                    )

                }
            )
        },
    ) {

        Box(
            modifier = Modifier
                .fillMaxSize()
        ) {
            Image(
                modifier = Modifier
                    .fillMaxSize(), 
                painter = painterResource(R.drawable.ic_launcher_background),
                contentDescription = "background_image",
                contentScale = ContentScale.FillBounds
            )


        }

    }
}

the image cant fill the the edges of app bar

scaffold android-jetpack-compose kotlin appbar background
1 Answers

I tried this code and it's working. The important thing here is to make sure that the content you put inside Scaffold should have some transparent area otherwise the background image won't be visible.

Box {
    Image(
        modifier = Modifier.fillMaxSize(),
        painter = painterResource(R.drawable.ic_launcher_background),
        contentDescription = "background_image",
        contentScale = ContentScale.FillBounds
    )
    Scaffold(
        backgroundColor = Color.Transparent,   // Make the background transparent
        topBar = {
            TopAppBar(
                modifier = Modifier
                    .fillMaxHeight(0.2f)
                    .clip(
                        shape = RoundedCornerShape(
                            bottomEnd = 30.dp,
                            bottomStart = 30.dp
                        )
                    ),
                title = {
                    Text(text = "Dashboard")
                }
            )
        },
    ) {
        // Scaffold content
    }
}
user_133089910
Related