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.
Related
I have a Row with an horizontal scroll and n items inside of varying and unknown widths.
Case 1 -> In case the items dont fill the container's width I want the last item to fill the remaining space.
Case 2 -> In case the items sum of widths is higher than the containers width (hence allowing scroll), I want the last item to behave like all the others.
I have tried to use .fillMaxWidth in the last item but inside a scrollable row this has zero effect.
I can use .weight(1f) for Case 1, but this ruins the UI in Case 2.
I know a solution could be calculating manually the width of each item, and switch the modifier from adding the weight modifier to not using it as soon as the widths exceed the container's width but I believe there might be a solution using Modifier functions inside the Row? Or possibly with a Lazy Row?
Sample code:
val horizontalScroll = rememberScrollState()
Row(
Modifier
.fillMaxWidth()
.horizontalScroll(horizontalScroll)
) {
items.forEachIndexed { index, item ->
ItemComponent(
modifier = if (index == items.lastIndex) Modifier.weight(1f) else Modifier
text = item.text
)
}
}
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.
I have a TextField
TextField(
keyboardOptions = KeyboardOptions.Default.copy(
imeAction = ImeAction.Search,
),
keyboardActions = KeyboardActions(
onSearch = {
onSearchTextSubmit(searchText)
},
),
modifier = Modifier.focusRequester(focusRequester),
singleLine = true
)
the I click "Enter" on keyboard the input gets cut from the bottom.
The TextField is inside TopAppBar and I don't set any height or text size explicitly.
Is decreasing text size the only way to make it look good or there is a way to force TextField to adjust its height or text size out of the box?
You need to increase the height of the field by a modifier that looks like this:
modifier = Modifier.height(56.dp), //56 or higher!
Thus, todays options are:
Increase the height of the TextField
Decrease the size of the font
Check the surrounding containers like Card Box Row Column you will find one with a fixed Height it has impact on your composable you should increase that height i was having the same problem i found a card with fixed height 150.dp i change it to 160.dp and it works hope its the same for you
I want to position my own component (say a Text component) vertically so that I can specify the y-offset relative to the bottom of the Text component. How could I do this in Jetpack compose?
So something like
Column {
Text("Something", modifier = Modifier.offset(y=10.dp))
}
But instead of 10dp representing the top y-position of the Text component it would be the bottom y-position. Basically taking into account the height of the Text even if Text size changes. So y = offset.y - height
As I can see it, there's two problems:
The font size can be changed, so I cannot hard code the text height.
I need to know the size of my Text component during composition, but I don't know how to get that.
You could go for custom Composables,
#Composable
fun CustomText(y: Dp){
Layout(content = { Text(text = "Lorem Ipsum") }){measurables, constraints ->
val text = measurables[0].measure(constraints)
layout(constraints.maxWidth, constraints.maxHeight){ //Change these per your needs
text.placeRelative(IntOffset(0, y.value.roundToInt() - text.height))
}
}
}
You could also use a custom Modifier. Check out using the layout modifier
I have a Row with max width, I want to place a Icon at start then a text and then another Icon at end.
I have specific sizes of icon and I want the Text to fill up the remaining space.
Row(
Modifier
.fillMaxWidth()
.height(30.dp)
){
Icon(Modifier.size(20.dp))
Text() // Fill this with remaining space available
Icon(Modifier.size(20.dp))
}
If I do fillMaxWidth in text then Icons goes out of the view.
How to do that?
You can apply Modifier.weight(1f) to the Text composable.
Something like:
Row(
Modifier
.fillMaxWidth()
.height(30.dp)
){
Icon(Icons.Filled.Add,"", Modifier.size(20.dp))
Text("Text",Modifier.weight(1f)) // Fill this with remaining space available
Icon(Icons.Filled.Add,"", Modifier.size(20.dp))
}