How do you layer imageViews in an android application?

Question

I'm trying to create my first real Android app, the code seems easy enough, but the layout is giving me problems.

My app will be a drag and drop application, very simple, just drag shapes to the correct place in the "puzzle". Here's an example of how it looks right now:

enter image description here

What I have currently is 4 ImageViews, one for the "empty puzzle" at the top, then 1 for each of the shapes below. I think the correct way to do this is to have each of the empty spots in the puzzle be an ImageView (what the arrow is pointing to, for example, should be an ImageView)

If I am correct on this, I need to "layer" ImageViews, put 3 "empty shape" image views over the "puzzle" image view at the top. The problem is I can't find any examples or suggestions for this anywhere online. So my questions are:

Does it make sense to have 3 ImageViews sitting on top of a "background" ImageView, or is there a more correct way to do this?
If I'm heading in the right direction, could someone explain/examplify how one builds ImageView layers?

XML for my current screen:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
    <ImageView
        android:id="@+id/emptyPuz"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/EmptyPuzzle" />
    <LinearLayout 
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
       android:orientation="horizantal" >
       <ImageView
           android:id="@+id/imageView1"
           android:layout_width="0dp"
           android:layout_weight="1"
           android:layout_height="wrap_content"
           android:adjustViewBounds="false"
           android:src="@drawable/Circle" />
        <ImageView
           android:id="@+id/imageView2"
           android:layout_width="0dp"
           android:layout_weight="1"
           android:layout_height="wrap_content"
           android:adjustViewBounds="false"
           android:src="@drawable/Square" />
        <ImageView
           android:id="@+id/imageView3"
           android:layout_width="0dp"
           android:layout_weight="1"
           android:layout_height="wrap_content"
           android:adjustViewBounds="false"
           android:src="@drawable/Triangle" />
   </LinearLayout>
</LinearLayout>

Are you planing to use the SDK drag and drop system or you're going to implement it yourself? If yes then go with 3 `ImageViews` for each of the empty images. If you're going with your own drag system then I would make a custom view to hold the empty shapes. — user, Sep 16 '13 at 17:58
@Luksprog - I'm planning on using the built in drag-and-drop that was implemented in SDK11. I am planning on using 3 `ImageView`s because of it, but what I don't get is how I put that brown "puzzle" image behind the 3 "empty piece" image views that I'll add. Is that a 4th `ImageView`? If so how do I put one `ImageView` on top of another? — Mike, Sep 16 '13 at 18:00
I would simply build a `LinearLayout`(or other layout) to hold the three empty `ImageViews`, set as the background for that `LinearLayout` the brown area followed by setting the empty shapes to the three `ImageViews` to the color of the background(I'm assuming you want to have a see through effect on the empty areas). To make it easier to build the shapes you could make custom views to draw them directly instead of using ImageViews. — user, Sep 16 '13 at 18:23
@Luksprog - Thanks for the advice, I just looked into a background, that might just work for me I'll give it a shot. I haven't done anything with building shapes or using "custom" views yet. — Mike, Sep 16 '13 at 18:42

Mike · Accepted Answer · 2013-09-17T16:19:46.730

The solution I ended up using was to add a new LinearLayout with the background set to a "puzzle base" image and added three new images with "empty puzzle" pieces on it. Ie: I broke up each of the 3 "empty" puzzle slots into individual images like in this example:

enter image description here

Then used them as backgrounds to a new layout, so where I had this code before:

<ImageView
    android:id="@+id/emptyPuz"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/EmptyPuzzle" />

I now have:

<LinearLayout
   android:layout_width="fill_parent"
   android:layout_height="0dp"
   android:layout_weight="1"
   android:background="@drawable/emptypuzzle"
   android:orientation="horizontal" >
   <ImageView
       android:id="@+id/dropsquare"
       android:layout_width="0dp"
       android:layout_weight="1"
       android:tag="square"
       android:layout_height="wrap_content"
       android:adjustViewBounds="false"
       android:src="@drawable/emptysquare" />
   <ImageView
       android:id="@+id/droptriangle"
       android:layout_width="0dp"
       android:layout_weight="1"
       android:tag="triangle"
       android:layout_height="wrap_content"
       android:adjustViewBounds="false"
       android:src="@drawable/emptytriangle" />
   <ImageView
       android:id="@+id/dropcircle"
       android:layout_width="0dp"
       android:layout_weight="1"
       android:tag="circle"           
       android:layout_height="wrap_content"
       android:adjustViewBounds="false"
       android:src="@drawable/emptycircle" />
</LinearLayout>

Ending with a resultant drag and drop game looking like:

enter image description here

It's not pretty, but my toddler likes it. :)

How do you layer imageViews in an android application?

1 Answers1

Linked