Way to use CollapsingToolbar/CollapsingToolbarScaffold with Compose Scaffold?

[something15525]

trafficstars

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:

https://user-images.githubusercontent.com/1452739/155588999-d923f535-e7a9-44b4-8d48-774df0b5e352.mov

Thanks in advance for the help!

[onebone]

Is there a problem if you leave topBar empty and wrap Scaffold with CollapsingToolbarScaffold?

[something15525]

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)
                )
            }
        }
    }
}

https://user-images.githubusercontent.com/1452739/157969383-086e5df7-1ecd-472c-985b-3122733a9354.mov

[Nek-12]

I'm having the same issue. So far I've been unable to workaround this.

UPD: I see a PR being pending #31

UPD 2: Merging #31 did not fix the issue, see #41