Tile Preview unable to render ProgressIndicatorLayout

[ataulm]

Preview	Emulator

The other previews are fine:

---

The code for the layout:

@WearLargeRoundDevicePreview
@Composable
fun Cir() {
    val context = LocalContext.current
    val deviceParameters = buildDeviceParameters(context.resources)
    LayoutPreview(
        ProgressIndicatorLayout.Builder(deviceParameters)
            .setPrimaryLabelTextContent(
                Text.Builder(context, "Steps")
                    .setTypography(Typography.TYPOGRAPHY_CAPTION1)
                    .setColor(
                        ColorBuilders.argb(
                            ContextCompat.getColor(
                                context,
                                R.color.primary
                            )
                        )
                    )
                    .build()
            )
            .setSecondaryLabelTextContent(
                Text.Builder(context, "5168")
                    .setTypography(Typography.TYPOGRAPHY_CAPTION1)
                    .setColor(
                        ColorBuilders.argb(
                            ContextCompat.getColor(
                                context,
                                R.color.white
                            )
                        )
                    )
                    .build()
            )
            .setProgressIndicatorContent(
                CircularProgressIndicator.Builder()
                    .setProgress(5168f/8000)
                    .setCircularProgressIndicatorColors(
                        ProgressIndicatorColors(
                            /* indicatorColor = */ ColorBuilders.argb(ContextCompat.getColor(context, R.color.primary)),
                            /* trackColor = */ ColorBuilders.argb(Color(1f, 1f, 1f, 0.1f).toArgb())
                        )
                    )
                    .build()
            )
            .setContent(
                Text.Builder(context, "/ 8000")
                    .setTypography(Typography.TYPOGRAPHY_DISPLAY1)
                    .setColor(
                        ColorBuilders.argb(
                            ContextCompat.getColor(
                                context,
                                R.color.white
                            )
                        )
                    )
                    .build()
            )
            .build()
    )
}

Horologist: 0.0.23
Tiles Material Components: https://androidx.dev/snapshots/builds/8730571/artifacts

[ataulm]

The issue is the usage of LayoutPreview which is only intended to showcase smaller components - it has its own root layout set (a Box) so it doesn't expect another root layout to be passed in.

Would we need to have two separate Previews, e.g. a LayoutRootPreview (this works)?

@Composable
private fun LayoutRootPreview(rootLayout: LayoutElementBuilders.LayoutElement) {
    val tile =
        TileBuilders.Tile.Builder()
            .setResourcesVersion("1")
            .setTimeline(
                TimelineBuilders.Timeline.Builder().addTimelineEntry(
                    TimelineBuilders.TimelineEntry.Builder().setLayout(
                        LayoutElementBuilders.Layout.Builder().setRoot(
                            rootLayout
                        ).build()
                    ).build()
                ).build()
            ).build()

    val tileResources = ResourceBuilders.Resources.Builder()
        .build()
    TilePreview(tile, tileResources)
}

[ataulm]

How's this?

@Composable
private fun LayoutElementPreview(
    element: LayoutElement,
    @ColorInt windowBackgroundColor: Int = android.graphics.Color.BLACK,
    tileResourcesFn: ResourceBuilders.Resources.Builder.() -> Unit = {}
) {
    val root = LayoutElementBuilders.Box.Builder()
        .setModifiers(
            ModifiersBuilders.Modifiers.Builder().setBackground(
                ModifiersBuilders.Background.Builder()
                    .setColor(ColorBuilders.argb(windowBackgroundColor))
                    .build()
            ).build()
        )
        .setHorizontalAlignment(LayoutElementBuilders.HORIZONTAL_ALIGN_CENTER)
        .setVerticalAlignment(LayoutElementBuilders.VERTICAL_ALIGN_CENTER)
        .setHeight(DimensionBuilders.ExpandedDimensionProp.Builder().build())
        .setWidth(DimensionBuilders.ExpandedDimensionProp.Builder().build())
        .addContent(element)
        .build()

    LayoutRootPreview(root = root, tileResourcesFn)
}

@Composable
private fun LayoutRootPreview(
    root: LayoutElement,
    tileResourcesFn: ResourceBuilders.Resources.Builder.() -> Unit = {}
) {
    val tile = TileBuilders.Tile.Builder()
        .setResourcesVersion("1")
        .setTimeline(singleEntryTimeline(root))
        .build()

    val tileResources = ResourceBuilders.Resources.Builder()
        .apply(tileResourcesFn)
        .build()

    TilePreview(tile, tileResources)
}

[yschimke]

@ataulm Do I leave the PR to you, no rush from my side. And good to know that the approach works with all component types.

[ataulm]

Addressed in #240