On the following image I would like to detect what part of the human body the on touch event happened. My idea was to have a GridView and determine the position of the human body where the touch event happened. A GridView seems an overkill though. Would it be a better approach with a different layout ?
gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
BodyImage item = (BodyImage) parent.getItemAtPosition(position);
switch (position) {
case 0:
// code for head
break;
case 1:
// code for nose
case 2:
// code for n-human part
Here is the image to give the audience an idea enter image description here
Our company did exactly this in our Android app for diagnostic decision support.
We started out with the image of the human form (called a homunculus). Our graphic designer also created transparent overlays of each of the body parts highlighted (to show selection), and also mapped out complex polygons for each area that could be activated by touch. In other words, each touchable area was represented by a set of (x,y) coordinates that roughly outlined the body part.
For the layout, the main container is a FrameLayout containing an ImageView with the homunculus image, overlaid with ImageViews for each highlight image with visibility="gone". An OnTouchListener is used instead of an OnClickListener so that we can get the (x,y) coordinates from the MotionEvent parameter.
In the OnTouchListener, we iterate through all the polygons and hit test to see if a polygon contains the point. If so, then we have our part.
We have a custom Polygon class mainly to do the hit testing. A contains(int x, int y) method was implemented to do the hit testing and used code based on this algorithm: http://alienryderflex.com/polygon/
For drawing the highlight, we have a PolygonDrawable class that creates a Path using the coordinates, creates a PathShape from the path that can be rendered to the UI.
