Android custom gridview layout (textview with imageview on top)

Question

I'm trying to work out how to create the layout for a gridview for my game. I have a gridview which will be the level selector. At the moment I have each gridview item as a TextView, just showing the Level Number (1, 2, 3, etc).

I would like to add 3 imageviews over the top of the textview and be able to manipulate the image shown in the views. The 3 image views are stars, showing what difficulty the level was completed on.

I figure I need to write my own Adapter and inflate the XML layout when creating the views for the grid items but I'm stuck with how to create the actual layout for this, the overlapping part has me scratching my head?

Here's a mockup of what I've tried to describe, and what I want to create:

PS. I know I could use 4 images and set the textview background to one of those images but I wondered if there was a more technical way of creating the layout.

Answer 1

I would use a relative view!

The basics would be, define your button background Bitmap/Drawable with the #1 on it, and then, for each button, have a layout with the copper, silver and gold stars. You can use android:layout_alignParentLeft="true" and android:layout_alignParentBottom="true" on the Copper start and base the other alignments off of that one. Then you just set the stars drawable based on if the star is toggled on or of.

I'm going to use rough psuedo code here:

<RelativeLayout android:id="button1">
  <ImageView android:id="copper_star" android:layout_alignParentLeft="true" android:layout_alignParentBottom="true" />
  <ImageView android:id="silver_star" android:layout_alignParentBottom="true" android:layout_rightOf="@id/copper_star"/>
   ...etc...
</RelativeLayout>

Once you've got it looking the way you want, you can see this discussion by Mark Murphy. He explains how to set the properties of a button to do what you'd like.

Answer 2

最后，我使用了非技术性的4张图像，它很简单，而且在网格中滚动时没有任何问题，所以一切都很好。