Sobes.tech
Junior — Middle

Have you worked with the Collapsing Toolbar component in Jetpack Compose?

sobes.tech AI

Answer from AI

Jetpack Compose does not have a built-in Collapsing Toolbar component like in traditional Android with CoordinatorLayout and AppBarLayout. However, similar behavior can be achieved using LazyColumn or NestedScrollConnection, by tracking scroll and adjusting the size or visibility of the top component.

Here's a simplified example of implementing a collapsing toolbar:

var toolbarHeight by remember { mutableStateOf(200.dp) }
val scrollState = rememberLazyListState()

LaunchedEffect(scrollState.firstVisibleItemScrollOffset) {
    toolbarHeight = (200 - scrollState.firstVisibleItemScrollOffset.dp).coerceAtLeast(56.dp)
}

Column {
    Box(modifier = Modifier
        .height(toolbarHeight)
        .fillMaxWidth()
        .background(Color.Blue)) {
        Text("Collapsing Toolbar", color = Color.White, modifier = Modifier.align(Alignment.Center))
    }
    LazyColumn(state = scrollState) {
        items(100) { index ->
            Text("Item #$index", modifier = Modifier.padding(16.dp))
        }
    }
}

For more complex cases, you can use libraries or create custom solutions with NestedScroll APIs.

Have you worked with the Collapsing Toolbar component… - sobes.tech