0
334
ViewsJetpack Compose - Centering Text
I am using Jetpack Compose to create a simple flash card. The idea is that you click the flash card and it will give you the answer. However, I am stuck on a basic problem.
Unfortunately... I could not even find the official documentation, so my learning style has been trusting the autocorrect system...
Anyway, I believe the issue is either with Box() or Text(). I have added a Align.CenterEnd for the Gravity of the box. However, this seems to be the only way for centering in terms for the box. On the other hand, Text() does not give any methods to do so (It has gravity but it doesnt seem to be changing anything)
A hand in the right direction would be amazing.
On a side note, I know this would be giving free answers. But how would I change the text of $question inside the on click. As I thought Composables refresh?... thus, should regenerate on the screen? maybe not?
Thanks!
val typography = MaterialTheme.typography
val context = ContextAmbient.current
var question = "How many Bananas should go in my Smoothie?"
Column(modifier = Modifier.padding(30.dp).then(Modifier.fillMaxWidth())
.then(Modifier.wrapContentSize(Alignment.Center))
.clickable(onClick = { Toast.makeText(context, "3 Bananas are needed!", Toast.LENGTH_LONG).show()} ) /*question = "3 Bananas required"*/
.clip(shape = RoundedCornerShape(16.dp))) {
Box(modifier = Modifier.preferredSize(350.dp)
.gravity(align = Alignment.CenterHorizontally)
.border(width = 4.dp, color = Gray, shape = RoundedCornerShape(16.dp)),
shape = RoundedCornerShape(2.dp),
backgroundColor = DarkGray,
gravity = Alignment.CenterEnd) {
Text("$question",
style = typography.h4,
)
}
}
2 answers
Answer question0
You can apply textAlign = TextAlign.Center in the Text:
Column(modifier = Modifier
.padding(30.dp)
.fillMaxWidth()
.wrapContentSize(Alignment.Center)
.clickable(onClick = { } ) /*question = "3 Bananas required"*/
.clip(shape = RoundedCornerShape(16.dp)),
) {
Box(modifier = Modifier
.preferredSize(350.dp)
.border(width = 4.dp, color = Gray, shape = RoundedCornerShape(16.dp)),
alignment = Alignment.Center) {
Text("Question 1 : How many cars are in the garage?",
Modifier.padding(16.dp),
textAlign = TextAlign.Center,
style = typography.h4,
)
About the text.
You can use something like:
var text by remember { mutableStateOf(("How many cars are in the garage?")) }
In your clickable item:
.clickable(onClick = { text= "After clicking"} )
in your Text:
Text(text,
textAlign = TextAlign.Center,
...)
It is just a simple. Instead of a static String you can use a dynamic structure to store and update the value.
0
You can use textAlign to align your text horizontal and wrapContentHeight to align your text vertical within Text composable
Example centering text (both horizontal and vertical) within Text
Text(
text = "How many cars are in the garage",
textAlign = TextAlign.Center, // make text center horizontal
modifier = Modifier
.width(150.dp)
.height(150.dp)
.background(Color.Cyan)
.wrapContentHeight() // make text center vertical
)
Example align bottom with center horizontal within Text
Text(
text = "How many cars are in the garage",
textAlign = TextAlign.Center, // make text center horizontal
modifier = Modifier
.width(150.dp)
.height(150.dp)
.background(Color.Cyan)
.wrapContentHeight(Alignment.Bottom) // align bottom
)
Example align bottom with center horizontal within a Box
Box(modifier = Modifier
.width(150.dp)
.height(150.dp)
.background(Color.Cyan),
contentAlignment = Alignment.BottomCenter
) {
Text(
text = "How many cars are in the garage",
textAlign = TextAlign.Center
)
}