Scrollable Collapsing Toolbar in Compose

ic_temp_1.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="50.4dp"
    android:height="50.4dp"
    android:viewportWidth="50.4"
    android:viewportHeight="50.4">
  <path
      android:fillColor="#FF000000"
      android:pathData="M50.4,14.86a2.27,2.27 0,0 1,-1.18 1.36,2 2,0 0,1 -2.15,-0.37c-0.86,-0.7 -1.72,-1.42 -2.62,-2.08a13,13 0,0 0,-8.89 -2.31,13.72 13.72,0 0,0 -8.06,3.6c-1.29,1.09 -2.59,2.18 -3.94,3.18a16.45,16.45 0,0 1,-10.14 3.14,17.45 17.45,0 0,1 -11.83,-4.7A4.53,4.53 0,0 1,0 14.86v-0.79c0.51,-1.21 1.12,-1.7 2.12,-1.57a3,3 0,0 1,1.27 0.57c1.09,0.79 2.09,1.7 3.21,2.44a12.5,12.5 0,0 0,7.1 1.93,13 13,0 0,0 8.47,-3c1.67,-1.35 3.29,-2.76 5,-4a16.57,16.57 0,0 1,11 -2.85A17.66,17.66 0,0 1,49 12.31a3.61,3.61 0,0 1,1.41 1.76Z"/>
  <path
      android:fillColor="#FF000000"
      android:pathData="M0,35.53a2.25,2.25 0,0 1,1.18 -1.36,2.07 2.07,0 0,1 2.2,0.4A44.67,44.67 0,0 0,7 37.27a12.68,12.68 0,0 0,7.75 1.67,13.63 13.63,0 0,0 8.16,-3.61c1.28,-1.1 2.58,-2.18 3.94,-3.18A16.47,16.47 0,0 1,37 29a17.45,17.45 0,0 1,11.83 4.7,4.53 4.53,0 0,1 1.58,1.82v0.79c-0.51,1.21 -1.11,1.7 -2.12,1.57A3,3 0,0 1,47 37.32c-1.09,-0.79 -2.09,-1.7 -3.21,-2.44A12.5,12.5 0,0 0,36.7 33a13,13 0,0 0,-8.47 3c-1.69,1.37 -3.34,2.8 -5.12,4.07a16.52,16.52 0,0 1,-10.92 2.81A17.64,17.64 0,0 1,1.42 38.08,3.62 3.62,0 0,1 0,36.32Z"/>
  <path
      android:fillColor="#FF000000"
      android:pathData="M50.4,25.59a0.64,0.64 0,0 0,-0.08 0.12,2 2,0 0,1 -3.27,0.9c-0.8,-0.65 -1.58,-1.33 -2.42,-1.93 -3.87,-2.79 -8.1,-3.12 -12.53,-1.7a15.28,15.28 0,0 0,-4.8 3c-1.59,1.29 -3.18,2.59 -4.86,3.75A14.16,14.16 0,0 1,15.63 32,17.4 17.4,0 0,1 6,30.47 23.93,23.93 0,0 1,0.64 26.61a4.4,4.4 0,0 1,-0.64 -1V24.8a0.64,0.64 0,0 0,0.08 -0.12,2 2,0 0,1 3.27,-0.9c0.8,0.65 1.58,1.33 2.42,1.93 3.87,2.79 8.1,3.12 12.53,1.7a14.49,14.49 0,0 0,4.76 -3c1.12,-0.94 2.23,-1.89 3.38,-2.78A16.84,16.84 0,0 1,38 18.28a16.65,16.65 0,0 1,9.57 3.67c0.57,0.44 1.11,0.92 1.68,1.36A3.15,3.15 0,0 1,50.4 24.8Z"/>
</vector>

ic_temp_2.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="51.46dp"
    android:height="51.46dp"
    android:viewportWidth="51.46"
    android:viewportHeight="51.46">
  <path
      android:fillColor="#FF000000"
      android:pathData="M0,18A2.14,2.14 0,0 1,2.34 16.5c7.64,0 15.28,0 22.91,0a4.09,4.09 0,0 0,2.83 -0.92A3.66,3.66 0,0 0,25 9.24a3.66,3.66 0,0 0,-2.92 3.22,5.33 5.33,0 0,1 -0.13,0.89 1.82,1.82 0,0 1,-3.57 -0.45,7.33 7.33,0 1,1 8.47,7.17 11.34,11.34 0,0 1,-1.55 0.1c-7.64,0 -15.28,0 -22.91,0A2.18,2.18 0,0 1,0 18.76Z"/>
  <path
      android:fillColor="#FF000000"
      android:pathData="M0,32.6a2.18,2.18 0,0 1,2.36 -1.43c7.71,0 15.41,0 23.12,0a7.33,7.33 0,1 1,-7.12 7.47,1.82 1.82,0 0,1 1.67,-2 1.76,1.76 0,0 1,2 1.69,4 4,0 0,0 1.46,3 3.66,3.66 0,0 0,5.81 -3.7,3.63 3.63,0 0,0 -3.2,-2.81c-0.35,0 -0.7,0 -1.05,0 -7.55,0 -15.11,0 -22.66,0A2.14,2.14 0,0 1,0 33.4Z"/>
  <path
      android:fillColor="#FF000000"
      android:pathData="M23.28,27.5H2.42a4,4 0,0 1,-0.9 -0.06,1.82 1.82,0 0,1 0.33,-3.58c0.23,0 0.47,0 0.7,0H43.62a3.77,3.77 0,0 0,3.64 -2,3.65 3.65,0 1,0 -6.86,-2.12c0,0.2 -0.05,0.4 -0.07,0.6a1.82,1.82 0,0 1,-3.63 -0.16,7.33 7.33,0 1,1 14.65,0.4 7.26,7.26 0,0 1,-7 6.92c-5.93,0.06 -11.87,0 -17.8,0Z"/>
