Prevent Text overlapping button in Compose Android

Question

I created the view as below:

@Composable
fun DynamicMessageBanner(
    title: String,
    message: String,
    clickableText: AnnotatedString,
    onClickableTextClicked: () -> Unit,
    onCloseClicked: () -> Unit
) {
    Card(
        modifier = Modifier
                .fillMaxWidth()
                .border(width = 1.dp, color = UIBlue, shape = RoundedCornerShape(size = 4.dp)),
        backgroundColor = UIBlue20,
        shape = RoundedCornerShape(4.dp),
        elevation = 0.dp
    ) {
        Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.End) {
            Box(contentAlignment = Alignment.TopEnd) {
                IconButton(onClick = onCloseClicked) {
                    Icon(
                            painterResource(id = R.drawable.ic_cross), null,
                            modifier = Modifier
                                    .width(24.dp)
                                    .height(24.dp),
                            tint = Color.Unspecified
                    )
                }
            }
        }


        Column(
            modifier = Modifier
                    .fillMaxWidth()
                    .padding(12.dp, 0.dp)
        ) {
            Spacer(modifier = Modifier.height(12.dp))

            Text(text = title, style = MercuryTheme.typography.headline50)

            Spacer(modifier = Modifier.height(12.dp))

            Text(
                text = message,
                style = MercuryTheme.typography.paragraph500Medium,
            )

            Spacer(modifier = Modifier.height(8.dp))

            ClickableText(
                modifier = Modifier.align(Alignment.Start),
                text = clickableText,
                style = MercuryTheme.typography.paragraph400Medium,
            ) {
                onClickableTextClicked()
            }
            Spacer(modifier = Modifier.height(12.dp))
        }
    }
}

The problem I have at the moment is that, the title text will overlap the X button on the right corner if the text is too long. Is there any best practice creating this kind of view with adding the button to the top right corner first before generating the text?

Currently the view looks like this (text overlaps button on top right corner):

Thanks.

Maybe add a size to your box or some padding to your icon? – Code Poet Aug 26 '23 at 08:04 — Code Poet, Aug 26 '23 at 08:04

score 0 · Answer 1 · answered Aug 26 '23 at 17:37

You want to put the title in the same Row as the Icon and set the weight on its modifier.

This way Icon will have static size and the Text for the title will fill the rest.

As to why it is covering the icon - pre-Material3 Card has BoxScope("FrameLayout").

Column and Row both have .fillMaxWidth() so they both fill the space.

@Composable
fun DynamicMessageBanner(
    title: String,
    message: String,
    clickableText: AnnotatedString,
    onClickableTextClicked: () -> Unit,
    onCloseClicked: () -> Unit
) {
    Card() {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .padding(12.dp, 0.dp)
        ) {
            Spacer(modifier = Modifier.height(12.dp))
            Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.End) {
                Text(modifier = Modifier.weight(1f), text = title, style =  MaterialTheme.typography.headlineLarge)
                Box(contentAlignment = Alignment.TopEnd) {
                    IconButton(onClick = onCloseClicked) {

                    }
                }
            }
            Spacer(modifier = Modifier.height(12.dp))
            Text(text = message, style = MaterialTheme.typography.bodyMedium)
            Spacer(modifier = Modifier.height(8.dp))
            ClickableText() {
                onClickableTextClicked()
            }
            Spacer(modifier = Modifier.height(12.dp))
        }
    }
}

score 0 · Answer 2 · answered Aug 26 '23 at 17:44

Remove the Box container that contains your icon. It is unnecessary. The horizontalArrangement on your Row may also be unnecessary.

Move the Column inside your Row before the Icon. Instead of .fillMaxWidth() on your Column, give it a .weight(1f).

Rows, Columns and Boxes are all containers for other stuff. Your Row tells you that the elements inside of it are side by side. By putting the Column as the first thing in your row, you put that Column to the left of your icon. By giving it a weight of 1, you are telling it to take up the most space.

Prevent Text overlapping button in Compose Android

2 Answers2