https://kotlinlang.org logo
Title
t

tankistorep

04/04/2023, 4:22 PM
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.
This is the preview:
image.png
@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
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.
e

ephemient

04/04/2023, 4:26 PM
this can happen on any device where
20.dp
is not an integer number of pixels
t

tankistorep

04/04/2023, 4:31 PM
Right, that was exactly my worry.
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