3

I was trying find a ready solution for it but couldn't. The idea is to make the expanded toolbar with big title and when the content is not fit on the screen make it scrollable. The scroll behaviour is like this: Expanded toolbar should be disappeared under a regular fix toolbar (height = 56.dp). Regular fix toolbar zIndex should be higher than disappearing expanded toolbar. No Motion effect. The big title from the disappearing toolbar should start to appear in the collapsed toolbar center (See attached screenshots)

In the toolbar body I should be able to work with ConstaintLayout component. Mentioning this because when I was trying my custom solutions I had issues with height calculations right after I use ConstraintLayout.

I would really appreciate everyone for help.

The example when toolbar is Expanded

The example when toolbar is Collapsed after scroll

Edhar Khimich
  • 1,468
  • 1
  • 17
  • 20
  • Does this answer your question? [Jetpack Compose collapsing toolbar](https://stackoverflow.com/questions/67227755/jetpack-compose-collapsing-toolbar) – nglauber May 11 '22 at 17:48
  • Not really The accepted answer is showing the case with LazyColumn only but what If I used a limited number of components? On some screens they will fit but on some they won't. To have a toolbar which has item as a header and the body as 'items' not a good idea. Cause for cases when I need to use LazyColumn inside body I need to disable scroll prb each time. onebone library is not that customized. Plus I remember I had an issue with a non stop recomposing when did some simple adjustments. Don't remember when it was: when used ConstaintLayout or just when did some other modifications. – Edhar Khimich May 11 '22 at 18:44
  • 1
    Android Material 3 toolbars are not exactly what I need. For example LargeTopAppBar contains TwoRowsTopAppBar inside which shows a big title and a small title in the collapsed toolbar as well at the same time. Which is really not that ui friendly IMO – Edhar Khimich May 11 '22 at 18:47
  • @EdharKhimich Perhaps you know how to fix my issue, could you take a look please? https://stackoverflow.com/questions/76326733/collapsingtoolbar-in-compose-with-button-sticky – StuartDTO May 29 '23 at 13:32

1 Answers1

0

You can use Material3 for Jetpack Compose

  1. First add Material3 dependencies
dependencies {
    implementation("androidx.compose.material3:material3:1.1.0-alpha08")
    implementation("androidx.compose.material3:material3-window-size-class:1.1.0-alpha08")
}
  1. Then check the MediumTopAppBar section for examples
val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
Scaffold(
    modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
    topBar = {
        MediumTopAppBar(
            title = {...},
            navigationIcon = {...},
            actions = {...},
            scrollBehavior = scrollBehavior
        )
    },
    content = { ...
    }
)

Here is full example on GitHub as gist, and the result below:

enter image description here

slaviboy
  • 1,407
  • 17
  • 27