Is there a problem with the shadow modifier or wha...

# compose

[Ahmed Sellami]

Is there a problem with the shadow modifier or what? When I run the app in a device(emulator or physical), I get this(first pic)
And it looks as expected in the preview(second pic)
Composable code:

@Composable
fun ActionButton(
    modifier: Modifier = Modifier,
    vector: ImageVector? = null,
    text: String,
) {
    Column(
        modifier = modifier
            .background(MaterialTheme.colorScheme.background)
            .padding(16.dp)
            .wrapContentSize(),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Box(
            modifier = Modifier
                .size(100.dp)
                .clip(MaterialTheme.shapes.large)
                .background(MaterialTheme.colorScheme.background)
                .shadow(
                    elevation = 2.dp,
                    shape = MaterialTheme.shapes.large
                ),
            contentAlignment = Alignment.Center,
        ) {
            vector?.let {
                Icon(
                    modifier = Modifier.size(42.dp),
                    imageVector = vector,
                    contentDescription = text,
                    tint = MaterialTheme.colorScheme.primary,
                )
            }
        }

        Text(
            text,
            style = MaterialTheme.typography.titleSmall,
            modifier = Modifier.padding(top = 8.dp)
        )
    }
}

Preview code:

@Preview(showBackground = true)
@Composable
fun ActionButtonPreview() {
    JetpackComposeTestTheme {
        ActionButton(
            modifier = Modifier,
            vector = Icons.Outlined.ShoppingCart,
            text = "Purchase"
        )
    }
}

Usage in activity:

setContent {
            JetpackComposeTestTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    ActionButton(
                        modifier = Modifier,
                        vector = Icons.Outlined.ShoppingCart,
                        text = "Purchase"
                    )
                }
            }
        }

The theme is nothing custom, it's just generated when I created the project, but here is the code anyway:

@Composable
fun JetpackComposeTestTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    // Dynamic color is available on Android 12+
    dynamicColor: Boolean = true,
    content: @Composable () -> Unit
) {
    val colorScheme = when {
        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
            val context = LocalContext.current
            if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
        }

        darkTheme -> DarkColorScheme
        else -> LightColorScheme
    }
    val view = LocalView.current
    if (!view.isInEditMode) {
        SideEffect {
            val window = (view.context as Activity).window
            window.statusBarColor = colorScheme.primary.toArgb()
            WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = darkTheme
        }
    }

    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography,
        content = content
    )
}

[Kirill Grouchnikov]

If you want people to help, you need to put in a bit more work into the question.

1. Don’t assume that the problem is outside of your code. Instead of phrasing it “Is there a problem with the framework code or what” - especially since some of the people who might be able to help you are working on that framework, and now are on defense - say something along the lines of “this is my code, and it doesn’t seem to do what I want it to”
2. The snippet that you put here is not something that people can copy-paste and run directly. Is the outer column with that extra padding needed? What is in the box? Where does the icon come from? Is the text part of the box, or part of the column? Does it need the material shape? Does it need the background modifiers? What are you annotating with the preview annotation? More often than not, in the process of eliminating all the extras to get to the smallest reproducer, you will find your answer.
TL;DR - make the smallest complete sample that shows the issue, and don’t assume where the problem / blame is.

[Ahmed Sellami]

I didn't put any extra details because there is nothing custom, related or tricky aside from that code. I hope I am wrong. I've put everything anyway.