Hello! Has anyone by any chance encountered a problem where a line appears in Previews between two c...

# compose

[tankistorep]

Hello! Has anyone by any chance encountered a problem where a line appears in Previews between two composables that use background X, if the parent composable uses background Y? More details in thread.

[tankistorep]

This is the preview:

[tankistorep]

image.png

[tankistorep]

@Composable
fun TestScreen() {
    Column(
        modifier = Modifier
            .background(Color.White)
            .fillMaxSize()
    ) {
        Spacer(
            modifier = Modifier
                .fillMaxWidth()
                .height(20.dp)
                .background(color = Color.Black)
        )
        Spacer(
            modifier = Modifier
                .fillMaxWidth()
                .height(20.dp)
                .background(color = Color.Black)
        )
    }
}

@Preview
@Composable
fun TestScreenPreview() {
    TestScreen()
}

Simple code to recreate

[tankistorep]

This only seems to appear in Previews, I tried running this on a Pixel 4 preview and emulator, and the former had the issue whereas the latter didn’t. But I want to be sure that this is indeed a preview issue and will not ever be seen by users. I can’t seem to find anything online about it.

[ephemient]

this can happen on any device where 20.dp is not an integer number of pixels

[ephemient]

https://androiddev.social/@alex_vanyo/109756964785523265

[tankistorep]

Right, that was exactly my worry.

[tankistorep]

Is there any hack I could use to close the gap between the Spacers? For my use case it’s slightly hard to just put same background behind both, as they can’t live under the same layout