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?
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'm trying to make a search bar using BasicTextField.
The default text color is black and I couldn't find any option to change the text color.
Also I need to change the text size, font and other attributes.
#Composable
fun MyBasicTextField(){
var text by remember { mutableStateOf("Hello") }
BasicTextField(
value = text,
onValueChange = {
text = it
},
decorationBox = { ... },
modifier = Modifier
.fillMaxWidth()
.background(Color.DarkGray, CircleShape)
.padding(10.dp)
)
}
If this is not possible through BasicTextField, is there any other approach to create similar view?
I have tried TextField but there was several problems like removing label, height, background...
You need textStyle parameter. If you prefer using default text style, use LocalTextStyle:
BasicTextField(
// ...
textStyle = LocalTextStyle.current.copy(color = Color.White)
)
Or you can use one of material styles:
BasicTextField(
// ...
textStyle = MaterialTheme.typography.body1.copy(color = Color.White)
)
In addition to other answer, this worked for me in adding textStyle property:
textStyle = TextStyle(
color = Color.White,
fontFamily = FontFamily.SansSerif,
fontSize = 14.sp,
textAlign = TextAlign.Center,
)
here is all the TextStyle attributes that you can set :
https://developer.android.com/reference/kotlin/androidx/compose/ui/text/TextStyle
public constructor TextStyle(
color: Color,
fontSize: TextUnit,
fontWeight: FontWeight?,
fontStyle: FontStyle?,
fontSynthesis: FontSynthesis?,
fontFamily: FontFamily?,
fontFeatureSettings: String?,
letterSpacing: TextUnit,
baselineShift: BaselineShift?,
textGeometricTransform: TextGeometricTransform?,
localeList: LocaleList?,
background: Color,
textDecoration: TextDecoration?,
shadow: Shadow?,
textAlign: TextAlign?,
textDirection: TextDirection?,
lineHeight: TextUnit,
textIndent: TextIndent?
)
If you want to use your current Material theme's colors so that it adapts to light and dark themes, you need to use LocalContentColor.current as well.
val localStyle = LocalTextStyle.current
val mergedStyle = localStyle.merge(TextStyle(color = LocalContentColor.current))
BasicTextField(
textStyle = mergedStyle,
cursorBrush = SolidColor(MaterialTheme.colorScheme.primary),
)
You probably also want to change the color of your cursor brush from the default black one. After some digging, I found that TextField uses the primary color (at least for Material 3).
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.
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()
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