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,
)
}
Related
I have a problem with letterSpacing in Compose.
When I set TextAlign.End, TextOverflow.Ellipsis and style with letterSpacing text gets cut off.
How can I fix this?
code:
val textStyleWithoutLetterSpacing = TextStyle()
val textStyleWithLetterSpacing = TextStyle(letterSpacing = 1.sp)
#Composable
fun Sample() {
Column {
Text(
text = "1234567890 1234567890 1234567890",
textAlign = TextAlign.End,
overflow = TextOverflow.Ellipsis,
maxLines = 1,
style = textStyleWithoutLetterSpacing
)
Text(
text = "1234567890 1234567890 1234567890",
textAlign = TextAlign.End,
overflow = TextOverflow.Ellipsis,
maxLines = 1,
style = textStyleWithLetterSpacing
)
}
}
result:
I faced a similar issue which I believe has to do with combining textAlign = TextAlign.End with overflow = TextOverflow.Ellipsis. I have just had a play with you sample and came up with this (which is similar to how I solved my problem):
val textStyleWithoutLetterSpacing = TextStyle()
val textStyleWithLetterSpacing = TextStyle(letterSpacing = 1.sp)
#Composable
fun Sample() {
Column {
Text(
text = "1234567890 1234567890 1234567890",
textAlign = TextAlign.End,
overflow = TextOverflow.Ellipsis,
maxLines = 1,
style = textStyleWithoutLetterSpacing
)
Box(contentAlignment = Alignment.CenterEnd) {
Text(
text = "1234567890 1234567890 1234567890",
overflow = TextOverflow.Ellipsis,
maxLines = 1,
style = textStyleWithLetterSpacing
)
}
}
}
In essence, I delegated the alignment of the text to the Box component and that seems to bypass the bug in the compose library (v1.2.1 at the time of writing this answer).
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?
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.
TextField(
value = newCommentState.value,
textStyle = TextStyle(
fontSize = 16.sp,
color = MaterialTheme.colors.primary
),
onValueChange = { newCommentState.value = it },
colors = TextFieldDefaults.textFieldColors(
backgroundColor = Color.White
),
keyboardOptions = KeyboardOptions(capitalization = KeyboardCapitalization.Sentences),
placeholder = {
Text(
"Add your comment",
color = colorResource(R.color.disabled_gray)
)
}
)
Spacer(modifier = Modifier.width(8.dp))
ClickableText(
modifier = Modifier.defaultMinSize(70.dp),
text = AnnotatedString("Post"),
style = TextStyle(
color = if (newCommentState.value.text.isNullOrEmpty())
colorResource(
R.color.disabled_gray
) else colorResource(R.color.green),
fontSize = 20.sp,
),
onClick = {
if (newCommentState.value.text.isNullOrEmpty())
Toast.makeText(
context,
"Cant post empty comment!",
Toast.LENGTH_SHORT
).show()
else
coroutineScope.launch { createComment(context) }
},
)
I have written this code for a textfield that takes in user comments and has a Clickable Text "Post" next to it. The text "Post" gets pushed and wrap when the textfield has text outside the width.
I want the text to get wrapped without hitting the "Post" .
You can solve this by adding Modifier.weight(1f) to your TextField. From documentation:
The parent will divide the horizontal space remaining after measuring unweighted child elements and distribute it according to this weight.
You may either give your views the proper weight like this answer as an example or you can only give the TextField only weight, and the other views to be without weight which as per documentation will do the below quote .
The parent will divide the horizontal space remaining after measuring unweighted child elements and distribute it according to this weight
Is it possilble as of 1.0.0-alpha03 to align text center vertically without nesting components Stack -> Text
Text(
modifier = Modifier
.size(150.dp, 30.dp)
.background(Colors.ChipGray, RoundedCornerShape(50)),
textAlign = TextAlign.Center,
text = start.value.format(DateTimeFormatter.ofPattern("dd. MM. HH:mm")),
)
In General, it is possible but I would not suggest it.
You could use offset to shift the text relative to the background by half of the font size, but I am not sure if you can access the height of the used font here.
Text(
text = start.value.format(DateTimeFormatter.ofPattern("dd. MM. HH:mm")),
textAlign = TextAlign.Center,
modifier = Modifier
.size(150.dp, 30.dp)
.background(Color.Gray, RoundedCornerShape(50))
.offset(y = fontHeightHalf)
)
Use the stack instead, like:
Stack (
alignment = Alignment.Center,
modifier = Modifier
.size(150.dp, 30.dp)
.background(Color.Gray, RoundedCornerShape(50)),
) {
Text(
text = start.value.format(DateTimeFormatter.ofPattern("dd. MM. HH:mm")),
textAlign = TextAlign.Center
)
}
Edit: Updated version to 1.0.0-alpha03