How do i create a custom clickable graphic for my android app?

Question

I want to create an interactive graphic for my app. It will essentially be a simple picture of a bus line where users can select 2 stops at a time (one for departure times and another for arrivals) I'm not sure how to create this image though, and have it have 20 or so different clickable points. Is there a framework I could use for this? Or is there a way to do this in pure android?

Thanks for the help.

Answer 1

I would suggest writing an onClick listener and using a collection of Rect instances to manage the collision/position of the 'click'. Check out the on click page and the rect page .

One thing to keep in mind are the origin point of your clicks, I'd assume you'll want to use one corner of your image as the point (0,0) and reference everything (clicks and rects) from there.

Answer 2

I would say try to create an ImageView to load your image and set a touch event listener or a click listener to that view. Hard code all places that you want your image to react upon a click.

Check click using an event listener would require you to handle both ACTION_DOWN and ACTION_UP in the MotionEvent object passed in. But it's easier to grab the coordinate of where the user clicks on the page, so you only need one listener but needs to put more work on handling the conversion from the coordinate passed in by MotionEvent to the coordinate on image. This is particular a major issue when your image can be sized larger than the screen size.

Using a click listener would save you from this trouble. As @smitec said, you need to overlay rectangles on your image as "buttons", so you can react to user input based on which buttons they pressed. This way you need to bind listeners to all of them (I suppose) and hard code their positions on your image. But, as mentioned earlier, it saves you from dealing with coordinates later on.