Hello! I need to have a Text centered inside a Box...

# compose

[Guilherme Delgado]

Hello!
I need to have a Text centered inside a Box and I can only achieve that if the Text does not have fillMaxHeight. But for an animation purpose I would like to have the text fill the parents fullHeight. How can I achieve that? For some reason I feel this is a basic question 😓 but I’m loosing to much time with no luck. More in 🧵

[Guilherme Delgado]

this works (text gets centered, but not with the full parent’s heigh):

Box(
    modifier = Modifier
        .weight(1f)
        .fillMaxSize()
        .background(Color.White),
    contentAlignment = Alignment.Center
) {
    AnimatedContent(
        targetState = value,
        transitionSpec = ...
    ) {
        Text(
            text = it,
            maxLines = 1,
            fontSize = 18.sp,
        )
    }
}

this does not (it will stay on top instead on center):

Box(
    modifier = Modifier
        .weight(1f)
        .fillMaxSize()
        .background(Color.White),
    contentAlignment = Alignment.Center
) {
    AnimatedContent(
        targetState = value,
        transitionSpec = ...,
        modifier = Modifier.fillMaxSize() <<<<<<<<<<<<<<<<<<<< same output
    ) {
        Text(
            text = it,
            maxLines = 1,
            fontSize = 18.sp,
            textAlign = TextAlign.Center,
            modifier = Modifier.fillMaxSize() <<<<<<<<<<<<<<<<<<<< same output
        )
    }
}

[Stylianos Gakis]

Does AnimatedContent take the exact same size as Box() this way?
Try adding some borders around your composables to see what space they take up instead, I can’t deduce just from the code what’s going wrong.

[Guilherme Delgado]

if I add

modifier = Modifier.fillMaxSize() <<<<<<<<<<<<<<<<<<<< same output

it does yes (if I instead add to Text same behaviour).

[Stylianos Gakis]

I don’t understand what you mean by “same behavior”
Could you attach some screenshots of what you want and what you get instead?
And did you try adding borders to see the real size of your components?

[Guilherme Delgado]

Yes I did add the boarders to check, and the same behaviour means, the modifier can be applied to Text or AnimatedContent that the result is the same. Heres a screenshot:

[Guilherme Delgado]

the yellow is with

modifier = Modifier.fillMaxSize().border(1.dp, Color.Yellow)

the blue (added by the preview) is with:

modifier = Modifier.border(1.dp, Color.Yellow)

[Guilherme Delgado]

Screenshot 2023-09-25 at 13.22.15.png,Screenshot 2023-09-25 at 13.22.45.png

[Stylianos Gakis]

Yep, so the text takes up the entire size of the containing box.
And then you ask it to be center aligned, so it does exactly that, it center aligns the text.
But it still is attached to the top, since that’s what Text does when it has a lot of height available to it, it goes top-down

[Guilherme Delgado]

how can I solve that?

[Stylianos Gakis]

If you want the text to be center aligned vertically too, you need it to take only as much height as it needs to to render the text that it needs to render.
In this case, why not do matchParentSize() on the AnimatedContent, and have the text without any size modifiers, and rely on contentAlignment from AnimatedContent to put the text at the center?

[Stylianos Gakis]

What is there to solve? What are you trying to achieve in the first place 😅
You haven’t made that clear to me at least

[Guilherme Delgado]

😅 sorry if I’m not clear. I want the Text to have fillMaxSize() and to match it’s parent (screenshot 1). But then I want the text to became centered (it only has 1 line) both horizontally and vertically. Is it possible? I can hack it with padding tops, but I want to avoid that

[Stylianos Gakis]

Why does the text need to be fillMaxSize?

[Guilherme Delgado]

for an animation purpose. If it does not you can see the text being clipped (screenshot 2)

[Stylianos Gakis]

Could you then use an animation which does not clip the content it animates? But makes it fade away perhaps?

[Guilherme Delgado]

well, I really wanted to translate y using all it’s parent heigh, but if not possible yeah I can live with that

[Stylianos Gakis]

Or could you inside the Animated content, have a Box which is matching the size, and this is the one which does get animated. And that boxitself also wraps the text inside it, which deos not have fillMaxSize?

[Guilherme Delgado]

aaaaah that’s smart!

[Guilherme Delgado]

let me see if that’s the solution 🙂

[Stylianos Gakis]

AnimatedContent(
  targetState = value,
  transitionSpec = ...,
  modifier = Modifier.matchParentSize(),
) {
  Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
    Text(
      text = it,
      maxLines = 1,
      fontSize = 18.sp,
      textAlign = TextAlign.Center,
    )
  }
}

[Stylianos Gakis]

Yeah give this a shot, might just work!

[Guilherme Delgado]

yeah yeah nice thought!

[Guilherme Delgado]

let me test it

[Guilherme Delgado]

yup! touché!

[Guilherme Delgado]

thanks mate 🙂

[Stylianos Gakis]

Heh, nice, glad I could help 😊

[Stylianos Gakis]

image.png

[Guilherme Delgado]

ahahah