How to make middle view sit in bound of between two images? (JetpackCompose)

Question

I have such a view

@Composable
fun LongText() {
    ConstraintLayout(

    ) {
        val (leftImg, headerTitle, rightImg) = createRefs()

        Image(
            modifier = Modifier
                .constrainAs(leftImg) {
                    top.linkTo(parent.top)
                    start.linkTo(parent.start)
                    bottom.linkTo(parent.bottom)
                },
            painter = painterResource(id = R.drawable.ic_launcher_foreground),
            contentDescription = ""
        )

        Text(
            text = "LONGTEXTLONGTEXTLONGTEXTLONGTEXTLONGTEXT",
            textAlign = TextAlign.Left,
            modifier = Modifier
                .padding(start = 8.dp)
                .constrainAs(headerTitle) {
                    start.linkTo(leftImg.end)
                    top.linkTo(parent.top)
                    end.linkTo(rightImg.start)
                    bottom.linkTo(parent.bottom)
                },
            maxLines = 1,
            overflow = TextOverflow.Ellipsis,
            color = Color.Red
        )

        Image(
            modifier = Modifier
                .constrainAs(rightImg) {
                    top.linkTo(parent.top)
                    end.linkTo(parent.end)
                    bottom.linkTo(parent.bottom)
                },
            painter = painterResource(id = R.drawable.ic_launcher_foreground),
            contentDescription = ""
        )
    }
}

There are two problems that I am trying to find out:

Why maxLines & overflow doesn't work for Text view? I expect that verylong text will be collapsed with three dots once it reaches the image on the right, what is the problem here?

maxLines = 1,
overflow = TextOverflow.Ellipsis

Result:

Why align doesn't work for short text? I mean according to this line textAlign = TextAlign.Left I expect that short text appear on the left, close to the left image, however instead I have this text in the middle

Result:

You're overcomplicating it... https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement — Zun, Sep 01 '22 at 08:56
@Zun there is no right option, I mean what I need is that the middle view should get all available space as provided in the answer below. — Sirop4ik, Sep 01 '22 at 12:34

score 1 · Accepted Answer · answered Aug 29 '22 at 13:02

You can use a simple Row applying a weight(1f) modifier to the Text

    Row(Modifier.fillMaxWidth()) {
        Image(
            painter = painterResource(id = R.drawable.xxx),
            contentDescription = ""
        )

        Text(
            text = "LONGTEXTLONGTEXTLONGTEXTLONGTEXTLONGTEXT",
            textAlign = TextAlign.Left,
            modifier = Modifier
                .padding(start = 8.dp).weight(1f),
            maxLines = 1,
            overflow = TextOverflow.Ellipsis,
            color = Color.Red
        )

        Image(
            painter = painterResource(id = R.drawable.ic_xxx),
            contentDescription = ""
        )
    }

How to make middle view sit in bound of between two images? (JetpackCompose)

1 Answers1