Skip to content

Instantly share code, notes, and snippets.

@bagus2x
Last active April 2, 2023 13:14
Show Gist options
  • Save bagus2x/959726b7f8ccbabb1f69d8c8b72c4a99 to your computer and use it in GitHub Desktop.
Save bagus2x/959726b7f8ccbabb1f69d8c8b72c4a99 to your computer and use it in GitHub Desktop.
Gradient background in LazyColumn items. Instagram message style in jetpack compose
@Composable
fun NotificationScreen(
navController: NavController,
viewModel: NotificationViewModel = hiltViewModel()
) {
val videos by viewModel.videos.collectAsStateWithLifecycle()
val listState = rememberLazyListState()
BoxWithConstraints {
val density = LocalDensity.current
val height = with(density){maxHeight.toPx()}
LazyColumn(
modifier = Modifier
.systemBarsPadding()
.fillMaxSize(),
verticalArrangement = Arrangement.spacedBy(16.dp),
state = listState
) {
itemsIndexed(
items = videos,
key = { _, item -> item.first }
) { index, (id, _, thumbnail) ->
Box(
modifier = Modifier
.fillMaxWidth()
.height(200.dp)
.drawBehind {
val top = listState.layoutInfo.visibleItemsInfo.find { it.index == index }?.offset?.toFloat()
val bottom = listState.layoutInfo.visibleItemsInfo.find { it.index == index }?.offset?.plus(size.height)
if (top != null && bottom != null) {
drawRect(
brush = Brush.verticalGradient(
colors = listOf(
Color(ArgbEvaluator.evaluate(top / height, TopColorArgb, BottomColorArgb) as Int),
Color(ArgbEvaluator.evaluate(bottom / height, TopColorArgb, BottomColorArgb) as Int)
)
),
)
}
}
)
}
}
}
}
private val TopColorArgb = Color(0xFF4A93E2).toArgb()
private val BottomColorArgb = Color(0xFFDC14E2).toArgb()
val ArgbEvaluator by lazy { ArgbEvaluator() }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment