https://kotlinlang.org logo
#compose
Title
# compose
g

Grigorii Yurkov

11/03/2020, 6:35 PM
Row
doesn't want to get recomposed even after his child
Text
become bigger. Should I recompose it manually? If yes, how can I do it?
a

Afzal Najam

11/03/2020, 6:36 PM
That sounds like a bug, doesn't it?
g

Grigorii Yurkov

11/03/2020, 6:37 PM
I think it's an optimisation. But looks like a bug
a

Adam Powell

11/03/2020, 7:03 PM
can you describe the case a bit more? What caused the
Text
to become bigger? Did the content of the
Text
change or something else?
I ask because layout and composition are different processes that invalidate differently
it is quite valid and expected for a
Row
to not recompose if the layout size of one of its children changes. It will relayout, but not recompose.
g

Grigorii Yurkov

11/03/2020, 7:09 PM
I replace text in
Text
with more symbols
a

Adam Powell

11/03/2020, 7:10 PM
Can you post the code in question?
g

Grigorii Yurkov

11/03/2020, 7:12 PM
Ok, I will try to create the test one
👍 1
Copy code
@OptIn(ExperimentalAnimationApi::class)
@Preview
@Composable
fun MyTest() {
    var text by remember { mutableStateOf("0") }
    var visible by remember { mutableStateOf(false) }
    TestTheme {
        Row(modifier = Modifier.fillMaxWidth().height(30.dp)) {
            Spacer(
                modifier = Modifier.weight(1f).background(Color.Red).height(30.dp).clickable(
                    onClick = {
                        visible = true
                    }
                )
            )
            AnimatedVisibility(visible = visible) {
                Text(text, modifier = Modifier.clickable {
                    text += "0"
                })
            }
        }
    }
}
I finally finished. That was much harder that I thought
I figured out that if
visible
init value is
true
, all work fine, but if it is
false
and than we set it to true, it doesn't work fine
a

Adam Powell

11/03/2020, 8:10 PM
silly question, what is, "fine" in this context? Based on reading the code above I would expect the contents of the
AnimatedVisibility
to recompose for the new text, and the row to remeasure+relayout for the changed text content, but not recompose the row.
Is relayout not happening correctly?
g

Grigorii Yurkov

11/03/2020, 8:11 PM
Yes, after clicking on
Text
Spacer
remains the same size
a

Adam Powell

11/03/2020, 8:15 PM
hmm, @Doris Liu @George Mount maybe something in
AnimatedVisibility
?
g

Grigorii Yurkov

11/03/2020, 8:20 PM
It's definitely a bug, because it has different behaviour with same "state"
Switch visibility to
false
and back to
true
must not change behaviour
I hope you understand what I'm trying to say
d

Doris Liu

11/03/2020, 8:31 PM
This does seem like a bug in
AnimatedVisibility
. Could you file a bug please?
👌 1
Out of curiosity, do you expect the size change (from text change) to be animated in
AnimatedVisibilty
?
g

Grigorii Yurkov

11/03/2020, 8:33 PM
I do not
d

Doris Liu

11/03/2020, 8:37 PM
Cool. Me neither. 🙂
g

Grigorii Yurkov

11/03/2020, 8:40 PM
But know I wonder how to do it 🙂
d

Doris Liu

11/03/2020, 8:49 PM
I'd suggest
Modifier.animateContentSize()
for that purpose. 🙂
🙏 1
More specifically:
Copy code
Text(text, modifier = Modifier.clickable {
                    text += "0"
                }.animateContentSize() )
h

Hitanshu Dhawan

11/07/2020, 4:33 PM
Hi @Doris Liu, I wanted to animated my Text composable, so stumbled upon this thread. I the video below I am using PropKeys for alpha, size, color of components, but for text I’m using
Modifier.animateContentSize()
The problem I am facing is that the text is changed first and then the size changes, see the transition from Added to Add. Is this the intended behaviour? What’s the best way to achieve this interaction? Can I use PropKeys here?
d

Doris Liu

11/07/2020, 8:08 PM
Yes. The intended behavior is to change the content (in this case the text) immediately and animate the container size afterwards. Is there a specific effect you are hoping to achieve?
The best way to achieve this interaction is to use propkeys for the colors, and alpha, and perhaps a custom
AnimationSpec
in
animateContentSize
if you need to coordinate them. Alternatively, you could consider animating the check mark in
AnimatedVisibility
using fade and expand/shrink to add a little more dynamic to the animation. 🙂
h

Hitanshu Dhawan

11/07/2020, 8:19 PM
Yes, I have used propKeys for color and alpha, what I want is that when we unselect the button, it animates smoothly but right now it is first changing ADDED to ADD and then animating it. I want ADDED to smoothly animate to ADD. Basically reverse of when the above interaction goes from ADD to ADDED.
Great suggestion on check mark animation, will surely try that too 🙂
The intended behavior is to change the content (in this case the text) immediately and animate the container size afterwards.
In my case I may want the content to change afterwards, is this achievable? or any other way to achieve this interaction?
d

Doris Liu

11/07/2020, 8:27 PM
The trouble is we don't know the target size to animate to without changing the text. We might have a different API to support that going forward. For now, here's an unconventional idea: put "ED" in a separate text and animate that in/out using
AnimatedVisibility
😂
h

Hitanshu Dhawan

11/07/2020, 8:45 PM
Hahaha, just tried this, works like a charm 😄
👍 1
4 Views