androidcardelevation

Card has a different shadow for different row

Can't catch why the shadow for the card in each row is different?

enter image description here

Difference between card shadow in first row and in the last

enter image description here

Created it like that

@Composable
@Preview
fun DigitalKeyboardCompose(
 ...
) {
Column(
        Modifier
            .fillMaxWidth()
            .onGloballyPositioned { size = it.size.toSize() },
        Arrangement.spacedBy(gap, Alignment.CenterVertically),
        Alignment.CenterHorizontally
    ) {
     repeat(3) { i ->
            Row(horizontalArrangement = Arrangement.spacedBy(gap)) {
                repeat(3) { j ->
                    DigitalKeyboardKey(sizeInDP, i * 3 + j + 1, isEnabled, disableColor, onClick)
                }
            }
        }
     Row(horizontalArrangement = Arrangement.Center) {
            DigitalKeyboardKey(sizeInDP, 0, isEnabled, disableColor, onClick)
        }
    }

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun DigitalKeyboardKey(size: Dp, key: Int, isEnabled: Boolean, disableColor: Int, onClick: ((Int) -> Unit)?) {
    Card(
        elevation = 4.dp,
        modifier = Modifier.width(size).height(size),
        border = BorderStroke(1.dp, if (isEnabled) MaterialTheme.colors.primary else Color(disableColor)),
        shape = RoundedCornerShape(8.dp),
        enabled = isEnabled,
        onClick = { if (isEnabled) onClick?.invoke(key) }
    ) {
        Box(contentAlignment = Alignment.Center) {
            Text(
                key.toString(),
                color = if (isEnabled) MaterialTheme.colors.primary else Color(disableColor),
                fontFamily = FontFamily.SansSerif,
                fontWeight = FontWeight(500),
                fontSize = TextUnit(28f, TextUnitType.Sp)
            )
        }
    }
Solution

  • According to this thread the light source in Android is positioned at an altitude of 45 degrees and an angle of 90 degrees. This should make some portions of screen receive more light than the others in order to create sense of depth and dimensionality.

    This is the reason why the shadows for the components with the same elevation are cast differently on different parts of the screen.