androidandroid-jetpack-compose

how to avoid defining a fixed box height?


How can I avoid defining a fixed height for the Box that I have inside a Row? You can see it in the image, it is the yellow view that is the Box. If I use fillMaxWidth() or wrapContentHeight(), the Box has height of 0. Why is this happening?

Image

Code:

@Composable
fun ProfileScreen(
    profileInfo: ProfileUi = generateInfo()
) {
    LazyColumn(
        modifier = Modifier
            .systemBarsPadding()
            .navigationBarsPadding()
            .fillMaxSize(),
        contentPadding = PaddingValues(bottom = 15.dp),
        verticalArrangement = Arrangement.spacedBy(15.dp),
    ) {
        item {
            HeaderProfile(
                modifier = Modifier.background(MovieWhiteColor).padding(top = 15.dp),
                avatarUrl = profileInfo.avatarUrl,
                name = profileInfo.name,
                carouselItems = profileInfo.carouselItems
            )
        }

        items(profileInfo.followsItems) { follow ->
            Spacer(modifier = Modifier.height(15.dp))
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .background(MovieWhiteColor)
                    .padding(18.dp),
                verticalArrangement = Arrangement.spacedBy(18.dp)
            ) {
                Row(
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    Box(
                        modifier = Modifier
                            .width(6.dp)
                            .height(25.dp)
                            .clip(RoundedCornerShape(25.dp))
                            .background(MovieYellowColor)
                    )
                    Spacer(modifier = Modifier.width(10.dp))
                    Text(
                        text = follow.title,
                        fontSize = 20.sp,
                        fontWeight = FontWeight.Bold
                    )
                }
                Text(
                    text = follow.description,
                    fontSize = 14.sp,
                )
                if(follow.buttonData != null) {
                    Button(
                        onClick = {},
                        colors = ButtonDefaults.buttonColors(
                            containerColor = MovieYellowColor,
                            contentColor = MovieButtonTextColorFollow
                        ),
                        shape = RoundedCornerShape(10.dp),
                        modifier = Modifier.fillMaxWidth()
                    ) {
                        Text(text = follow.buttonData.text)
                    }
                }
            }
        }

        items(profileInfo.menuOptionsItems) { menuOption ->
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .background(MovieWhiteColor)
                    .clickable {  }
                    .padding(vertical = 15.dp, horizontal = 24.dp),
                horizontalArrangement = Arrangement.SpaceBetween
            ) {
                Text(
                    text = menuOption.text,
                    fontWeight = FontWeight.Bold
                )
                Icon(
                    Icons.AutoMirrored.Filled.NavigateNext,
                    contentDescription = null,
                    tint = MovieGray15Color
                )
            }
        }
    }
}

Solution

  • I am not sure if I properly understood your question, as your code seems not to match what you are showing on the screenshot.

    However, if you are asking how to achieve a headline like this:

    Screenshot

    You can use a combination of fillMaxHeight and InstrinsicSize.Min, as described in the official documentation:

    @Preview(showBackground = true)
    @Composable
    fun Headline() {
        Row(
            modifier = Modifier
                .height(IntrinsicSize.Min)  // set height of Row to smallest child Composable
                .padding(4.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Box(
                modifier = Modifier
                    .width(6.dp)
                    .fillMaxHeight()  // match height of Row
                    .clip(RoundedCornerShape(25.dp))
                    .background(Color.Red)  // use your MovieYellowColor here
            )
            Spacer(modifier = Modifier.width(10.dp))
            Text(
                text = "Personas Favoritas",
                fontSize = 20.sp,
                fontWeight = FontWeight.Bold
            )
        }
    }
    

    With this code, the red / yellow line will match the height of the Text Composable.

    You can't use wrapContentHeight() in this case because the Box has no content. To use a Box with a content, you would need to pass the content like this:

    Box(
        modifier = Modifier.wrapContentHeight()
    ) {
        // pass content here
        // Text("This is the content of the Box")
    }