A modern programming language that makes developers happier.

kotlinlang

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

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

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

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

Screenshot_20211105-165607_crispy.jpg

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

Copied directly from docs :shrug::skin-tone-2:
```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&lt;Float&gt;()
  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
              )
          )
        }
      }
    )
  }
}```

Screenshot_20211105-121301.png

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

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

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?

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

There is some change in fling behavior in 1.1.x? :thinking_face:

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