shoaibmushtaq25

...
@Composable
fun NavBar() {
    var alphaValue by remember { mutableFloatStateOf(0f) }

    alphaValue = (3 * (1f - connection.progress)).coerceIn(0f, 1f)
...
  
 IconButton(onClick = { /* TODO: Handle action */ }) {
      Icon(

shoaibmushtaq25

...
  connection.maxHeight = headerPlaceable.height.toFloat()
  connection.minHeight = navBarPlaceable.height.toFloat()

  val space = IntSize(
      constraints.maxWidth,
      headerPlaceable.height + connection.headerOffset.roundToInt()
  )
  layout(space.width, space.height) {
      headerPlaceable.place(0, connection.headerOffset.roundToInt())

shoaibmushtaq25

...
Box(
            modifier = Modifier
                .fillMaxSize()
                .nestedScroll(connection)
        ) {
            Column(modifier = Modifier.scrollable(
                orientation = Orientation.Vertical,
                // state for Scrollable, describes how consume scroll amount
                state =

shoaibmushtaq25

...
/**
 * when direction is negative, meaning scrolling downward,
 * we are not consuming delta but passing it for Node Consumption
 */
if (delta >= 0f) {
 return Offset.Zero
}
...

shoaibmushtaq25

...
var headerOffset: Float by mutableFloatStateOf(0f)
        private set
var progress: Float by mutableFloatStateOf(1f)
        private set
...
override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
...
  val newOffset = headerOffset + delta
  val previousOffset = headerOffset

shoaibmushtaq25

...
private val contents: List<String> = (1..50).map { "Lazy Column Item $it" }
val connection = CollapsingAppBarNestedScrollConnection() //initialing nestedScrollConnection here

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            CollapsibleHeaderTheme {
                CollapsibleThing()

shoaibmushtaq25

class CollapsingAppBarNestedScrollConnection : NestedScrollConnection {

    var headerOffset: Float by mutableFloatStateOf(0f)
        private set
    var progress: Float by mutableFloatStateOf(1f)
        private set

    var maxHeight: Float by mutableFloatStateOf(0f)
    var minHeight: Float by mutableFloatStateOf(0f)

shoaibmushtaq25

@Composable
fun ExpandedHeader(modifier: Modifier = Modifier) {
    //To simulate Header Content
    SubcomposeLayout(modifier) { constraints ->

        val headerPlaceable = subcompose("header") {
            Column(modifier = modifier.background(Color.Cyan)) {
                Box(
                    modifier = Modifier
                        .fillMaxWidth()

shoaibmushtaq25

@Composable
fun CollapsibleThing(modifier: Modifier = Modifier) {
    Surface(
        modifier = modifier.fillMaxSize(), color = MaterialTheme.colorScheme.tertiary
    ) {
        Box(
            modifier = Modifier
                .fillMaxSize()
                .nestedScroll(connection)
        ) {

shoaibmushtaq25

import androidx.compose.animation.core.Animatable
import androidx.compose.animation.core.FastOutSlowInEasing
import androidx.compose.animation.core.tween
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.progressSemantics
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect