Row with two Text in Constraint fashion in Jetpack Compose
I want to include two Text in a Row where the first Text's width is upto the start of 2nd Text, like this
I am trying Modifier weight but the result achieved is not the same. Is there a way to do it by using Row itself and not ConstraintLayout.
EDIT :
Row(modifier = Modifier.fillMaxWidth()) {
Text(
"Some long title abcd efgh ijkl mnop qrst uvwx yzzzzz Some long title abcd efgh ijkl mnop qrst uvwx yzzzzz",
maxLines = 1,
overflow = TextOverflow.Ellipsis,
modifier = Modifier.weight(5f)
)
Text("View all", modifier = Modifier.weight(1f))
}
This works, please suggest a better solution if I am missing something.
EDIT 2 : Its giving me results like this: I want the Title to start from the beginning of Row
You can use something like:
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceBetween) {
Text(
"Short title",
maxLines = 1,
overflow = TextOverflow.Ellipsis,
modifier = Modifier.weight(1f)
)
Text("View all")
}
Just for comparison, this is the same solution but done with ConstraintLayout
:
ConstraintLayout(
modifier = Modifier.fillMaxSize()
) {
val (title, viewAll) = createRefs()
Text(text = "View all", Modifier
.background(Color.Green)
.constrainAs(viewAll) {
top.linkTo(parent.top, 8.dp)
end.linkTo(parent.end, 8.dp)
})
Text(text = "Short title",
maxLines = 1,
overflow = TextOverflow.Ellipsis,
modifier = Modifier
.background(Color.White)
.constrainAs(title) {
top.linkTo(parent.top, 8.dp)
start.linkTo(parent.start, 8.dp)
end.linkTo(viewAll.start, 8.dp)
width = Dimension.fillToConstraints
})
}