How to write Composable @Preview for it

[bingningO]

Hello I'm not sure how to write Composable @Preview, as my Composable Balloon works fine on my real device, but can't be displayed in @Preview

here is my code :

@Composable
fun PopupToolTipWithText(
    text: String,
    display: Boolean,
    alignType: PopupToolTipAlignType,
    onDismiss: () -> Unit,
    anchorComposable: @Composable () -> Unit,
) {
    val lifeCycleOwner = LocalLifecycleOwner.current
    val backgroundColor = MaterialTheme.colorScheme.secondary

    val builder = rememberBalloonBuilder {
        setElevation(16)
        setArrowElevation(16)
        setArrowOrientationRules(ALIGN_ANCHOR)
        setArrowPositionRules(ArrowPositionRules.ALIGN_ANCHOR)
        setWidth(BalloonSizeSpec.WRAP)
        setHeight(BalloonSizeSpec.WRAP)
        setPadding(8)
        setMarginHorizontal(16)
        setCornerRadius(4f)
        setBackgroundColor(backgroundColor)
        setBalloonAnimation(OVERSHOOT)
        setOnBalloonDismissListener {
            onDismiss()
        }

        // need to setPreferenceName with ShowCounts to avoid balloon not showing
        setPreferenceName("TooltipBalloon")
        setShowCounts(Int.MAX_VALUE)

        // to avoid memory leak if leaving this page with balloon not dismissed
        setLifecycleOwner(lifeCycleOwner)
    }

    Balloon(
        builder = builder,
        balloonContent = {
            Text(
                text = text,
                color = MaterialTheme.colorScheme.onPrimary,
                style = MaterialTheme.typography.bodySmall
            )
        }
    ) { balloonWindow ->
        if (display) {
            when (alignType) {
                PopupToolTipAlignType.TOP -> balloonWindow.showAlignTop()
                PopupToolTipAlignType.BOTTOM -> balloonWindow.showAlignBottom()
            }
        }
        anchorComposable()
    }
}

@Preview(widthDp = 100, heightDp = 120)
@Composable
private fun PopupToolTipWithTextPreview() {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.White),
        contentAlignment = Alignment.Center
    ) {
        PopupToolTipWithText(
            text = "test",
            display = true,
            alignType = PopupToolTipAlignType.TOP,
            onDismiss = {},
            anchorComposable = {
                Text(
                    text = "test",
                    modifier = Modifier
                        .background(MaterialTheme.colorScheme.primary)
                )
            }
        )
    }
}

[faraz152]

The issue is LocalLifecycleOwner.current — this throws an exception in Compose @Preview because the Preview environment doesn't provide a real LifecycleOwner. The fix is to detect Preview mode with LocalInspectionMode.current and render a static placeholder instead.

Fix

@Composable
fun PopupToolTipWithText(
    text: String,
    display: Boolean,
    alignType: PopupToolTipAlignType,
    onDismiss: () -> Unit,
    anchorComposable: @Composable () -> Unit,
) {
    // In @Preview, LocalLifecycleOwner is not available — bail out early
    val isInPreview = LocalInspectionMode.current
    if (isInPreview) {
        // Just render the anchor so the Preview is meaningful
        anchorComposable()
        return
    }

    val lifeCycleOwner = LocalLifecycleOwner.current
    val backgroundColor = MaterialTheme.colorScheme.secondary

    val builder = rememberBalloonBuilder {
        // ... your existing builder code ...
        setLifecycleOwner(lifeCycleOwner)
    }

    Balloon(
        builder = builder,
        balloonContent = { Text(text = text, ...) }
    ) { balloonWindow ->
        if (display) {
            when (alignType) {
                PopupToolTipAlignType.TOP -> balloonWindow.showAlignTop()
                PopupToolTipAlignType.BOTTOM -> balloonWindow.showAlignBottom()
            }
        }
        anchorComposable()
    }
}

Why LocalInspectionMode works

LocalInspectionMode.current returns true inside Android Studio's @Preview renderer. Using it as a guard lets you:

• Avoid any code that requires a real Android context/window (like Balloon, LifecycleOwner, PopupWindow)
• Still see your anchor composable rendered in the Preview canvas

Optional: show a more representative Preview

If you want the Preview to visually show where the balloon would appear, you can draw a simple placeholder:

if (isInPreview) {
    Box {
        anchorComposable()
        // Fake tooltip above the anchor
        Surface(
            modifier = Modifier.align(Alignment.TopCenter).offset(y = (-40).dp),
            color = MaterialTheme.colorScheme.secondary,
            shape = RoundedCornerShape(4.dp)
        ) {
            Text(
                text = text,
                modifier = Modifier.padding(8.dp),
                color = MaterialTheme.colorScheme.onPrimary,
                style = MaterialTheme.typography.bodySmall
            )
        }
    }
    return
}

This gives a realistic Preview without needing a real Balloon window.