Prevent top app bar compress effect while scrolling within a Lazy lists without first item visible

Question

I have a top bar which disappears while scrolling down and shows up while moving up within a lazy column. It is an example from android developers

I was playing with the sample for a while and I added a box over the list.

@OptIn(ExperimentalMaterial3Api::class)
@Preview
@Composable
fun TopAppBarSample() {
    val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()
    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            TopAppBar(
                title = {
                    Text(
                        "TopAppBar",
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                },
                navigationIcon = {
                    IconButton(onClick = { /* doSomething() */ }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "Localized description"
                        )
                    }
                },
                actions = {
                    // RowScope here, so these icons will be placed horizontally
                    IconButton(onClick = { /* doSomething() */ }) {
                        Icon(
                            imageVector = Icons.Filled.Favorite,
                            contentDescription = "Localized description"
                        )
                    }
                    IconButton(onClick = { /* doSomething() */ }) {
                        Icon(
                            imageVector = Icons.Filled.Favorite,
                            contentDescription = "Localized description"
                        )
                    }
                },
                scrollBehavior = scrollBehavior
            )
        },
        content = { innerPadding ->
            Column(modifier = Modifier.padding(paddingValues = innerPadding)) {
                Box(
                    modifier = Modifier
                        .size(200.dp)
                        .background(Color.Gray)
                ) {

                }

                LazyColumn(
                    contentPadding = innerPadding,
                    verticalArrangement = Arrangement.spacedBy(8.dp)
                ) {
                    val list = (0..75).map { it.toString() }
                    items(count = list.size) {
                        Text(
                            text = list[it],
                            style = MaterialTheme.typography.bodyLarge,
                            modifier = Modifier
                                .fillMaxWidth()
                                .padding(horizontal = 16.dp)
                        )
                    }
                }
            }
        }
    )
}

While it works, I want to make it such that if I am scrolling back up within the list, the app bar would only display back if the first item is visible again on the list instead of while scrolling back up at any point.

This is what I am trying to avoid unless '0' is visible. Can someone guide me through?

Answer 1

This seems to be what you're looking for!

scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()