Android compose text overflow weight is not work

Question

RI am developing an Android app using jetpack compose.

Here is a very basic UI component:

I want to add a button on the right side.

But if the name is very long, the button is gone.

My code is here:

Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.SpaceBetween,
    verticalAlignment = Alignment.CenterVertically
) {
    Row(
        verticalAlignment = Alignment.CenterVertically
    ) {
        Image(
            painter = rememberImagePainter(data = profileImg),
            contentDescription = null,
            modifier = Modifier
                .size(56.dp)
                .clip(CircleShape)
        )

        Column(
            verticalArrangement = Arrangement.Center,
            modifier = Modifier.weight(1F) // I set the weight in here but it doesn't work.
        ) {
            Text(
                text = "very very very very very very very long name",
                fontWeight = FontWeight.Bold,
                maxLines = 1,
                overflow = TextOverflow.Ellipsis,
            )
            Text(
                text = "3 minutes ago",
            )
        }
    }

    Row {
        Button()
        Button()
    }
}

How can I show the right button correctly?

Does this answer your question? [Text layout priority in Jetpack Compose](https://stackoverflow.com/questions/68320333/text-layout-priority-in-jetpack-compose) — Phil Dukhov, Feb 04 '22 at 09:52

score 2 · Answer 1 · answered Feb 04 '22 at 10:24

Here is a working code (I've removed useless Row, it's simpler that way)

@Composable
fun Test() {
    Row(
        modifier = Modifier.fillMaxWidth,
        horizontalArrangement = Arrangement.spacedBy(5.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Image(
            painter = rememberImagePainter(data = profileImg),
            contentDescription = null,
            modifier = Modifier
                .size(56.dp)
                .clip(CircleShape)
        )

        Column(
            verticalArrangement = Arrangement.Center,
            modifier = Modifier.weight(1f) // I set the weight in here but it doesn't work.
        ) {
            Text(
                text = "very very very very very very very long name",
                fontWeight = FontWeight.Bold,
                maxLines = 1,
                overflow = TextOverflow.Ellipsis,
            )
            Text(
                text = "3 minutes ago",
            )
        }

        Button(onClick = { }) {
            Text(text = "Btn1")
        }
        Button(onClick = { }) {
            Text(text = "Btn2")
        }
    }
}

score 1 · Accepted Answer · answered Feb 04 '22 at 09:58

You need to actually provide that weight to Row containing your Text & make sure you don't cover the entire width. e.g don't do just 1f.

You can do something like this; (This is done with compose_version = '1.0.1')

@Composable
fun Item() {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier.weight(0.7f)
        ) {
            Image(
                painter = painterResource(R.drawable.ic_launcher_background),
                contentDescription = null,
                modifier = Modifier
                    .size(56.dp)
                    .clip(CircleShape)
            )

            Column(
                verticalArrangement = Arrangement.Center,
            ) {
                Text(
                    text = "very very very very very very very long name",
                    fontWeight = FontWeight.Bold,
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis,
                )
                Text(
                    text = "3 minutes ago",
                )
            }
        }

        Button(
            onClick = {}, modifier = Modifier
                .wrapContentWidth()
                .weight(0.3f)
        ) {
            Text(text = "Button")
        }
    }
}

Output:

score 0 · Answer 3 · answered Feb 04 '22 at 10:58

Even though the other question are right I am going to explain your mistake, to better understand what is going on.

So you need: A Row() which will contain those 3:

Image
Column
and a Row with the two buttons

In other words something like:

Row() {
   Image()
   Column(weight:1f)
   Row()
}

Your mistake is that you created a Row with two other Rows without weights and you get this weird output.

So if you simply delete your outer Row and move your Row of buttons like so it will work:

Android compose text overflow weight is not work

3 Answers3