Animation feature request? Or already possible? I...

# compose-android

[Kevin Worth]

Animation feature request? Or already possible?

I've been trying to use one or a combination of the following: animateFloatAsState, AnimatedVisibility, AnimatedContent. I need to display ComposableA when objectA is not null, ComposableB when objectB is not null, or neither when they are both null. If it were always just one or the other (if there were no "neither case") then AnimatedContent would suit me just fine. The problem is, when I transition from either one of them visible to neither one visible, the visible one just disappears suddenly. But I need it to fade out. Is there a good, clean way to do this and I'm just not seeing it, or should I file a feature request?

[Ian Lake]

What makes you think AnimatedContent can't handle three states, with one showing nothing at all?

[Kevin Worth]

I do still see a problem, though, and I think I'm starting to understand better how AnimatedContent works. I first did this with 3 states, as you suggested, but I can also demonstrate with just the two:

fun Parent() {
  AnimatedContent(
    targetState = objectA != null,
  ) { showObjectA ->
    if (showObjectA) {
      if (objectA != null) {
        ComposableA(objectA)
      } else {
        Text("A: pretend empty")
      }
    } else {
      if (objectB != null) {
        ComposableB(objectB)
      } else {
        Text("B: pretend empty")
      }
    }
  }
}

In this example, we:
• start with objectA not null, so we show ComposableA
• Then objectB becomes not null, so the fadeOut starts but ComposableA disappears suddenly and the Text("A: pretend empty") shows suddenly.
• So now, Text("A: pretend empty") is the thing fading out, whereas we want ComposableA to be fading
• Then the fadeIn to show ComposableB starts
Therefore, it stands to reason when we transition from either A or B being not null to the "neither case"(both are null), it's suddenly removing the visible composable, is then suddenly showing nothing, and does a fadeOut (on that nothing).

@Ian Lake any thoughts on whether this should be expected and/or strategies for using the APIs in a better way? Again, the same problem happens when using a 3rd state to show nothing.

[Ian Lake]

Your targetState needs to be everything you need inside the lambda - that way AnimatedContent captures the values you pass in, rather than you using live values from outside the AnimatedContent (which will indeed instantly be null)

[Ian Lake]

So your target state should be a Pair<TypeA?, TypeB?> or preferably just a data class

[Kevin Worth]

I wish there were more examples/samples online showing that targetState can and should hold everything you need (and maybe I've just missed them...). Perhaps I should create an SO question and answer. Thank you for your time!

[Ian Lake]

Yeah, that fact is mentioned both in the guide for using AnimatedContent in just a single line:

Note that you should always use the lambda parameter and reflect it to the content.

But more in depth on the actual AnimatedContent KDocs:

IMPORTANT: The targetState parameter for the content lambda should always be taken into account in deciding what composable function to return as the content for that state. This is critical to ensure a successful lookup of all the incoming and outgoing content during content transform.

[Ian Lake]

But I suspect both of those lines go over your head until you actually run into it in person 😅