The shadow is clipping in a very odd way when it's overlapping other items in a LazyRow and I can't figure out why.
I'm running this code on TV emulator but I can't imagine that would make any difference.
Attempt 1: Modifier.shadow()
val colors = listOf(
Color.Red,
Color.Blue,
Color.Green,
Color.Yellow
)
@Composable
fun ListTest() {
LazyColumn {
items(30) {
Column {
Text("This is row $it")
LazyRow {
items(colors) {
var isFocused by remember { mutableStateOf(false) }
val alpha = if (isFocused) 1f else 0.25f
val elevation = if (isFocused) 40.dp else 0.dp
Surface(
shape = RoundedCornerShape(8.dp),
color = it.copy(alpha = alpha),
modifier = Modifier
.width(240.dp)
.height(150.dp)
.padding(start = 16.dp)
// Look here
.shadow(elevation)
.onFocusChanged { state ->
isFocused = state.isFocused
}
.focusable(),
) {
// Content here
}
}
}
}
}
}
}
Attempt 2: Modifier.drawBehind {}
I was referred to these lines in the Android code that limits elevation to 30.dp.
val colors = listOf(
Color.Red,
Color.Blue,
Color.Green,
Color.Yellow
)
@Composable
fun ListTest() {
LazyColumn {
items(30) {
Column {
Text("This is row $it")
LazyRow {
items(colors) {
var isFocused by remember { mutableStateOf(false) }
val alpha = if (isFocused) 1f else 0.25f
val shadowColor = if (isFocused) Color.Black else Color.Transparent
Surface(
shape = RoundedCornerShape(8.dp),
color = it.copy(alpha = alpha),
modifier = Modifier
.width(240.dp)
.height(150.dp)
.padding(start = 16.dp)
// Look here
.coloredShadow(shadowColor)
.onFocusChanged { state ->
isFocused = state.isFocused
}
.focusable(),
) {
// Content here
}
}
}
}
}
}
}
fun Modifier.coloredShadow(color: Color) = drawBehind {
val shadowColor = color.toArgb()
val transparentColor = color.copy(alpha = 0f).toArgb()
val offsetX = 0.dp
val offsetY = 8.dp
val cornerRadius = 4.dp
drawIntoCanvas {
val paint = Paint()
val frameworkPaint = paint.asFrameworkPaint()
frameworkPaint.color = transparentColor
frameworkPaint.setShadowLayer(
// Set to 400.dp as radius
400.dp.toPx(),
offsetX.toPx(),
offsetY.toPx(),
shadowColor
)
it.drawRoundRect(
0f,
0f,
this.size.width,
this.size.height,
cornerRadius.toPx(),
cornerRadius.toPx(),
paint
)
}
}
How can I get rid of this clipping issue?
