Balloon Compose: Show balloon when the compose view is visible, without user interaction

[Jephthah Afolayan]

Please complete the following information:

• Library Version [e.g. v1.0.0]: v1.5.0
• Affected Device(s) [e.g. Samsung Galaxy s10 with Android 9.0]: Pixel 4 with Android 13

Describe the Bug:
I need to display a balloon in my compose view to point users to a new call-to-action (CTA). Since this is a new icon, I need it to be highlighted automatically as soon as the view is displayed.

It shows this way after my implementation, but displays the actual balloon when the icon is clicked.

Add a clear description about the problem.

Expected Behavior:
I expect to get the balloon that's displayed after the onclick, like this, and not the empty one

A clear description of what you expected to happen.

Code snippet:

var balloonWindow: BalloonWindow? = null
val builder = rememberBalloonBuilder {
        setArrowSize(10)
        setArrowPosition(0.5f)
        setArrowPositionRules(ArrowPositionRules.ALIGN_ANCHOR)
        setWidth(BalloonSizeSpec.WRAP)
        setHeight(BalloonSizeSpec.WRAP)
        setPadding(12)
        setMarginHorizontal(12)
        setCornerRadius(8f)
        setBackgroundColor(Color.Gray)
        setBalloonAnimation(BalloonAnimation.ELASTIC)
        setIsVisibleOverlay(true)
        setOverlayColor(Color(0xBF000000))
        setBalloonHighlightAnimation(BalloonHighlightAnimation.HEARTBEAT)
        setLifecycleOwner(lifecycle)
        setDismissWhenLifecycleOnPause(true)
    }

Balloon(
     modifier = Modifier,
     builder = builder,
     balloonContent = {
         Text(text = "Now you can edit your profile!")
     },
     ) { ballonW ->
            balloonWindow = ballonW
            IconButton(
                content = {
                    Icon(
                        painter = painterResource(id = R.drawable.ic_calendar_menu),
                        contentDescription = null,
                        tint = Color.Red
                    )
                },
                onClick = {
                    ballonW.showAlignBottom()
                }
          )
    }

LaunchedEffect(showTooltip) {
    if (showTooltip) {
        balloonWindow?.showAlignBottom()
    }
}

[Jaewoong Eum]

Hey @Afolayan, it seems that you're using very old version of this library. Would you try to build again with the latest version (1.6.3)? Thanks!

[Jaewoong Eum]

Hey @Afolayan, the recent release version, 1.6.4, contains some new APIs, such as onBalloonWindowInitialized, and onComposedAnchor. You can utilize them as seen in the code below:

var balloonWindow1: BalloonWindow? by remember { mutableStateOf(null) }

  Balloon(
    modifier = Modifier.padding(20.dp),
    builder = builder,
    onBalloonWindowInitialized = { balloonWindow1 = it },
    onComposedAnchor = { balloonWindow1?.showAlignTop() },
    balloonContent = {
      Text(
        text = "Now, you can edit your profile!",
        textAlign = TextAlign.Center,
        color = Color.White,
      )
    },
  ) {
    Button(
      modifier = Modifier.size(160.dp, 60.dp),
      onClick = { balloonWindow1?.showAlignTop() },
    ) {
      Text(text = "showAlignTop")
    }
  }
  ..

Thank you for your reporting, and please reopen this issue if you still face the same problem after applying my suggestion.