Compose AppBar

AppBar.kt

package com.example.titl.appbar

import androidx.compose.animation.core.animateDpAsState
import androidx.compose.foundation.ScrollState
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme.colorScheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@Composable
fun AppBar(
    scrollState: ScrollState,
    text: String,
    heightDp: Float,
    collapsedHeightDp: Float,
    modifier: Modifier = Modifier,
) {
    val distanceUntilAnimatedPx = with(LocalDensity.current) { (heightDp - collapsedHeightDp).dp.toPx() }

    // progress * collapsedHeightDp + (1 - progress) * heightDp
    // = progress * collapsedHeightDp + heightDp - progress * heightDp
    // = progress * (collapsedHeightDp - heightDp) + heightDp
    val animatedHeight by animateDpAsState(
        targetValue = ((collapsedHeightDp - heightDp) * if (scrollState.value < distanceUntilAnimatedPx) {
            scrollState.value.toFloat() / distanceUntilAnimatedPx
        } else 1f).dp + heightDp.dp
    )

    Surface(
        modifier = modifier
            .fillMaxWidth()
            .height(animatedHeight),
        color = colorScheme.primary
    ) {
        Text(text = text, fontSize = (animatedHeight.value/2).sp, modifier = Modifier.padding(start = 24.dp))
    }
}

// Reference:
/*
@Composable
fun TranslucentStatusBarLayout(
    scrollState: ScrollState,
    distanceUntilAnimated: Dp,
    modifier: Modifier = Modifier,
    targetAlpha: Float = ContentAlpha.medium,
    targetColor: Color = MaterialTheme.colorScheme.background,
    content: @Composable () -> Unit
) {
    val distanceUntilAnimatedPx = with(LocalDensity.current) { distanceUntilAnimated.toPx() }
    val statusBarInsets = WindowInsets.statusBars
    Box(
        Modifier.drawWithContent {
            drawContent()
            drawRect(
                color = targetColor.copy(
                    alpha = targetAlpha * if (scrollState.value < distanceUntilAnimatedPx) {
                        scrollState.value.toFloat() / distanceUntilAnimatedPx
                    } else 1f
                ),
                size = Size(
                    width = size.width,
                    height = statusBarInsets.getTop(this).toFloat()
                )
            )
        }.then(modifier)
    ) {
        content()
    }
}
 */

MainActivity.kt

package com.example.titl

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.unit.dp
import com.example.titl.appbar.AppBar
import com.example.titl.ui.theme.TitlTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            TitlTheme {
                val scrollState = rememberScrollState()

                val heightDp = 100f
                val collapsedHeightDp = 50f
                val distanceUntilAnimatedPx = with(LocalDensity.current) { (heightDp - collapsedHeightDp).dp.toPx() }

                val offset = ((2 * collapsedHeightDp - heightDp) * if (scrollState.value < distanceUntilAnimatedPx) {
                    scrollState.value.toFloat() / distanceUntilAnimatedPx
                } else 1f).dp + heightDp.dp

                Box(
                    modifier = Modifier
                        .fillMaxSize()
                        .background(color = MaterialTheme.colorScheme.background)
                ) {
                    Column(
                        Modifier
                            .padding(24.dp)
                            .verticalScroll(scrollState)
                            .offset(y = offset)
                    ) {
                        repeat(100) {
                            Text(
                                "Android",
                                Modifier.fillMaxWidth(),
                                MaterialTheme.colorScheme.onBackground
                            )
                        }
                    }
                    AppBar(
                        scrollState = scrollState,
                        text = "Android",
                        modifier = Modifier
                            .wrapContentHeight()
                            .align(Alignment.TopCenter),
                        heightDp = heightDp,
                        collapsedHeightDp = collapsedHeightDp
                    )
                }
            }
        }
    }
}