Develop Reference

Show Icon at Right Side and Ellipsis Middle Text If Overflow In Compose

I want two behavior.
[Working] If middle text is short, then heart icon should be next to middle text and cart should be at end,
see image.
[Not working] If middle text is large, then heart icon should stick beside carts left and middle text be ellipsis.
Note: I have tried Modifier.weight(1f,fill = false) for second behaviour but then first broke.
code
Row(
modifier = Modifier.fillMaxSize()
) {
Row(
modifier = Modifier.wrapContentWidth()
) {
Icon(Icons.Filled.Search,"")
Spacer(modifier = Modifier.width(18.dp))
Icon(Icons.Filled.Add,"")
Spacer(modifier = Modifier.width(12.dp))
Text(
text = "If text is long, then cart icon show at end with ellipsis text",
maxLines = 1,
modifier = Modifier
.weight(1f,fill = false)
)
Spacer(modifier = Modifier.width(12.dp))
Icon(Icons.Filled.Favorite,"")
}
Row(Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.End) {
Icon(Icons.Filled.ShoppingCart,"")
}
}

You can wrap the Text and the Favorite Icon with a Row and apply to it the weight modifier to fill the available space.
Then assign weight(1f, fill = false) to the Text:
Row(
modifier = Modifier.fillMaxWidth().background(Color.Yellow),
) {
Icon(Icons.Filled.Search,"")
Spacer(modifier = Modifier.width(18.dp))
Icon(Icons.Filled.Add,"")
Row(Modifier.weight(1f)) {
Text(
text = "If text is",
maxLines = 1,
modifier = Modifier
.weight(1f, fill = false)
.padding(8.dp),
overflow = TextOverflow . Ellipsis
)
Icon(
Icons.Filled.Favorite, "",
)
}
Icon(Icons.Filled.ShoppingCart,"")
}

You center component should use the "left space" with weight attribute
modifier = Modifier
.weight(1f)
.padding(8.dp),
overflow = TextOverflow.Ellipsis

How can I truncate of a Text displayed in Row in Jetpack Compose?

I display a text on the left of a row, and display tool buttons on the right of the row with Code A.
It's Ok when the text is short, you can see Image A as I expected.
But when the text is long, I find some tool buttons on the right of the row disappeared, you can see Image B.
I hope that tool buttons on the right of the row can be always displayed, and the left text can be truncated automatically when the sapce is not enough.
How can I do ? Thank!
Code A
Row(
modifier = Modifier.fillMaxWidth(),
verticalAlignment = Alignment.CenterVertically
) {
Text("This a short text")
//Text("This a very long text text text text text text text text")
Spacer(Modifier.weight(1f))
val iconModifier = Modifier.size(24.dp)
IconButton(
enabled = true,
onClick = {
}
) {
Icon(Icons.Filled.Edit , null, modifier = iconModifier)
}
IconButton(
enabled = true,
onClick = {
}
) {
Icon(Icons.Filled.Delete , null, modifier = iconModifier)
}
IconButton(
enabled = true,
onClick = {
}
) {
Icon(Icons.Filled.ExpandMore , null, modifier = iconModifier)
}
}
Image A
Image B

Apply to the Text the weight modifier and remove the Spacer:
Text("This a very long text text text text text text text text",
modifier = Modifier.weight(1f),
overflow= TextOverflow.Ellipsis,
maxLines = 1)
//Spacer(Modifier.weight(1f))

How to put Text composables in Row, one with a mutable width

