KotlinLeaner
03/05/2023, 3:02 AMbackLayerContent
with frontLayerContent
in BackdropScaffold
. I want to Scroll Up animation inside my backLayerContent
in Icon
& Text
. I am trying to learning from this article about AnimatedContent, but it is very hard to understand. Right now I used AnimatedContent
content but it's going to fast and I didn't understand which direction is going the animation.@OptIn(ExperimentalMaterialApi::class, ExperimentalAnimationApi::class)
@Composable
fun CollapsingTopAppBarStylingScreen() {
val context = LocalContext.current as ComponentActivity
val scaffoldState = rememberBackdropScaffoldState(BackdropValue.Revealed)
var isScrollAtTopYPosition by remember {
mutableStateOf(false)
}
LaunchedEffect(scaffoldState.progress) {
context.logE(">> --------Start-------")
context.logE(">> progress --> ${scaffoldState.progress}")
context.logE(">> --------End-------")
}
BackdropScaffold(
scaffoldState = scaffoldState,
appBar = {},
persistentAppBar = false,
backLayerContent = {
AnimatedContent(
targetState = isScrollAtTopYPosition,
) {
Column(
modifier = Modifier.padding(
top = 20.dp,
start = 16.dp,
bottom = 24.dp
),
) {
Icon(
imageVector = Icons.Default.ShoppingCart,
tint = Color.White,
contentDescription = null,
)
Text(
text = "Hello!! How are you?",
fontSize = 24.sp,
color = Color.White,
)
}
}
},
backLayerBackgroundColor = Color.Green,
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,
)
}
}
}
)
}