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

Vaibhav Jaiswal

03/11/2024, 12:45 PM
How can i create a ExpandHorizontal animation which expands on both sides expanding from the center? Tried this but it still expands from the start
Copy code
AnimatedVisibility(
    visible = activeTabConfig == tab,
    enter = fadeIn() + expandHorizontally(expandFrom = Alignment.CenterHorizontally),
    exit = shrinkHorizontally(shrinkTowards = Alignment.CenterHorizontally) + fadeOut()
)
s

Stylianos Gakis

03/11/2024, 2:07 PM
How does it actually look like? I’ve had a case where it was doing what I wanted it, but didn’t realize till I added
clip = false
and saw it really do what I wanted.
v

Vaibhav Jaiswal

03/11/2024, 2:11 PM
It expands left to right
s

Stylianos Gakis

03/11/2024, 2:14 PM
Is it that the size it was occupying before was too small already, so as the new content comes in, you don’t see just your animation, but also the container itself trying to expand to cover the right size?
v

Vaibhav Jaiswal

03/11/2024, 2:19 PM
Its an indicator made using
Divider
Shown on top of bottom nav item Both having
fillMaxWidth()
s

Stylianos Gakis

03/11/2024, 2:22 PM
I feel like we’ve had this conversation before, how it’s impossible to understand such animation related problems without actually looking at the thing we are talking about 😅
v

Vaibhav Jaiswal

03/11/2024, 2:22 PM
Copy code
Box(modifier = Modifier.weight(1f)) {
        androidx.compose.animation.AnimatedVisibility(
            visible = activeTabConfig == tab,
            enter = fadeIn() + expandHorizontally(expandFrom = Alignment.CenterHorizontally),
            exit = shrinkHorizontally(shrinkTowards = Alignment.CenterHorizontally) + fadeOut()
        ) {
            Divider(
                color = MaterialTheme.colorScheme.onPrimaryContainer,
                thickness = 3.dp,
                modifier = Modifier.fillMaxWidth().align(Alignment.TopCenter)
            )
        }

        NavigationBarItem(.......)
}
s

Stylianos Gakis

03/11/2024, 2:24 PM
I was thinking of a recording too
v

Vaibhav Jaiswal

03/11/2024, 2:25 PM
Screen Recording 2024-03-11 at 7.55.36 PM.mov
Moved the alignment modifier from Divider to
AnimatedVisibility
and it worked
Thanks for assisting
👍 1
s

Stylianos Gakis

03/11/2024, 2:30 PM
rubber duck
2 Views