IssueTracker

A test video is attached below.

Notes:

• Video is slowed to 10% to properly show the behavior in slow motion
• That white background (which I annotated with why this???) appears only on EnterTransition, and not on ExitTransition

Hey Connie, looks like this is intended. wdyt?

Doris, is the expected behavior? When visibility is animated via AnimatedVisibility, is the composable immediately added or removed from the view hierarchy / semantic tree?

Connie,

When becoming visible, AnimatedVisibility would immediately add the new content. However, when becoming invisible, it animates out the content first before removing the content. In other words, it doesn't immediately remove the content fom the layout tree when visibility is toggled to false.

is the expected behavior?

I don't expect to see flickering because the content is being faded in and out in the snippet in comment #1.

Hi @hu...@gmail.com, Thanks for the bug report.

Could you share how you're using contentPadding in the content?

This is interesting we apply the padding immediately, so maybe you'll need to animate the padding instead of using a slide animation

I've created a minimal reproducible example for you:

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        enableEdgeToEdge()
        setContent {
            TestAppTheme {
                var showBottomBar by remember { mutableStateOf(true) }
                val scrollConnection = rememberVisibilityScrollConnection { showBottomBar = it }

                Scaffold(
                    modifier = Modifier.nestedScroll(scrollConnection),
                    bottomBar = {
                        AnimatedVisibility(
                            visible = showBottomBar,
                            enter = slideInVertically { it } + fadeIn(),
                            exit = slideOutVertically { it } + fadeOut()
                        ) {
                            NavigationBar(containerColor = Color.Yellow) {
                                Text(
                                    "Navigation Bar",
                                    textAlign = TextAlign.Center,
                                    modifier = Modifier.fillMaxWidth()
                                )
                            }
                        }
                    }
                ) {
                    Box(
                        contentAlignment = Alignment.Center,
                        modifier = Modifier
                            .padding(it)
                            .fillMaxSize()
                    ) {
                        LazyColumn(
                            modifier = Modifier
                        ) {
                            items(100) {
                                Text(
                                    "Item $it",
                                    textAlign = TextAlign.Center,
                                    modifier = Modifier
                                        .fillMaxWidth()
                                        .clip(CircleShape)
                                        .background(Color.Red)
                                        .padding(20.dp)
                                )
                            }
                        }
                    }
                }
            }
        }
    }

}

@Composable
fun rememberVisibilityScrollConnection(
    thresholdVisible: Float = 10f,
    thresholdNotVisible: Float = -1f,
    onVisibilityChanged: (Boolean) -> Unit,
): NestedScrollConnection {
    return remember {
        object : NestedScrollConnection {

            override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
                if (available.x == 0f && available.y != 0f) {
                    val isVisible = available.y > thresholdVisible
                    val isNotVisible = available.y < thresholdNotVisible
                    if (isVisible) {
                        onVisibilityChanged(true)
                    } else if (isNotVisible) {
                        onVisibilityChanged(false)
                    }
                }
                return Offset.Zero
            }
        }
    }
}

After doing some testing, I found two more interesting things:

1. If you change the enter and exit animations by adding additional expand/shrinkVertically -> Issue is resolved

                enter = slideInVertically { it } + fadeIn() + expandVertically(),
                exit = slideOutVertically { it } + fadeOut() + shrinkVertically()

2. If you wrap the whole Scaffold under SharedTransitionLayout -> Above animation (in point 1) also doesn't work.

        setContent {
            TestAppTheme {
                SharedTransitionLayout {
                    var showBottomBar by remember { mutableStateOf(true) }
                    val scrollConnection = rememberVisibilityScrollConnection { showBottomBar = it }

                    Scaffold(...) {
                        // Rest of the code
                    }
                }
            }
        }