Way to use CollapsingToolbar/CollapsingToolbarScaffold with Compose Scaffold?
Opened this issue · 3 comments
Hi there!
Great library, thanks so much for building this out. I'm currently trying to implement this in my application, and can't seem to figure out how to get the CollapsingToolbar to work with a regular Compose Scaffold.
I have a TopAppBar, BottomAppBar, and FloatingActionButton, so using the Scaffold included by default in Compose is somewhat necessary. Is there a way to wrap the TopAppBar in a CollapsingToolbar and get it to scroll correctly? I can't seem to get it to work.
Here's what I have so far:
val scaffoldState = rememberScaffoldState(
rememberDrawerState(initialValue = DrawerValue.Closed)
)
val collapsingToolbarState = rememberCollapsingToolbarState()
Scaffold(
scaffoldState = scaffoldState,
topBar = {
CollapsingToolbar(
collapsingToolbarState = collapsingToolbarState
) {
TopAppBar(
backgroundColor = MaterialTheme.colors.background,
title = {
Text(text = "TopAppBar")
}
)
Box(
modifier = Modifier
.fillMaxWidth()
.height(150.dp)
.parallax(0.5f)
.graphicsLayer {
alpha = collapsingToolbarState.progress
}
) {
Image(
painter = painterResource(id = R.drawable.ic_launcher_foreground),
contentDescription = null
)
}
}
},
floatingActionButtonPosition = FabPosition.End,
floatingActionButton = {
FloatingActionButton(onClick = { /*TODO*/ }) {
Text("X")
}
},
drawerContent = {
Text(text = "drawerContent")
},
bottomBar = {
BottomNavigation(
backgroundColor = MaterialTheme.colors.background
) {
.....
}
},
) {
LazyColumn(
modifier = Modifier.fillMaxWidth()
) {
items(100) {
Text(
text = "Item $it",
modifier = Modifier.padding(8.dp)
)
}
}
}
However, the expanding/collapsing doesn't seem to work. Here's a video:
Screen.Recording.2022-02-24.at.10.54.37.AM.mov
Thanks in advance for the help!
Is there a problem if you leave topBar
empty and wrap Scaffold
with CollapsingToolbarScaffold
?
Hey @onebone , sorry for the delay in response. This kind of fixes the issue, but now the bottom nav bar and fab don't stay anchored to the bottom, they scroll with the collapsing toolbar. I'll attach another video (sorry, from another example so things look a bit different).
Here's the code:
val state = rememberCollapsingToolbarScaffoldState()
var enabled by remember { mutableStateOf(true) }
CollapsingToolbarScaffold(
modifier = Modifier.fillMaxSize(),
state = state,
scrollStrategy = ScrollStrategy.ExitUntilCollapsed,
enabled = enabled,
toolbar = {
// In between 30 and 18 (30 expanded, 18 collapsed)
val textSize = (18 + (30 - 18) * state.toolbarState.progress).sp
Box(
modifier = Modifier
.background(MaterialTheme.colors.primary)
.fillMaxWidth()
.height(150.dp)
.parallax(0.5f)
.graphicsLayer {
alpha = state.toolbarState.progress
}
) {
Image(
modifier = Modifier.padding(16.dp),
painter = painterResource(id = R.drawable.ic_launcher_foreground),
contentDescription = null
)
}
Text(
text = "Title",
modifier = Modifier
.padding(60.dp, 16.dp, 16.dp, 16.dp)
.graphicsLayer {
alpha = 1 - state.toolbarState.progress
},
color = Color.White,
fontSize = 18.sp
)
}
) {
Scaffold(
scaffoldState = rememberScaffoldState(),
topBar = { },
floatingActionButtonPosition = FabPosition.End,
floatingActionButton = {
FloatingActionButton(onClick = { /*TODO*/ }) {
Text("X")
}
},
drawerContent = {
Text(text = "drawerContent")
},
bottomBar = {
BottomNavigation(
backgroundColor = MaterialTheme.colors.background
) {
// FIXME: Make sure selected/unselected colors are the same
BottomNavigationItem(
icon = {
Icon(
painter = painterResource(id = R.drawable.ic_launcher_foreground),
contentDescription = null
)
},
label = {
Text(text = "One")
},
selected = true,
onClick = { /*TODO*/ }
)
BottomNavigationItem(
icon = {
Icon(
painter = painterResource(id = R.drawable.ic_launcher_foreground),
contentDescription = null
)
},
label = {
Text(text = "Two")
},
selected = false,
onClick = { /*TODO*/ }
)
}
},
) {
Log.e("TAG", "Material background color: ${MaterialTheme.colors.background}")
LazyColumn(
modifier = Modifier
.fillMaxWidth()
) {
items(100) {
Text(
text = "Item $it",
modifier = Modifier.padding(8.dp)
)
}
}
}
}