https://kotlinlang.org logo
Channels
Powered by
#compose
Title
# compose
g

Guilherme Delgado

09/25/2023, 12:07 PM
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 🧵
this works (text gets centered, but not with the full parent’s heigh):
Copy code
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):
Copy code
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
        )
    }
}
s

Stylianos Gakis

09/25/2023, 12:16 PM
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.
g

Guilherme Delgado

09/25/2023, 12:20 PM
if I add
Copy code
modifier = Modifier.fillMaxSize() <<<<<<<<<<<<<<<<<<<< same output
it does yes (if I instead add to Text same behaviour).
s

Stylianos Gakis

09/25/2023, 12:21 PM
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?
g

Guilherme Delgado

09/25/2023, 12:22 PM
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:
the yellow is with
Copy code
modifier = Modifier.fillMaxSize().border(1.dp, Color.Yellow)
the blue (added by the preview) is with:
Copy code
modifier = Modifier.border(1.dp, Color.Yellow)
Screenshot 2023-09-25 at 13.22.15.png,Screenshot 2023-09-25 at 13.22.45.png
s

Stylianos Gakis

09/25/2023, 12:27 PM
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
g

Guilherme Delgado

09/25/2023, 12:28 PM
how can I solve that?
s

Stylianos Gakis

09/25/2023, 12:28 PM
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?
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
g

Guilherme Delgado

09/25/2023, 12:30 PM
😅 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
s

Stylianos Gakis

09/25/2023, 12:30 PM
Why does the text need to be 
fillMaxSize
?
g

Guilherme Delgado

09/25/2023, 12:31 PM
for an animation purpose. If it does not you can see the text being clipped (screenshot 2)
s

Stylianos Gakis

09/25/2023, 12:32 PM
Could you then use an animation which does not clip the content it animates? But makes it fade away perhaps?
g

Guilherme Delgado

09/25/2023, 12:32 PM
well, I really wanted to translate y using all it’s parent heigh, but if not possible yeah I can live with that
s

Stylianos Gakis

09/25/2023, 12:32 PM
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?
g

Guilherme Delgado

09/25/2023, 12:33 PM
aaaaah that’s smart!
let me see if that’s the solution 🙂
s

Stylianos Gakis

09/25/2023, 12:33 PM
Copy code
AnimatedContent(
  targetState = value,
  transitionSpec = ...,
  modifier = Modifier.matchParentSize(),
) {
  Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
    Text(
      text = it,
      maxLines = 1,
      fontSize = 18.sp,
      textAlign = TextAlign.Center,
    )
  }
}
Yeah give this a shot, might just work!
g

Guilherme Delgado

09/25/2023, 12:33 PM
yeah yeah nice thought!
let me test it
🦜 1
yup! touché!
thanks mate 🙂
s

Stylianos Gakis

09/25/2023, 12:35 PM
Heh, nice, glad I could help 😊
❤️ 1
image.png
😅 2
g

Guilherme Delgado

09/25/2023, 12:37 PM
ahahah
Powered by