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.
Related
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,
)
}
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 button with text:
Button(
colors = ButtonDefaults.buttonColors(
backgroundColor = Color.Transparent,
contentColor = colors.primary,
),
elevation = null,
onClick = {},
border = BorderStroke(0.dp, Color.Transparent),
) {
Text(
text = stringResource(id = R.string.name),
fontSize = 12.sp,
textAlign = TextAlign.Right
)
}
Now text in button is centered. How can I move this text to right/end in this button. textAlign = TextAlign.Right not working.
You have to specify width for Button and Text.
Button(
colors = ButtonDefaults.buttonColors(
backgroundColor = Color.Transparent,
contentColor = colors.primary,
),
elevation = null,
onClick = {},
border = BorderStroke(0.dp, Color.Transparent),
modifier = Modifier.fillMaxWidth()
) {
Text(
text = stringResource(id = R.string.name),
fontSize = 12.sp,
textAlign = TextAlign.Right,
modifier = Modifier.fillMaxWidth(),
)
}
I have given full width for Button
modifier = Modifier.fillMaxWidth()
Also let your Text to occupy that parent width.
modifier = Modifier.fillMaxWidth()
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")
}
},
)
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