Develop Reference

Jetpack Compose Text having extra padding when wrapping to next line

I have a a text element with an icon to its right, both wrapped in a Row. The text has a 1.0f weight with fill = false. When a word wraps to the next line, the text has some padding at the end of it causing the icon to be too far apart from it. This is what it looks like:
App Example
Here is the code:
Row(
modifier = Modifier.width(150.dp)
) {
Text(
"John Doe John Doe John Doe",
modifier = Modifier.weight(1.0f, fill = false).background(Color.Green)
)
Icon(
imageVector = Icons.Default.Done,
contentDescription = "",
)
}
How do I make it so the text's width wraps itself without adding that extra spacing?

This is a normal behavior. It happens because you set weight for your Text and a width modifier for your Row.
It's kind of unavoidable when setting a specific width or height. It may happen even if you set weight for both Composables inside the Row (0.1f and 0.9f). Because the word can't fit in the remaining space but the Composable must fill the Row
You set the row width to 150.dp and when your Text has a weight modifier, it fills the row even if a word in your Text composable doesn't fit in the line.

How do I expand the full height of a lazy column in Jetpack Compose?

I have a Lazy column like so
LazyColumn(
modifier = Modifier
.fillMaxWidth()
.height(gridMultiple(i = 15) * data.size)
.padding(vertical = gridMultiple(i = 2)),
verticalArrangement = Arrangement.spacedBy(gridMultiple(i = 2)),
userScrollEnabled = false
) {
items(data.size) { index ->
val item = data[index]
ListItem(
item,
editButtonClick = { id -> onEditClick(id) }
)
}
}
and it is encapsulated in an interop composable XML element like so:
<androidx.compose.ui.platform.ComposeView
android:id="#+id/informationList"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
The catch is that the informationList is inside of a ScrollView (XML), and I want the lazy column list to be fully expanded within the scroll view. But I do not know the height that the elements need to be, so I am doing this math here:
.height(gridMultiple(i = 15) * data.size)
But it uses either too much space or not enough. So either elements get cut off, or they have a lot of empty space at the end. I want to use exactly as much space as the LazyColumn needs. If I set the height to be wrapping, I get an exception that the lazy column has an infinite possible height and must have a height specified. There must be a way to do this. I know that the max amount of elements that can ever be in the lazy column is limited to about 10.

That will defeat the whole purpose of LazyColumn. The lazy part just won't work when you use it like that. You could just go with normal Column and it would make no difference at all in terms of performance. Especially with 10 items, with such number the LazyColumn is huge overkill. Bonus for your case - Column supports wrapContentHeight().
TLDL - just use Column with wrapContentHeight() and it should be just fine

Jetpack Compose: multiline Text in Row with weight and wrapping text content

I have a Row layout with two Composables inside:
Text that should wrap itself width and take as much space as possible when content is lengthy
Image that has to be present every time on the right side of Text
To achieve both, I'm currently using weight(weight = 1f, fill = false) for Text Composable. And it works fine for single line content. However, it creates an issue with line breaking and wrapping multiline text. For clearer view, I've added background(Color.Yellow) and some long words. See reference code:
Row {
Text(
text = "This is the message with quite super-unprecedented words",
modifier = Modifier
.background(Color.Yellow)
.weight(
weight = 1f,
fill = false
)
)
Image(
painter = painterResource(R.drawable.image),
contentDescription = null
)
}
And the result looks like this:
Is it possible to remove the padding at the end of Text so Image could fit closely to Text in multiline case as well? Or any other ideas how to achieve this? I've already taken a look on softWrap parameter for Text and requireSize for Image but with no big luck.

Big wasted space at Text soft line break

I am building a chat screen using Jetpack Compose, Each message draw a column that takes the full width of the screen, and inside the column, I draw a time Text at the center of the screen width, and below the time I draw a message Text that takes between 0 and 0.75 of the screen width. If the message width is bigger than 0.75 of the screen width it takes multiple lines, but I notice that the space at soft line break is very big and ugly, how can I reduce it? I want to achieve the same result in the left image below.
#Composable
fun MessageRow() {
Column {
// here goes time then a surface contains message
Surface(
color = MaterialTheme.colors.background,
modifier = Modifier
.widthIn(0.dp, 265.dp)
) {
Text(
text = "I was distraught to attend the meeting.",
color = Color.Black
)
}
}
}

What has replaced weights?

Trying to figure out how to position items in the latest build... Many examples online indicate to use modifier = Modifier.weight(...), but the option is simply not given as of the build I'm using.
I need to send a button at the bottom of the page regardless of the size of a lazy column just above it. What's the preferred way to do such a thing?

With 1.0.0-beta02 the Modifier.weight exists.
Size the element's height proportional to its weight relative to other weighted sibling elements in the Column. The parent will divide the vertical space remaining after measuring unweighted child elements and distribute it according to this weight
Something like:
val itemsList = (0..60).toList()
Column {
LazyColumn(modifier = Modifier.weight(1f)){
items(itemsList) {
Text("Item is $it")
}
}
Row( verticalAlignment = Alignment.Bottom) {
Text(text = "Footer row")
}
}
Otherwise you can use a ConstraintLayout.