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,
)
}
}
})
}
If you're hiding the scrim by specifying a
frontLayerScrimColor
, useColor.Unspecified
, notColor.Transparent
and this will fix it.Also make sure your content is filling up the whole container width.