</vector>

ic_thunderstorm.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="75dp"
    android:height="75dp"
    android:viewportWidth="75"
    android:viewportHeight="75">
  <path
      android:pathData="M43.132,11.629C55.249,11.629 65.07,21.45 65.07,33.566C65.07,43.276 58.762,51.512 50.021,54.4C48.237,55.124 46.286,55.522 44.243,55.522L25.099,55.522C16.601,55.522 9.712,48.633 9.712,40.135C9.712,32.357 15.483,25.928 22.977,24.894C26.338,17.091 34.097,11.629 43.132,11.629Z"
      android:strokeLineJoin="round"
      android:fillColor="#F0F5FB"/>
  <path
      android:pathData="M30.974,35.95L45.974,36.013L44.037,43.888L52.849,43.826L35.037,70.492L34.849,52.43L26.599,51.867"
      android:strokeLineJoin="round"
      android:fillColor="#FFD285"/>
</vector>

ToolbarComposable.kt

package com.slaviboy.features.weather.home.composables

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material.icons.outlined.Info
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MediumTopAppBar
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.input.nestedscroll.nestedScroll
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.slaviboy.features.R

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ToolbarComposable() {
    val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            MediumTopAppBar(
                modifier = Modifier.background(color = Color.Red),
                title = {
                    Text(
                        text = "Setting",
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                },
                navigationIcon = {
                    IconButton(onClick = { /* doSomething() */ }) {
                        Icon(
                            imageVector = Icons.Filled.ArrowBack,
                            contentDescription = null
                        )
                    }
                },
                actions = {
                    IconButton(onClick = { /* doSomething() */ }) {
                        Icon(
                            imageVector = Icons.Outlined.Info,
                            contentDescription = null
                        )
                    }
                },
                scrollBehavior = scrollBehavior
            )
        },
        content = { innerPadding ->
            LazyColumn(
                contentPadding = innerPadding,
                verticalArrangement = Arrangement.spacedBy(8.dp)
            ) {
                val list = (0..10).map { it.toString() }
                items(count = list.size) {
                    WeatherItemComposable()
                }
            }
        }
    )
}

data class WeatherItem(
    val title: String = "Hong Kong",
    val description: String = "Mon, 8:00 AM, Cloudy",
    val temperature: Int = 12,
    val precipitation: String = "50% Precipitation",
    val wind: String = "2km/h Winds"
)

@Composable
fun WeatherItemComposable(
    weatherItem: WeatherItem = WeatherItem()
) {
    Column(
        modifier = Modifier
            .padding(
                horizontal = 10.dp,
                vertical = 3.dp
            )
            .background(
                color = Color(0xFFF0F0F0),
                shape = RoundedCornerShape(20.dp)
            )
            .padding(
                horizontal = 15.dp,
                vertical = 15.dp
            )
    ) {
        Text(
            text = weatherItem.title,
            fontSize = 20.sp,
            modifier = Modifier
                .fillMaxWidth()
        )
        Text(
            text = weatherItem.description,
            fontSize = 14.sp,
            color = Color(0xFF818181),
            modifier = Modifier
                .fillMaxWidth()
        )
        Spacer(modifier = Modifier.height(10.dp))
        Row(
            verticalAlignment = Alignment.Top,
            horizontalArrangement = Arrangement.Center,
            modifier = Modifier
                .fillMaxWidth()
        ) {
            Text(
                text = weatherItem.temperature.toString(),
                fontSize = 88.sp
            )
            Text(
                text = "°C",
                fontSize = 32.sp,
                modifier = Modifier
                    .padding(top = 18.dp)
            )
            Spacer(modifier = Modifier.width(30.dp))
            Image(
                painter = painterResource(id = R.drawable.ic_thunderstorm),
                contentDescription = null,
                contentScale = ContentScale.FillWidth,
                modifier = Modifier
                    .padding(top = 18.dp)
                    .wrapContentHeight()
                    .width(88.dp)
            )
        }
        Spacer(modifier = Modifier.height(10.dp))
        Row(
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.Center,
            modifier = Modifier
                .fillMaxWidth()
        ) {
            Image(
                painter = painterResource(id = R.drawable.ic_temp_1),
                contentDescription = null,
                contentScale = ContentScale.FillWidth,
                modifier = Modifier
                    .wrapContentHeight()
                    .width(20.dp)
            )
            Spacer(modifier = Modifier.width(6.dp))
            Text(
                text = weatherItem.precipitation,
                fontSize = 14.sp,
                color = Color(0xFF818181),
            )
            Spacer(modifier = Modifier.width(20.dp))
            Image(
                painter = painterResource(id = R.drawable.ic_temp_2),
                contentDescription = null,
                contentScale = ContentScale.FillWidth,
                modifier = Modifier
                    .wrapContentHeight()
                    .width(20.dp)
            )
            Spacer(modifier = Modifier.width(6.dp))
            Text(
                text = weatherItem.wind,
                fontSize = 14.sp,
                color = Color(0xFF818181),
            )
        }
    }
}