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.