Layout(
    content = {
        if (collapsingTitle != null) {
            Text(
                modifier = Modifier.layoutId(ExpandedTitleId)
                // ...
            )
            Text(
                modifier = Modifier.layoutId(CollapsedTitleId)
                // ...
            )
        }

        if (navigationIcon != null) {
            Box(
                modifier = Modifier.layoutId(NavigationIconId)
            ) {
                navigationIcon()
            }
        }

        if (actions != null) {
            Row(
                modifier = Modifier.layoutId(ActionsId)
            ) {
                actions()
            }
        }

        if (centralContent != null) {
            Box(
                modifier = Modifier.layoutId(CentralContentId)
            ) {
                centralContent()
            }
        }

        if (additionalContent != null) {
            Box(
                modifier = Modifier.layoutId(AdditionalContentId)
            ) {
                additionalContent()
            }
        }
    },
    // ...
)

Полный код на GitHub

Layout(
    content = {
        if (collapsingTitle != null) {
            Text(
                modifier = Modifier
                    .layoutId(ExpandedTitleId)
                    .wrapContentHeight(align = Alignment.Top)
                    .graphicsLayer(
                        scaleX = collapsingTitleScale,
                        scaleY = collapsingTitleScale,
                        transformOrigin = TransformOrigin(0f, 0f)
                    ),
                text = collapsingTitle.titleText,
                style = collapsingTitle.expandedTextStyle
            )
            Text(
                modifier = Modifier
                    .layoutId(CollapsedTitleId)
                    .wrapContentHeight(align = Alignment.Top)
                    .graphicsLayer(
                        scaleX = collapsingTitleScale,
                        scaleY = collapsingTitleScale,
                        transformOrigin = TransformOrigin(0f, 0f)
                    ),
                text = collapsingTitle.titleText,
                style = collapsingTitle.expandedTextStyle,
                maxLines = 1,
                overflow = TextOverflow.Ellipsis
            )
        }
        // ...
    },
    // ...
)

Полный код на GitHub