I want to know the way to put Text composables in Row, one with a mutable width for a TopAppBar.
Regarding the two Texts, one has a width that varies with the number of characters, and the other has a fixed number of characters and we want the string to be displayed reliably.
I tried writing codes to make that, but it did not work as I had expected.
Here is my codes and a image of what I thought.
#Composable
fun AppBarTestScreen() {
Column {
TopAppBar(
title = {
Row(Modifier.fillMaxWidth()) {
Text(
text = "〇〇〇〇〇〇",
modifier = Modifier.wrapContentWidth().widthIn(max = 210.dp),
maxLines = 1,
overflow = TextOverflow.Ellipsis,
softWrap = false
)
Text(
text = "'s Attribute",
modifier = Modifier.fillMaxWidth().clipToBounds(),
textAlign = TextAlign.Start,
overflow = TextOverflow.Clip,
softWrap = false
)
}
}
)
....
}
}
I tried a variety of Modifier functions and patterns
For now, I set a maximum width on the first Text. However, this works well when the device is in portrait orientation, but not in landscape orientation. Furthermore, the results are not clear when it comes to tablets and other devices.
If there is no other way, I will eventually have to rely on unstable external libraries, but is there any way to make what I want without them?

Apply the weight modifier to the 1st Text:
Row(Modifier.fillMaxWidth()) {
Text(
text = "〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇",
modifier = Modifier.weight(1f),
maxLines = 1,
overflow = TextOverflow.Ellipsis,
)
Text(text = "'s Attribute")
}
If you want to avoid to fill the whole space with the 1st Text use Modifier.weight(1f,false):
Text(
text = "〇〇〇〇〇〇〇",
modifier = Modifier.weight(1f,false),
maxLines = 1,
overflow = TextOverflow.Ellipsis,
)

How ellipsis only middle text in Android Compose?

I am developing an android app using the jetpack compose.
I want to make a UI like:
Row(
horizontalArrangement = Arrangement.SpaceBetween
) {
Row(
modifier = Modifier.weight(1F)
) {
Text(
text = name,
maxLines = 1,
overflow = TextOverflow.Ellipsis,
)
Spacer(modifier = Modifier.width(4.dp))
Text(
text = "($count)",
maxLines = 1,
)
}
Spacer(modifier = Modifier.width(16.dp))
Text(
text = timeText,
)
}
But actually it shows like:
the count information (1) is cut.
How can I show the count information and ellipsis the name text?
Should I use the compose-constraintlayout?

In such cases Modifier.weight should be used on the view, in this case it'll be measured after other siblings:
The parent will divide the vertical space remaining after measuring unweighted child elements and distribute it according to this weight.
If you don't need the view to take all the space available, add fill = false parameter.
Text(
text = name,
maxLines = 1,
overflow = TextOverflow.Ellipsis,
modifier = Modifier.weight(1f, fill = false)
)
Spacer(modifier = Modifier.width(4.dp))
Text(
text = "($count)",
maxLines = 1,
)

Always display placeholder and RTL input in TextField with Jetpack Compose

I want the placeholder not to disappear if I start typing in a field and it should be on the left side of the screen.
But the text input and cursor must be on the right.
An example is in the screenshot. Thanks!

Not the best solution, but it works.
Customizing the placeholder as per the requirement is not possible at this point in time. You have to create a completely customized TextField if that is an absolute requirement.
Note.
This is not a placeholder.
The positioning of the text is absolute, it should be adjusted according to the TextField size.
#Composable
fun FixedPlaceholder() {
var name by remember { mutableStateOf("") }
Box {
OutlinedTextField(
shape = MaterialTheme.shapes.medium,
value = name,
onValueChange = {
name = it
},
singleLine = true,
textStyle = LocalTextStyle.current.copy(
textAlign = TextAlign.End,
),
modifier = Modifier
.fillMaxWidth()
.padding(
horizontal = 16.dp,
vertical = 8.dp,
),
)
Text(
text = "to",
modifier = Modifier
.fillMaxWidth()
.padding(
start = 32.dp,
end = 32.dp,
top = 24.dp,
bottom = 8.dp
),
)
}
}

You don't need the placeholder, just set the leadingIcon property to:
leadingIcon={Text(text="To")}
In Compose, leadingIcon is a composable, and you can set it to anything you like.