Is there a way to force `@Preview` to draw wirefra...

# compose

[Denis]

Is there a way to force @Preview to draw wireframes? Most of the time it shows them, but sometimes there are no wireframes or just a part of it.

[Denis]

Android Studio Arctic Fox | 2020.3.1 Canary 5
Build #AI-203.6682.168.2031.7101492, built on January 25, 2021
Runtime version: 11.0.8+0-b944-P17168821 amd64
VM: OpenJDK 64-Bit Server VM by N/A
Linux 5.4.94

[Chris Sinco [G]]

If you mean the bounding boxes / lines on Preview, right now, it only shows on hover of a Preview and/or if your cursor is within the function that the Preview is representing. You would like to see them all the time, regardless of keyboard/mouse focus?

[Chris Sinco [G]]

We also are working on adding the Blueprint mode from the Constraint Layout tools, that will provide folks another view of the Preview.

[Denis]

@Chris Sinco [G], yes, I was talking about "the bounding boxes / lines on Preview". And yes, I hover the cursor over a preview, but sometimes it's like something breaks and the boxes are not shown. And sometimes just a portion of boxes are shown, and other elements stay clean. I don't get the pattern of this behavior yet.

[Denis]

I've just restarted Android Studio, but it still doesn't render all boxes. (There's no cursor on the screenshot, but it was really there. And it shows the same boxes if I hover the cursor over any part of the preview)

[Chris Sinco [G]]

Interesting - that shouldn’t be happening. It may be a bug - are you able to share the code for the Composable you are previewing here?

[Denis]

@Chris Sinco [G], It doesn't look like it depends on code to be honest.

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            var dark by remember { mutableStateOf(false) }
            ExperimentsTheme(darkTheme = dark) {
                Surface(color = MaterialTheme.colors.background) {
                    ListItemsApp(dark, setDark = { dark = it })
                }
            }
        }
    }
}

@Preview(showBackground = true)
@Composable
fun ListItemsAppPreview() {
    ListItemsApp(false, {})
}

@Composable
fun ListItemsApp(dark: Boolean, setDark: (Boolean) -> Unit) {
    LazyColumn {
        val paddingModifier = Modifier.padding(bottom = 8.dp)
        item {
            ListItem(
                modifier = Modifier.clickable(onClick = { setDark(false) }),
                trailing = { RadioButton(selected = !dark, onClick = { setDark(false) }) },
                text = { Text("Light") },
            )
            ListItem(
                modifier = Modifier.clickable(onClick = { setDark(true) }),
                trailing = { RadioButton(selected = dark, onClick = { setDark(true) }) },
                text = { Text("Dark") },
            )
            Divider()
        }

        for (i in (1..7)) {
            item {
                Text(
                    "Block $i",
                    modifier = Modifier.padding(16.dp),
                    style = MaterialTheme.typography.subtitle1
                )
                ListItem(
                    text = { Text("$i. List item with switch") },
                    secondaryText = { Text("Short secondary text") },
                    trailing = { Switch(checked = i % 4 == 0, onCheckedChange = {}) },
                )
                ListItem(
                    text = { Text("$i. List item with radio button") },
                    secondaryText = {
                        Text(
                            "Somewhat long secondary text that may wrap on the second line, but I'm not sure about that",
                            modifier = paddingModifier
                        )
                    },
                )
            }
        }
    }
}

[Denis]

Right now it shows different boxes:

[Denis]

Or maybe it does. Looks like it doesn't work well with LazyColumn?

[Denis]

LazyColumnPreview doesn't show all boxes

@Preview
@Composable
fun LazyColumnPreview() {
    Surface {
        LazyColumn {
            item {
                Column {
                    Text("ABC")
                    Text("DEF")
                }
            }
            item {
                Text("GHI")
            }
        }
    }
}


@Preview
@Composable
fun ColumnPreview() {
    Surface {
        Column {
            Column {
                Text("ABC")
                Text("DEF")
            }
            Column {
                Text("GHI")
            }
        }
    }
}

[Chris Sinco [G]]

Ah yes - that is likely the issue. I discussed with @nosuid on this and he found the same issue. We will get this addressed - thanks!