androidkotlinandroid-jetpack-composeandroid-jetpackandroid-jetpack-compose-material3

Jetpack Compose collapsing toolbar


I can't find any documents on the matter, is there something similar to a CollapsingToolbar in Compose?

All I found was a mention of it here, but nothing on how to set it up


Solution

  • Jetpack Compose implementation of Material Design 3 includes 4 types of Top App Bars (https://m3.material.io/components/top-app-bar/implementation):

    https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary

    They all have a scrollBehavior parameter, which can be used for collapsing the toolbar. There are 3 basic types of scroll behavior in the library:

    https://developer.android.com/reference/kotlin/androidx/compose/material3/TopAppBarDefaults

    Note: This API is annotated as experimental at the moment.

    Sample usage:

    @OptIn(ExperimentalMaterial3Api::class)
    @Composable
    fun Test() {
        val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior(rememberTopAppBarState())
        Scaffold(
            modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
            topBar = {
                MediumTopAppBar(
                    title = { Text(text = "Scroll Behavior Test") },
                    navigationIcon = {
                        IconButton(onClick = { /*TODO*/ }) {
                            Icon(imageVector = Icons.Default.Menu, contentDescription = "")
                        }
                    },
                    scrollBehavior = scrollBehavior
                )
            }
        ) {
            LazyColumn(modifier = Modifier.fillMaxWidth()) {
                items((1..50).toList()) { item ->
                    Text(modifier = Modifier.padding(8.dp), text = "Item $item")
                }
            }
        }
    }