Question

I have a layout which contains a ScrollView which contains various components including an ImageView. I’ve found that I can add a TouchListener to the ImageView and the x,y values I get for the event are offset from the corner of the ImageView (including padding). Thus I can easily handle touch events without worrying about the state of the ScrollView.

The problem is that I don’t see a way to add a view on top of the ImageView so that I can make a visual change to the ImageView when it’s touched in certain locations.

Specifically, there are various boxes in the image which I’d like to highlight when they’re tapped. I can add a view to the activity, but I’d have to take the state of the ScrollView into account in order to display things in the right spot.

What’s the best way to approach this? Can I derive a new version of ImageView, overload the draw method, and use that somehow? (not sure how I’d specify it in the xml, I’d probably need to set it in the onCreate of the activity)

Answer 1

You should be able to override the onDraw method of the ImageView as you suggested and draw stuff on top of the ImageView. The onDraw method gives you the Canvas that you could draw on. In the XML, you could just use the name of the new class you created instead of “ImageView” (unless you want to add parameters in addition to the ones offered by ImageView, this should be pretty straight forward).

<your.new.awesome.class.with.the.full.namespace
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/awesome_image_view"
    />

The problem is that I don’t see a way to add a view on top of the ImageView so that I can make a visual change to the ImageView when it’s touched in certain locations.

It seems that you are more comfortable with having a separate view that you could work on. You could do that by encapsulating the ImageView with a FrameLayout and then adding another view of any kind as a sibling of that ImageView. This view would be drawn on top of the ImageView if it was mentioned in the FrameLayout after the ImageView. This solution may not be the most efficient one, but it might get you started. Overriding the onDraw method of the ImageView would definitely be the best option.