android-jetpack-composeandroid-jetpackandroid-compose-card

How to get rid of white space from a card jetpack compose


I am working on this design where I have a column that has text and image on top and I have this card view but I want to remove this white space. The card is white I just added the blue to show the white space showing. How can I remove the white space. I want the R.color.purple_700 to fill that space.

Here is my code

 Column(
        modifier = modifier
            .fillMaxSize()
    ) {
        Column(
            modifier = modifier
                .fillMaxWidth()
                .background(colorResource(id = R.color.purple_700))
                .weight(2.0f),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center
        ) {
            // Do I add the box here?
            Image(
                painter = painterResource(id = R.drawable.ic_launcher_background),
                contentDescription = "Logo"
            )
            Text(
                text = "Sign in to Continue",
                color = (colorResource(id = R.color.white)),
                fontSize = 28.sp,
                modifier = Modifier.padding(8.dp)
            )
        }
        Card(
            shape = RoundedCornerShape(topStart = 32.dp, topEnd = 32.dp),
            modifier = modifier
                .fillMaxWidth()
                .weight(5.0f), elevation = 8.dp
        ) {
            Column(
                modifier = modifier
                    .fillMaxSize()
                    .padding(horizontal = 16.dp)
                    .scrollable(scrollState, Orientation.Vertical),
                horizontalAlignment = Alignment.CenterHorizontally

            ) {

// then some outlinedText
}

enter image description here


Solution

  • Just add the background modifier to the Card.

    Card(
       modifier = Modifier.background(colorResource(id = R.color.purple_700))
       //....
    )
    

    enter image description here