Would anyone happen to know of a sample that implements Scaffold and a collapsible TopBar? Can't see...

# compose

[Matti MK]

Would anyone happen to know of a sample that implements Scaffold and a collapsible TopBar? Can't seem to find an example of it, and I'd prefer to keep my TopBar in the scaffolding similarly as done in the compose samples

[steelahhh]

This now kinda exists in material3 - look up LargeTopAppBar/MediumTopAppBar

[Matti MK]

Thanks for the tip, but doesn’t look like based on the docs that it’d support completely collapsing

[saket]

I also don't think it's usable yet. I'm seeing two appbars on my side.

[steelahhh]

Works just fine for me - make sure to use all Material3 components (Text, Scaffold, etc)

Also IIRC there is a scroll behaviour that can hide the app bar completely

[saket]

so weird. what does your code look like?

[steelahhh]

Copied directly from docs 🤷🏻

import androidx.compose.animation.rememberSplineBasedDecay
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.LargeTopAppBar
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.input.nestedscroll.nestedScroll
import androidx.compose.ui.unit.dp
import com.google.accompanist.insets.statusBarsPadding

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun HistoryRoot() {
  val decayAnimationSpec = rememberSplineBasedDecay<Float>()
  val scrollBehavior = remember(decayAnimationSpec) {
    TopAppBarDefaults.exitUntilCollapsedScrollBehavior(decayAnimationSpec)
  }
  Scaffold(
    modifier = Modifier
      .nestedScroll(scrollBehavior.nestedScrollConnection),
    topBar = {
      LargeTopAppBar(
        modifier = Modifier.statusBarsPadding(),
        title = {
          Text(
            text = "History",
            modifier = Modifier.padding(24.dp)
          )
        },
        scrollBehavior = scrollBehavior
      )
    }
  ) {
    LazyColumn(
      contentPadding = it,
      content = {
        items(100) {
          Text(
            text = "Hello $it",
            modifier = Modifier
              .fillParentMaxWidth()
              .padding(
                horizontal = 24.dp,
                vertical = 16.dp
              )
          )
        }
      }
    )
  }
}

[saket]

Gotcha. My code practically looks the same but renders two appbars lol. I'll try it out again once it's stable.

[steelahhh]

Ah, I was getting the same behaviour when I used regular Text, it has to be material3.Text for some reason 🥲

[saket]

haha nice!

[Oleksandr Balan]

The nested scroll connection used in exitUntilCollapsed has some weird issues with the fling when top bar is not fully collapsed. Do you guys experience the same issue?

[saket]

I did but I am also using compose 1.0.x which doesn't support flings very nicely.

[Oleksandr Balan]

There is some change in fling behavior in 1.1.x? 🤔

[saket]

yep, flings should be more handled more accurately: https://android-review.googlesource.com/c/platform/frameworks/support/+/1826965/