toolbarState.progress jump between two states

[rovkinmax]

I have created a sample to reproduce the behavior on a video.

    val scaffoldState = rememberCollapsingToolbarScaffoldState()
    val title = "Sample title with very long text, which helps reproduce the problem"

    val originalFontSize = MaterialTheme.typography.h6.fontSize
    val maxFontSize = MaterialTheme.typography.h4.fontSize
    val titleMaxLines: Int = Int.MAX_VALUE

    CollapsingToolbarScaffold(
        modifier = Modifier.fillMaxSize(),
        state = scaffoldState,
        scrollStrategy = ScrollStrategy.ExitUntilCollapsed,
        toolbarModifier = Modifier.background(Color.White),
        toolbar = {
            val percent = scaffoldState.toolbarState.progress
            
            val textSize = max(originalFontSize.value, (maxFontSize.value * percent)).sp
            val leftPadding = max((1F - percent) * 72F, 16F).dp
            val titleCurrentMaxLines = if (percent > 0.1) titleMaxLines else 1

            Text(  // this is fake item to allocate space
                text = title,
                modifier = Modifier
                    .alpha(0F)
                    .padding(start = 16.dp, top = 12.dp + 56.dp, end = 16.dp, bottom = 16.dp)
                    .pin(),
                style = MaterialTheme.typography.h4,
            )

            Text(
                text = title,
                modifier = Modifier
                    .padding(leftPadding, 16.dp, 16.dp, 16.dp)
                    .road(Alignment.CenterStart, Alignment.BottomStart),
                fontSize = textSize,
                style = MaterialTheme.typography.h6,
                maxLines = titleCurrentMaxLines,
            )

        }
    ) {
        LazyColumn() {
            items(count = 20) {
                Text("item $it", modifier = Modifier
                    .fillMaxWidth()
                    .padding(16.dp))
            }
        }
    }    

tested on devices: SGS10 with android 12 and pixel 3a with android 12

2022-03-16.16.12.31.mp4

[onebone]

This is because the minimum height is changing because of the "real" title text. As the toolbar collapses, the font size of the title text also shrinks, which causes the text to have less lines than the previous state. The reduction of the line count makes the text to have smaller minimum height, and the toolbar's minimum height also gets smaller. This causes the progress to jump because its calculation depends on the minimum height and maximum height. The progress has changed and your font size gets bigger and the composition gets in an infinite loop. As a proof, notice that the toolbar's progress in your video only jumps when the line count changes.
The solution is to put another fake composable to specify minimum height. A snippet below seems to fix your case.

Text(  // this is fake item to allocate space
	text = title,
	modifier = Modifier
		.alpha(0F)
		.padding(start = 16.dp, top = 12.dp + 56.dp, end = 16.dp, bottom = 16.dp)
		.pin(),
	style = MaterialTheme.typography.h4,
)

Text( // <-- ADDED: fake item to specify minimum height
	text = title,
	modifier = Modifier
		.alpha(0F)
		.padding(start = 16.dp, top = 16.dp, end = 16.dp, bottom = 16.dp)
		.pin(),
	maxLines = 1,
	fontSize = originalFontSize.value.sp,
	style = MaterialTheme.typography.h6,
)

Text(
	text = title,
	modifier = Modifier
		.padding(leftPadding, 16.dp, 16.dp, 16.dp)
		.road(Alignment.CenterStart, Alignment.BottomStart),
	fontSize = textSize,
	style = MaterialTheme.typography.h6,
	maxLines = titleCurrentMaxLines,
)