Skip to content

Instantly share code, notes, and snippets.

@aqua30
Created June 12, 2022 20:15
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save aqua30/2dcf987837d0ca10b3e2f80068acc9fd to your computer and use it in GitHub Desktop.
Save aqua30/2dcf987837d0ca10b3e2f80068acc9fd to your computer and use it in GitHub Desktop.
@Composable
fun HeaderBarParallaxScroll() {
val scrollState = rememberScrollState()
Box {
Column(
modifier = Modifier
.fillMaxWidth()
.verticalScroll(scrollState),
) {
Box(
modifier = Modifier
.fillMaxWidth()
.height(500.dp)
.background(Color.White)
.graphicsLayer {
Log.e(
"scroll",
"${scrollState.value.toFloat()}, max = ${scrollState.maxValue}, ratio = ${(scrollState.value.toFloat() / scrollState.maxValue)}"
)
alpha = 1f - ((scrollState.value.toFloat() / scrollState.maxValue) * 1.5f)
translationY = 0.5f * scrollState.value
},
contentAlignment = Alignment.Center
) {
Image(
painterResource(id = R.drawable.ic_tiger),
contentDescription = "tiger parallax",
contentScale = ContentScale.Crop,
modifier = Modifier.fillMaxSize()
)
}
Text(
text = stringResource(R.string.dummy_text),
modifier = Modifier.background(
Color.White
),
style = TextStyle(
fontSize = 24.sp
)
)
}
Box(
modifier = Modifier
.alpha(min(1f, (scrollState.value.toFloat() / scrollState.maxValue) * 5f))
.fillMaxWidth()
.height(60.dp)
.background(Color.Yellow),
contentAlignment = Alignment.CenterStart
) {
Text(
text = "Header bar",
modifier = Modifier.padding(horizontal = 16.dp),
style = TextStyle(
fontSize = 24.sp,
fontWeight = FontWeight.W900,
color = Color.Black
)
)
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment