setOnBalloonOverlayClickListener does not work

[de-honcker]

setOnBalloonOverlayClickListener does not work. The listener block assigned was not invoked.

• Library Version v1.3.1 Update example EditBalloonFactory code to the following and add setOnBalloonOverlayClickListener

  override fun create(context: Context, lifecycle: LifecycleOwner?): Balloon {
  return Balloon.Builder(context)
    .setText("You can edit your profile now!")
    .setArrowSize(10)
    .setWidthRatio(1.0f)
    .setHeight(BalloonSizeSpec.WRAP)
    .setArrowPositionRules(ArrowPositionRules.ALIGN_ANCHOR)
    .setArrowPosition(0.5f)
    .setPadding(12)
    .setMarginRight(12)
    .setMarginLeft(12)
    .setTextSize(15f)
    .isRtlSupport(BalloonUtils.isRtlLayout())
    .setCornerRadius(8f)
    .setTextColorResource(R.color.white_87)
    .setIconDrawableResource(R.drawable.ic_edit)
    .setBackgroundColorResource(R.color.skyBlue)
    .setBalloonAnimation(BalloonAnimation.ELASTIC)
    .setIsVisibleOverlay(true)
    .setOverlayColorResource(R.color.overlay)
    .setOverlayPadding(6f)
    .setOverlayShape(BalloonOverlayRoundRect(12f, 12f))
    .setLifecycleOwner(lifecycle)
    .setDismissWhenClicked(true)
    .setOnBalloonDismissListener {
      Toast.makeText(context.applicationContext, "dismissed", Toast.LENGTH_SHORT).show()
    }.setOnBalloonOverlayClickListener { 
      Toast.makeText(context.applicationContext, "overlay", Toast.LENGTH_SHORT).show()
    }.build()
  }
  }

Build and run the sample app. Click on the Edit Profile button Balloon is shown with overlay on top of the button Click on the overlay on top of the Edit Profile button

Observed Balloon dismissed with no overlay toast

Expected Behavior: overlay toast is displayed before dismissing balloon.

[skydoves]

Hi, please try using the below code.

      .setDismissWhenTouchOutside(false)
      .setOnBalloonOverlayClickListener {
        Toast.makeText(context.applicationContext, "setOnBalloonOverlayClickListener", Toast.LENGTH_SHORT).show()
      }.build()

There are a lot of listeners and it could be invoked at the same time, so we should call each action.

[de-honcker]

Thanks. setDismissWhenTouchOutside(true) was preventing the listeners to fire. Setting it to false works.

[NattyBadWolf]

Hi @skydoves But what if I need both behaviour, dismiss when touch outside AND click on balloon overlay? What should I do? Thanks!

[skydoves]

Hi, @NattyBadWolf You can implement it using the below codes.

setIsVisibleOverlay(true)
setDismissWhenTouchOutside(false)
setDismissWhenOverlayClicked(false)
setOnBalloonOverlayClickListener {
    Toast.makeText(context.applicationContext, "setOnBalloonOverlayClickListener", Toast.LENGTH_SHORT).show()
}

[NattyBadWolf]

Probably I wasn't very clear, I need click on overlay shape so it performs the same behavior as without balloon. Also I need dismiss when clicked outside. Is it possible?

[abhimuktheeswarar]

Hi, Thanks for this awesome library. Our requirement is: when clicking on the anchor view, which is highlighted, we need a callback (listener). But when clicking outside, the ballon should dismiss. Some like this will do:

setIsVisibleOverlay(true)
setDismissWhenTouchOutside(false)
setDismissWhenOverlayClicked(false)
setOnHighlightedViewClickListener {
    Toast.makeText(context.applicationContext, "setOnHighlightedViewClickListener", Toast.LENGTH_SHORT).show()
}

[12345debdut]

@NattyBadWolf I have achieved the same thing with a bit hack such as --> .setOnBalloonOverlayTouchListener { _, motionEvent -> if(binding.anchorView.isInRange(PointF(motionEvent.rawX, motionEvent.rawY))) { // Do what ever you want with the touch for overlay click } else { // Do whatever you want with the outside touch. } }

fun View.isInRange(point: PointF): Boolean { val topLeft = getActualLocationOnScreenP(getCenterX = false, getCenterY = false) val xRange = topLeft.x..(topLeft.x + width) val yRange = topLeft.y..(topLeft.y + height) return (point.x in xRange) && (point.y in yRange) }