Hi guys, anyone can guide me how to make this animation with material 3?

# compose

[KotlinLeaner]

Hi guys, anyone can guide me how to make this animation with material 3?

[KotlinLeaner]

PXL_20230226_234719480.TS~5.mp4

PXL_20230226_234719480.TS~5.mp4

[KotlinLeaner]

package com.example.scrollcompose

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import <http://androidx.compose.material.icons.filled.Menu|androidx.compose.material.icons.filled.Menu>
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.scrollcompose.ui.theme.ScrollComposeTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ScrollComposeTheme {
                // A surface container using the 'background' color from the theme
                GreetingView()
            }
        }
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun GreetingView() {
    val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
    Scaffold(
        topBar = {
            MediumTopAppBar(
                title = {
                    Text(
                        "Medium TopAppBar",
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                },
                navigationIcon = {
                    IconButton(onClick = { /* doSomething() */ }) {
                        Icon(
                            imageVector = <http://Icons.Filled.Menu|Icons.Filled.Menu>,
                            contentDescription = "Localized description"
                        )
                    }
                },
                actions = {
                    IconButton(onClick = { /* doSomething() */ }) {
                        Icon(
                            imageVector = Icons.Filled.Favorite,
                            contentDescription = "Localized description"
                        )
                    }
                },
                scrollBehavior = scrollBehavior
            )
        },
        content = { innerPadding ->
            LazyColumn(
                modifier = Modifier
                    .clip(shape = RoundedCornerShape(15.dp, 15.dp, 0.dp, 0.dp))
                    .background(Color.Red),
                contentPadding = innerPadding,
                verticalArrangement = Arrangement.spacedBy(8.dp)
            ) {
                val list = (0..40).map { it.toString() }
                items(count = list.size) {
                    Text(
                        text = list[it],
                        style = MaterialTheme.typography.bodyLarge,
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(horizontal = 16.dp)
                    )
                }
            }
        }
    )
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ScrollComposeTheme {
        GreetingView()
    }
}

[Chris Sinco [G]]

I don’t think you need Material library to do that specifically

[KotlinLeaner]

So what is the way to achieve that animation?

[Chris Sinco [G]]

Likely a combination of gesture tracking and Animatable. Is the animation the pulling and bouncing of the sheet?

[KotlinLeaner]

Yes it's bouncing the sheet.

[KotlinLeaner]

I want normal scaffold content to be bouncing.

[Chris Sinco [G]]

If you’re looking for a Material component, BackdropScaffold may be a better fit. But it’s Material2. Not sure it’s in Material3.

[Chris Sinco [G]]

Otherwise, you can just the swipeable Modifier to have granular control. It’s strangely in the Material2/3 library but it actually isn’t a Material specific thing

[KotlinLeaner]

Actually I am migrating my xml code to android jetpack compose. Everywhere in the article is using material 3 so I am trying to use it in my project.

[KotlinLeaner]

People recommend in the stack overflow to use material 3 in compose. So I am trying to use new stuff.

[Chris Sinco [G]]

Gotcha. Yeah that’s a good idea long term. Material3 is still missing components from Material2, so there are cases where you may need both unfortunately.

[KotlinLeaner]

Sure, I'll grab the material 2 then stuff.

[KotlinLeaner]

I need swipeable modifier with a granular effect and it will work ?