1

I would like to make a simple Android game where a large background image is displayed and some other images are displayed in specific locations over it, where the other images may be clickable.

Here's a quick sample image of what I'm talking about: enter image description here

The user should be able to tap the soccer player or the moose (ah, the classic "soccer player moose problem"!)

How should I render this screen (which layouts and views?) so the user can interact with it and it will scale properly on different devices?

user605331
  • 3,718
  • 4
  • 33
  • 60

5 Answers5

2

ImageView for the clickable elements seems like a fine choice to me. For the background I would just set your image as the background of the parent layout i.e. RelativeLayout

FoamyGuy
  • 46,603
  • 18
  • 125
  • 156
  • In this case, if I make sure to specify all dimensions of everything in dp, can I expect the clickable items to stay in the same place relative to the background? That's my main concern for using a RelativeLayout with ImageViews over it - that on a large tablet screen (using high-res, but same aspect ratio images) the clickable items should be in the same locations as they are on a small phone. – user605331 Nov 15 '12 at 14:43
2

I would use a RelativeLayout.

You can set the you background image to the layout (fill_parent for height and width).

You can then put your ImageViews, containing your moose and soccer player down on the layout relative to the top or sides of the sceen, or relative to each other (making sure to specify "dp" units for everything). Set the backgrounds of your ImageViews to be transparent, and there won't be a bounding box problem (and/or you can also set your ImageViews alignment to be relative to each other, ensuring they don't overlap).

I think this is the simplest way to do this - it is then super easy to attach onClickListener to your ImageViews in your Activity, and you are done.

This type of layout will work the same on all devices and screen sizes.

There are some small gotcha's with RelativeLayouts, but they are pretty simple once you get into them, and provide fast rendering (since the view hierarchy is usually shallow). Good Luck.

Booger
  • 18,579
  • 7
  • 55
  • 72
0

SurfaceView for the whole thing (with your field as a background) and regular *ImageView*s for added elements. You can easily recover the click coordinates from the SurfaceView and thus know what element has been touched.

SurfaceView might offer you additional possibilities anyway.

PeterGriffin
  • 910
  • 8
  • 19
  • The ImageView's can handle their own click events... And unless the background needs to have different stuff drawn to it regularly SurfaceView seems like overkill to me, any of the Parent Layouts would work fine for showing a static background image. – FoamyGuy Nov 15 '12 at 14:35
0

For most images, I'd use an ImageView for each one, like FoamyGuy said.

If they're close enough for overlapping bounding boxes to be an issue, you can still use an ImageView for each, but with a variation of this answer, testing alpha for each ImageView in range.

Community
  • 1
  • 1
Geobits
  • 22,218
  • 6
  • 59
  • 103
0

I would agree with both FoamyGuy and Booger that if your only goal is to place static images onto the screen that do something when you click them, RelativeLayout and ImageViews all the way.

But... If you are looking to randomly spawn multiple images onto the screen in intervals and have them move around for the player to interact with while explosions are going off and maidens are being kidnapped, you should look into SurfaceView, Canvas, Drawable, TouchEvents, and FrameBuffers.

Joe
  • 661
  • 2
  • 8
  • 15