Layout(
    content = { /* ... */ },
    modifier = /* ... */,
    measurePolicy = { measurables, constraints ->
      val horizontalPaddingPx = HorizontalPadding.toPx()
      val expandedTitleBottomPaddingPx = ExpandedTitleBottomPadding.toPx()


      // Measuring widgets inside toolbar:
  
      val navigationIconPlaceable = measurables.firstOrNull { it.layoutId == NavigationIconId }
          ?.measure(constraints.copy(minWidth = 0))
  
      val actionsPlaceable = measurables.firstOrNull { it.layoutId == ActionsId }
          ?.measure(constraints.copy(minWidth = 0))
  
      val expandedTitlePlaceable = measurables.firstOrNull { it.layoutId == ExpandedTitleId }
          ?.measure(
              constraints.copy(
                  maxWidth = (constraints.maxWidth - 2 * horizontalPaddingPx).roundToInt(),
                  minWidth = 0,
                  minHeight = 0
              )
          )
  
      val additionalContentPlaceable = measurables.firstOrNull { it.layoutId == AdditionalContentId }
          ?.measure(constraints)

      val navigationIconOffset = when (navigationIconPlaceable) {
          null -> horizontalPaddingPx
          else -> navigationIconPlaceable.width + horizontalPaddingPx * 2
      }
  
      val actionsOffset = when (actionsPlaceable) {
          null -> horizontalPaddingPx
          else -> actionsPlaceable.width + horizontalPaddingPx * 2
      }
  
      val collapsedTitleMaxWidthPx =
          (constraints.maxWidth - navigationIconOffset - actionsOffset) / fullyCollapsedTitleScale
  
      val collapsedTitlePlaceable = measurables.firstOrNull { it.layoutId == CollapsedTitleId }
          ?.measure(
              constraints.copy(
                  maxWidth = collapsedTitleMaxWidthPx.roundToInt(),
                  minWidth = 0,
                  minHeight = 0
              )
          )
  
      val centralContentPlaceable = measurables.firstOrNull { it.layoutId == CentralContentId }
          ?.measure(
              constraints.copy(
                  minWidth = 0,
                  maxWidth = (constraints.maxWidth - navigationIconOffset - actionsOffset).roundToInt()
              )
          )

      // ...
  
}

Полный код на GitHub

Layout(
    content = { /* ... */ },
    modifier = /* ... */,
    measurePolicy = { measurables, constraints ->
        
        // ...
      
        val collapsedHeightPx = when {
            centralContentPlaceable != null ->
                max(MinCollapsedHeight.toPx(), centralContentPlaceable.height.toFloat())
            else -> MinCollapsedHeight.toPx()
        }
  
        var layoutHeightPx = collapsedHeightPx
  
  
        // Calculating coordinates of widgets inside toolbar:
  
        // Current coordinates of navigation icon
        val navigationIconX = horizontalPaddingPx.roundToInt()
        val navigationIconY = ((collapsedHeightPx - (navigationIconPlaceable?.height ?: 0)) / 2).roundToInt()
  
        // Current coordinates of actions
        val actionsX = (constraints.maxWidth - (actionsPlaceable?.width ?: 0) - horizontalPaddingPx).roundToInt()
        val actionsY = ((collapsedHeightPx - (actionsPlaceable?.height ?: 0)) / 2).roundToInt()
  
        // Current coordinates of title
        var collapsingTitleY = 0
        var collapsingTitleX = 0
  
        if (expandedTitlePlaceable != null && collapsedTitlePlaceable != null) {
            // Measuring toolbar collapsing distance
            val heightOffsetLimitPx = expandedTitlePlaceable.height + expandedTitleBottomPaddingPx
            scrollBehavior?.state?.heightOffsetLimit = when (centralContent) {
                null -> -heightOffsetLimitPx
                else -> -1f
            }
  
            // Toolbar height at fully expanded state
            val fullyExpandedHeightPx = MinCollapsedHeight.toPx() + heightOffsetLimitPx
  
            // Coordinates of fully expanded title
            val fullyExpandedTitleX = horizontalPaddingPx
            val fullyExpandedTitleY =
                fullyExpandedHeightPx - expandedTitlePlaceable.height - expandedTitleBottomPaddingPx
  
            // Coordinates of fully collapsed title
            val fullyCollapsedTitleX = navigationIconOffset
            val fullyCollapsedTitleY = collapsedHeightPx / 2 - CollapsedTitleLineHeight.toPx().roundToInt() / 2
  
            // Current height of toolbar
            layoutHeightPx = lerp(fullyExpandedHeightPx, collapsedHeightPx, collapsedFraction)
  
            // Current coordinates of collapsing title
            collapsingTitleX = lerp(fullyExpandedTitleX, fullyCollapsedTitleX, collapsedFraction).roundToInt()
            collapsingTitleY = lerp(fullyExpandedTitleY, fullyCollapsedTitleY, collapsedFraction).roundToInt()
        } else {
            scrollBehavior?.state?.heightOffsetLimit = -1f
        }
  
        val toolbarHeightPx = layoutHeightPx.roundToInt() + (additionalContentPlaceable?.height ?: 0)

        // ...
  
}

Полный код на GitHub

Layout(
    content = { /* ... */ },
    modifier = /* ... */,
    measurePolicy = { measurables, constraints ->
        
        // ...

        layout(width = constraints.maxWidth, height = toolbarHeightPx) {
            navigationIconPlaceable?.placeRelative(
                x = navigationIconX,
                y = navigationIconY
            )
            
            actionsPlaceable?.placeRelative(
                x = actionsX,
                y = actionsY
            )
            
            centralContentPlaceable?.placeRelative(
                x = navigationIconOffset.roundToInt(),
                y = ((collapsedHeightPx - centralContentPlaceable.height) / 2).roundToInt()
            )
            
            if (expandedTitlePlaceable?.width == collapsedTitlePlaceable?.width) {
                expandedTitlePlaceable?.placeRelative(
                    x = collapsingTitleX,
                    y = collapsingTitleY,
                )
            } else {
                expandedTitlePlaceable?.placeRelativeWithLayer(
                    x = collapsingTitleX,
                    y = collapsingTitleY,
                    layerBlock = { alpha = 1 - collapsedFraction }
                )
                collapsedTitlePlaceable?.placeRelativeWithLayer(
                    x = collapsingTitleX,
                    y = collapsingTitleY,
                    layerBlock = { alpha = collapsedFraction }
                )
            }
            
            additionalContentPlaceable?.placeRelative(
                x = 0,
                y = layoutHeightPx.roundToInt()
            )
        }
  
}

Полный код на GitHub

val nestedScrollConnection = object : NestedScrollConnection {
  
    override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
        return /* consumed amount of scroll */  
    }
  
    override fun onPostScroll(
        consumed: Offset,
        available: Offset,
        source: NestedScrollSource,
    ): Offset {
        return /* consumed amount of scroll */  
    }
  
    override suspend fun onPreFling(available: Velocity): Velocity {
        return /* consumed amount of scroll velocity */
    }
  
    
    override suspend fun onPostFling(consumed: Velocity, available: Velocity): Velocity {
        return /* consumed amount of scroll velocity */
    }

}

Scaffold(
      modifier = Modifier.nestedScroll(nestedScrollConnection),
      topBar = {
          CustomToolbar(/* toolbar params */)
      },
  ) { contentPadding ->
    LazyColumn {
      /* screen content */
    }
  }

@Stable
class CustomToolbarScrollState(
    initialHeightOffsetLimit: Float,
    initialHeightOffset: Float,
    initialContentOffset: Float,
) {

    /* ... */

    /**
     * The top app bar's height offset limit in pixels, which represents the limit that a top app
     * bar is allowed to collapse to.
     *
     * Use this limit to coerce the [heightOffset] value when it's updated.
     */
    var heightOffsetLimit by mutableStateOf(initialHeightOffsetLimit)

    /**
     * The top app bar's current height offset in pixels. This height offset is applied to the fixed
     * height of the app bar to control the displayed height when content is being scrolled.
     *
     * Updates to the [heightOffset] value are coerced between zero and [heightOffsetLimit].
     */
    var heightOffset: Float
        get() = _heightOffset.value
        set(newOffset) {
            _heightOffset.value = newOffset.coerceIn(
                minimumValue = heightOffsetLimit,
                maximumValue = 0f
            )
        }

    /**
     * The total offset of the content scrolled under the top app bar.
     *
     * This value is updated by a [CustomToolbarScrollBehavior] whenever a nested scroll connection
     * consumes scroll events. A common implementation would update the value to be the sum of all
     * [NestedScrollConnection.onPostScroll] `consumed.y` values.
     */
    var contentOffset by mutableStateOf(initialContentOffset)

    /**
     * A value that represents the collapsed height percentage of the app bar.
     *
     * A `0.0` represents a fully expanded bar, and `1.0` represents a fully collapsed bar (computed
     * as [heightOffset] / [heightOffsetLimit]).
     */
    val collapsedFraction: Float
        get() = if (heightOffsetLimit != 0f) {
            heightOffset / heightOffsetLimit
        } else {
            0f
        }

    private var _heightOffset = mutableStateOf(initialHeightOffset)

}

Полный код на GitHub

class CustomToolbarScrollBehavior(
    val state: CustomToolbarScrollState,
    // ...
) {

    val nestedScrollConnection = object : NestedScrollConnection {

        override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
            // Don't intercept if scrolling down.
            if (available.y > 0f) return Offset.Zero

            val prevHeightOffset = state.heightOffset
            state.heightOffset = state.heightOffset + available.y
            return if (prevHeightOffset != state.heightOffset) {
                // We're in the middle of top app bar collapse or expand.
                // Consume only the scroll on the Y axis.
                available.copy(x = 0f)
            } else {
                Offset.Zero
            }
        }

        /* ... */

    }

}

Полный код на GitHub

class CustomToolbarScrollBehavior(
    val state: CustomToolbarScrollState,
    // ...
) {

    val nestedScrollConnection = object : NestedScrollConnection {

        /* ... */
      
        override fun onPostScroll(
            consumed: Offset,
            available: Offset,
            source: NestedScrollSource,
        ): Offset {
            state.contentOffset += consumed.y

            if (available.y < 0f || consumed.y < 0f) {
                // When scrolling up, just update the state's height offset.
                val oldHeightOffset = state.heightOffset
                state.heightOffset = state.heightOffset + consumed.y
                return Offset(0f, state.heightOffset - oldHeightOffset)
            }

            if (consumed.y == 0f && available.y > 0) {
                // Reset the total content offset to zero when scrolling all the way down. This
                // will eliminate some float precision inaccuracies.
                state.contentOffset = 0f
            }

            if (available.y > 0f) {
                // Adjust the height offset in case the consumed delta Y is less than what was
                // recorded as available delta Y in the pre-scroll.
                val oldHeightOffset = state.heightOffset
                state.heightOffset = state.heightOffset + available.y
                return Offset(0f, state.heightOffset - oldHeightOffset)
            }
            return Offset.Zero
        }


        /* ... */
        
    }

}

Полный код на GitHub

class CustomToolbarScrollBehavior(
    val state: CustomToolbarScrollState,
    // ...
) {

    val nestedScrollConnection = object : NestedScrollConnection {

        /* ... */
      
        override suspend fun onPostFling(consumed: Velocity, available: Velocity): Velocity {
            var result = super.onPostFling(consumed, available)
            // Check if the app bar is partially collapsed/expanded.
            // Note that we don't check for 0f due to float precision with the collapsedFraction
            // calculation.
            if (state.collapsedFraction > 0.01f && state.collapsedFraction < 1f) {
                result += flingToolbar(
                    state = state,
                    initialVelocity = available.y,
                    flingAnimationSpec = flingAnimationSpec
                )
            }
            return result
        }



        /* ... */
        
    }

}

private suspend fun flingToolbar(
    state: CustomToolbarScrollState,
    initialVelocity: Float,
    flingAnimationSpec: DecayAnimationSpec<Float>?,
): Velocity {
    var remainingVelocity = initialVelocity
    // In case there is an initial velocity that was left after a previous user fling, animate to
    // continue the motion to expand or collapse the app bar.
    if (flingAnimationSpec != null && abs(initialVelocity) > 1f) {
        var lastValue = 0f
        AnimationState(
            initialValue = 0f,
            initialVelocity = initialVelocity,
        )
            .animateDecay(flingAnimationSpec) {
                val delta = value - lastValue
                val initialHeightOffset = state.heightOffset
                state.heightOffset = initialHeightOffset + delta
                val consumed = abs(initialHeightOffset - state.heightOffset)
                lastValue = value
                remainingVelocity = this.velocity
                // avoid rounding errors and stop if anything is unconsumed
                if (abs(delta - consumed) > 0.5f) {
                    cancelAnimation()
                }
            }
    }
    return Velocity(0f, remainingVelocity)
}

Полный код на GitHub

val scrollBehavior = rememberToolbarScrollBehavior()

Scaffold(
    modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection)
    topBar = {
        CustomToolbar(
            scrollBehavior = scrollBehavior,
            collapsingText = CollapsingTitle(
                text = "Toolbar tile",
                expandedTextStyle = MaterialTheme.typography.headlineLarge
            ),
            actions = {
                ToolbarActionIcon(
                    painter = painterResource(id = R.drawable.ic_settings),
                    onClick = { }
                )
            },
            navigationIcon = { ToolbarBackIcon() },
            additionalContent = { /* optional content at toolbar bottom */ },
            centralContent = { /* opotional content at toolbar center */ },
            collapsedElevation = 4.dp,
        )
    }
) {
   LazyColumn {
       /* some screen content */
   }
}

Демо-конструктор состояний компонента на GitHub