2

I want to scroll frontLayerContent continue without interrupt. For example when I started scrolling frontLayerContent, backLayerContent will hide and stop frontLayerContent at top of screen. Then again I have to swipe up gesture to scroll the frontLayerContent. So is this possible to achieve in single gesture?

Output :- Youtube

In the video you can clearly see that when I started to scroll up the frontLayerContent is stuck at top. After that I scroll up again then it goes i.e. It takes 2 time scroll up gesture to perform scrolling. I want to do this in 1 time only.

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun CollapsingTopAppBarStylingScreen() {
    var isBackDropAnimationStarts by remember { mutableStateOf(false) }
    val iconOffsetAnimation: Dp by animateDpAsState(
        if (!isBackDropAnimationStarts) 13.dp else 0.dp, tween(1000)
    )
    val textOffsetAnimation: Dp by animateDpAsState(
        if (!isBackDropAnimationStarts) 6.dp else 0.dp, tween(1000)
    )
    val viewAlpha: Float by animateFloatAsState(
        targetValue = if (!isBackDropAnimationStarts) 1f else 0f, animationSpec = tween(
            durationMillis = 1000,
        )
    )
    val scaffoldState = rememberBackdropScaffoldState(BackdropValue.Revealed)
    BackdropScaffold(
        scaffoldState = scaffoldState,
        appBar = {},
        persistentAppBar = false,
        peekHeight = 0.dp,
        backLayerContent = {
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(
                        start = 16.dp, top = 16.dp, bottom = 10.dp
                    ),
            ) {
                Image(
                    modifier = Modifier.padding(top = iconOffsetAnimation),
                    alpha = viewAlpha,
                    imageVector = Icons.Default.ShoppingCart,
                    colorFilter = ColorFilter.tint(color = Color.White),
                    contentDescription = null,
                )
                Text(
                    modifier = Modifier.padding(top = textOffsetAnimation),
                    text = "Hello, Anna",
                    fontSize = 20.sp,
                    color = Color.White.copy(alpha = viewAlpha),
                )
            }
        },
        backLayerBackgroundColor = Color.DarkGray,
        frontLayerBackgroundColor = Color.White,
        frontLayerScrimColor = Color.Transparent,
        frontLayerContent = {
            LazyColumn(
                contentPadding = PaddingValues(horizontal = 24.dp, vertical = 24.dp),
                verticalArrangement = Arrangement.spacedBy(8.dp)
            ) {
                val list = (0..40).map { it.toString() }
                items(count = list.size) {
                    Text(
                        text = list[it],
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(top = 10.dp),
                        color = Color.Black,
                    )
                }
            }
        })
}

1 Answer 1

0

If you're hiding the scrim by specifying a frontLayerScrimColor, use Color.Unspecified, not Color.Transparent and this will fix it.

Also make sure your content is filling up the whole container width.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.