Develop Reference

Select text to ellipsise in Jetpack Compose

Lest simplify my situation to the current:
Row(
modifier = Modifier
.background(Color.Red),
) {
Text(
text = ELLIPSIZE_THIS_TEXT,
maxLines = 1,
overflow = TextOverflow.Ellipsis,
)
Text(
text = LEAVE_THIS_TEXT_NOT_ELLIPSIZED,
maxLines = 1,
overflow = TextOverflow.Visible,
)
}
If I add weight(1f) to the first text modifier, it works as expected, but the Row took all the line. But my goal is to take only required place and if I have not enough place - ellipsize the first text.
And I need behavior from images 2 and 3.

You can use fill property for this . Setting it to false will result in wrapping the text if small and ellipsis text in case its bigger. Try this out .
Row(
modifier = modifier
.background(Color.Red).padding(10.dp),
) {
Text(
text = "Jetpack Compose Ui Tool-kit",
maxLines = 1,
overflow = TextOverflow.Ellipsis,
modifier=Modifier.weight(1f, fill = false)
)
Spacer(modifier = Modifier.width(12.dp))
Text(
text = "LEAVE_THIS_TEXT",
maxLines = 1,
overflow = TextOverflow.Visible,
)
}

How to align in Compose row with column

I have a Row with some text and different sizes, then in the end of the Row I have a Column where I have two Text so the output is something like this :
Perhaps the image is not the best one but as you can see there's a Row where I have two Text one with different size, and in the end I have a Column with two Text the problem I'm having is that if I use Column(modifier = Modifier.alignBy(LastBaseline)) it solves one problem that I was having, but creating a new one that is that is moving all the Column to the top, so what I'm looking for is without losing this Baseline (since I have different size this command works perfect to avoid playing with margin) I want to avoid moving this column, note that the first Text of the Column the best is that should have a alignTopToTop="secondText" but I don't know if it's possible.
There's the two options, one is if I add the alignBy(LastBaseline) make the column fixed and don't move anything just align the Text from the bottom and another one is, somehow add this constraint to the second Text of the Row to don't move the Column
My code
ConstraintLayout {
val (text1, text2) = createRefs()
Column(
horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier.constrainAs(text1) {
top.linkTo(parent.top)
start.linkTo(parent.start)
end.linkTo(parent.end)
bottom.linkTo(parent.bottom)
}
) {
Text(
text = "Hello",
style = TextStyle(
fontWeight = FontWeight.Bold,
fontSize = 12.sp,
lineHeight = 18.sp,
color = Black,
),
)
Row(verticalAlignment = Alignment.Bottom) {
Text(
text = "World",
style = TextStyle(
fontWeight = FontWeight.Bold,
fontSize = 12.sp,
lineHeight = 18.sp,
color = Black,
),
modifier = Modifier
.alignByBaseline()
)
Text(
text = "WORLD",
style = TextStyle(
fontWeight = FontWeight.Bold,
fontSize = 24.sp,
lineHeight = 18.sp,
color = Black,
),
modifier = Modifier
.alignByBaseline()
)
Column(modifier = Modifier.alignBy(LastBaseline)) {
Text(
text = "^",
style = TextStyle(
fontWeight = FontWeight.Bold,
fontSize = 12.sp,
lineHeight = 18.sp,
color = Black,
),
)
Text(
text = "^",
style = TextStyle(
fontWeight = FontWeight.Bold,
fontSize = 12.sp,
lineHeight = 18.sp,
color = Black,
),
)
}
}
}
}
The problem as you can see here
Is that when I do the modifier = Modifier.alignBy(LastBaseline) the column goes up and it makes to make this extra space between the text 2 and text 1, is there any way to avoid this column moving up?

Jetpack Compose - how to center text in ClickableText

In Jetpack Compose, when using Text, we can center text using TextAlign:
Text(
text = "How many cars are in the garage",
textAlign = TextAlign.Center
)
But if we're looking to get the position of a click within a Text composable, we use ClickableText:
ClickableText(
text = AnnotatedString("Click Me"),
onClick = { offset ->
Log.d("ClickableText", "$offset -th character is clicked.")
}
)
However I don't see how to center text in ClickableText? I can use gravity, but that will only center the component, not the text inside of it.

You can define the textAlign in the style parameter:
ClickableText(
text = AnnotatedString("Click Me"),
style = TextStyle(
textAlign = TextAlign.Center),
onClick = { offset ->
}
)

How to align two texts from different rows in Jetpack Compose

I have 3 texts in one row and then another three in another row inside a LazyColumn
I want to align the "text" in the center of the first row with "15.025" value in the second row
I've used
TextAlign.Center
on both of the Texts and
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically
set this on the Row but it doesn't work. Any tips please?
I'm pretty new in Compose, sorry for the basic question.

You can use Modifier.weight to make the width of "left view" equals to the width of "right view". It will make the middle text on each row always center.
Row(Modifier.fillMaxWidth()) {
Text(
text = "Start",
modifier = Modifier.weight(1f)
)
Text(
text = "Center",
textAlign = TextAlign.Center, // you can also fixed the width of center text
)
Text(
text = "End",
modifier = Modifier.weight(1f),
textAlign = TextAlign.End
)
}
If your text content is always short, you can also use Box to make the middle text always center.
Box(Modifier.fillMaxWidth()) {
Text(text = "Start", modifier = Modifier.align(Alignment.CenterStart))
Text(text = "Center", modifier = Modifier.align(Alignment.Center))
Text(text = "End", modifier = Modifier.align(Alignment.CenterEnd))
}

This is what I wanted to achieve and with the help of #Linh I did
Here's how I did it.
Column(Modifier.fillMaxSize()) {
Row(Modifier.fillMaxWidth()) {
Text(
text = "Start",
modifier = Modifier.weight(1.5f),
textAlign = TextAlign.Start
)
Text(
text = "Center",
modifier = Modifier.weight(1f),
textAlign = TextAlign.Start
)
Text(
text = "End",
modifier = Modifier.weight(1f),
textAlign = TextAlign.End
)
}
}
Thanks again for the help.

Jetpack Compose: Center Icon or Trailing elements in a ListItem

I'm trying to center the icon and trailing elements vertically using a ListItem. I'm not sure if it is possible or I need to drop the ListItem and use a combination of column/row instead.
I'm using something like:
ListItem(
Modifier.clickable(onClick = onClick),
icon = {
Box(
modifier = Modifier.fillMaxHeight(), contentAlignment = ALignment.Center
) {
Text(
text = dateUtil.formatTime(item.startTime),
style = TextStyle(
color = SnyDarkBlue,
fontSize = 14.sp,
fontFamily = oswaldFamily,
fontWeight = FontWeight.Bold,
letterSpacing = (-0.25).sp,
),
)
}
},
thanks in advance!

You can center both the icon and text sections using a Column:
ListItem(
modifier = Modifier
.fillMaxWidth()
.requiredHeight(50.dp)
.background(color = Color.Gray),
icon = {
Column(
modifier = Modifier
.fillMaxHeight(), verticalArrangement = Arrangement.Center
) {
Text(
text = "06:00 PM"
)
}
},
text = {
Column(
modifier = Modifier
.fillMaxHeight(), verticalArrangement = Arrangement.Center
) {
Text("Your item text goes here")
}
},
)