1

I'm trying to create a BalloonPopup that has 2 different buttons or interactive elements, but I don't seem to manage a way to do this. The guide I'm following is here https://carto.com/developers/mobile-sdk/guides/vector-objects-on-map/#balloonpopup in the "Add a BalloonPopup" section.

I did manage to detect onClick events on the BalloonPopup setting a setVectorElementEventListener in the associated Layer. But I don't find a way of detecting which element inside of the BalloonPopup was clicked.

Basically what I want is to have 2 different buttons inside the Balloon, and then detect which of them has been clicked, so I can perform 2 different actions.

I could open an Android floating dialog, but it won't look as great as this would.

Any help will be more than welcome.

Improve this question

1 Answer 1

Reset to default
2
+50

Interesting scenario!

I haven't really thought about two different buttons inside of a BalloonPopup. The thing is, there really isn't a single good answer to give, custom elements inside popups are a niche case. However, there's a pretty solid solution.

Your code seems to be Java, from the function you provided, I hope you don't mind that my answer is in Kotlin. Should be understandable enough.

Since you mentioned you managed to attach a vector element listener, I'm guessing you're aware of this function for getting the click position:

override fun onVectorElementClicked(clickInfo: VectorElementClickInfo?): Boolean {
}

Inside that function, you find the center of the balloonpopup and the click position, as follows:

val position = clickInfo.clickPos
val center = (clickInfo.vectorElement as BalloonPopup).bounds.center

You could find out which button was pressed by comparing the positions clicked, e.g. the left button was clicked, or the top button was clicked:

val isLeftOfCenter = position.x < center.x
val isBelowCenter = position.y < center.y
Improve this answer
6
  • Mmm, that's pretty interesting. I actually tried something like that before writing my question. However, how could I set up the text of the 2 buttons? I can only add a title and a description to the BalloonPopup. If you could allow to pass 2 different texts to be displayed in 2 different colums and/or rows, then I imagine I could make it work that way. However, I imagine a bit more customizable and powerful way of building these Balloons, letting the user add Android Views. Like we can do with the AlertDialog class, that can be easily extended through inflating custom Layouts.
    – xarlymg89
    May 28, 2018 at 16:08
  • Alright, I've been able to play a little bit, and using the Title and the Description, as upper and lower buttons respectively, there's a possible workaround with this. Again, as I said earlier, and as you pointed out, it's not perfect, but it could do the trick. I believe I could even simulate the touch event, by changing the title or description color, at the moment of clicking them. Thanks for the answer!
    – xarlymg89
    May 28, 2018 at 16:54
  • Alright, great to hear you figured it out :)
    – Nikitah
    May 29, 2018 at 7:29
  • Actually I thought I managed to handle both buttons, but it wasn't the case. It seems the clicked position is always above than the center. So I can't use it for upper/lower buttons, which was the only way of setting 2 distinct buttons (thanks to the title and description attributes). Could it be that the center of the BalloonPopup is actually placed in the dialog arrow, on the bottom of it? So it's not really the center of the dialog, but the marker position? It's strange that clickInfo.getVectorElement().getBounds() returns equal minX = maxX and minY = maxY
    – xarlymg89
    May 29, 2018 at 8:32
  • You're right, I was mistaken. Bounds returns the root geometry of the object, a point. Internally, of course, the size is known, but there is no way API for it. So, your two buttons would have to be left and right in order to differentiate touches
    – Nikitah
    May 30, 2018 at 7:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.