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

ursus

10/14/2023, 5:10 PM
Copy code
AnimatedVisibility(
    visible = value != null
) {
    if (value != null) {
        Text(value)
    }
)
is this the correct way of using
AnimatedVisibility
with
Nullable
values? feels a bit janky with the inner null check again
v

vide

10/14/2023, 5:12 PM
You probably want to use
AnimatedContent
instead. It provides the state for the content lambda:
Copy code
AnimatedContent(state = value) {
    if (value != null) {
        Text(value)
    }
}
It uses
AnimatedVisibility
internally.
👍 2
u

ursus

10/14/2023, 5:57 PM
works thanks!
a follow up though I override the transitionSped as I want a fade in and out only via
transitionSpec { fadeIn() togerherWith fadeOut() }
but there is some sort of horizontal sliding going on am I doing it wrong?
v

vide

10/14/2023, 6:00 PM
can you post the complete call to animatedcontent?
don't remember the exact api right now, but you might have a size transition, try adding
using null
to the end
u

ursus

10/14/2023, 10:53 PM
@vide here, with a video
Copy code
Row(
    modifier = Modifier
        .fillMaxWidth(),
    horizontalArrangement = Arrangement.SpaceBetween,
    verticalAlignment = Alignment.CenterVertically
) {
    Text(
        text = fieldName,
        style = MaterialTheme.typography.caption,
        fontWeight = FontWeight.Medium
    )

    AnimatedContent(
        targetState = error,
        transitionSpec = { fadeIn() togetherWith fadeOut() },
        label = ""
    ) {
        if (it != null) {
            Text(
                text = it,
                color = MaterialTheme.colors.onErrorBackground,
                style = MaterialTheme.typography.caption,
                maxLines = 1
            )
        }
    }
}
as you can see there is this sliding & scaling effect as well, weird
whats funny is even if I change it to
Copy code
transitionSpec = { fadeIn(animationSpec = tween(1000)) togetherWith fadeOut(animationSpec = tween(1000)) }
i.e. just a longer duration, just to see it better, its the same speed as before, the slide scale is still there, same speed, but the concurrent fade is slower looks like a bug to me
Screen Recording 2023-10-15 at 01.06.36.mov
Copy code
Crossfade(targetState = error, label = "dwq") {
this works thought even thought I didnt even know about it, as crossfade seems like just a specification of
AnimatedContent/Visibility
transition, no? Why hardcode a single transition that way, when there are endless of combinations..weird api
a

Albert Chang

10/15/2023, 3:25 AM
You don't need the inner null check when using
AnimatedVisibility
. Actually adding that will break the animation.
v

vide

10/15/2023, 9:26 AM
@ursus did you try disabling the SizeTransform
Copy code
transitionSpec = { fadeIn() togetherWith fadeOut() using null }
5 Views