views:

121

answers:

2

Been stuck on this for days, things just aren't working with how I'm setting this up. I have a large grid of ImageViews which are all the same size. It's made up of a Horizontal LinearLayout and within that, 5 Vertical LinearLayouts (first picture).

What I want (and I don't care how, be it using RelativeLayout, Linear or Tables) is if I were to set say Image #2 to a larger image (specifically 3x3 of the smaller ones) I want it to effectively 'overwrite' those images (as shown in picture 2).

I've tried doing this by setting the 'overwritten' images (3,4,7,8,9,12,13,14) to setVisibility(GONE) which works fine but then the second vertical LinearLayout has expanded to fit the size of the new image which I don't want. If I try setting it to fill_parent though it squashes the size of the image. As a result, what I get is the third picture.

All associated XML code (id codes match those on the image):

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"> 
<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"> 
    <ImageView android:id="@+id/gs01"
        android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
        />
    <ImageView android:id="@+id/gs06"
        android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
        />
    <ImageView android:id="@+id/gs11"
        android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
        />
    <ImageView android:id="@+id/gs16"
        android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
        />
</LinearLayout>


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"> 
    <ImageView android:id="@+id/gs02"
        android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
        />
    <ImageView android:id="@+id/gs07"
        android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
        />
    <ImageView android:id="@+id/gs12"
        android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
        />
    <ImageView android:id="@+id/gs17"
        android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
        />
</LinearLayout>


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"> 
    <ImageView android:id="@+id/gs03"
        android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
        />
    <ImageView android:id="@+id/gs08"
        android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
        />
    <ImageView android:id="@+id/gs13"
        android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
        />
    <ImageView android:id="@+id/gs18"
        android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
        />
</LinearLayout>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"> 
    <ImageView android:id="@+id/gs04"
        android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
        />
    <ImageView android:id="@+id/gs09"
        android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
        />
    <ImageView android:id="@+id/gs14"
        android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
        />
    <ImageView android:id="@+id/gs19"
        android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
        />
</LinearLayout>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"> 
    <ImageView android:id="@+id/gs05"
        android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
        />
    <ImageView android:id="@+id/gs10"
        android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
        />
    <ImageView android:id="@+id/gs15"
        android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
        />
    <ImageView android:id="@+id/gs20"
        android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
        />
</LinearLayout>

</LinearLayout>

If I were to do this using RelativeLayouts, I run into problems when I setVisibility(GONE) since the position may very well be referenced using a missing View. Setting it to INVISIBLE just leaves a blank space, when what I really want is effectively it to be of 0px by 0px in size.

Any help at all would be appreciated; it seems no matter what I try something always goes slightly wrong with it, and it's driving me insane.

alt text

+2  A: 

Hmm, I'll come back to this when I get home and try some things, but I would recommend trying a TableLayout with 5 rows, 5 columns. You should be able to set your row and column span in code (to let a view take up more than one cell). That's what I would try first.

This post looks helpful.

kcoppock
Thanks for the help. The problem I found with TableLayout is that whilst you can do COLSPAN, you can't do ROWSPAN, so in the example I gave originally Image #1 would be stretched (if fill_parent) or there would be empty space where #6 and #11 are (if wrap_content).
Dororo
Ah, okay. That's a good question, then. I've never used a GridView yet, but it looks like it could be a possible solution. (Wish I had Eclipse here...)
kcoppock
My only problem with GridView is that I don't think it will allow the layout I want, since it will crop/resize the images to make sure it makes a grid, as in I don't think it will allow an image to span multiple 'grid squares'.I'm looking into using a base TableLayout which holds placeholder images and then using RelativeLayout to snap the bigger images to whichever cell I want, but I'm having trouble specifying say "android:toLeftOf='@ID/some_id'" in code and not XML. Any help?
Dororo
A: 

Finally got it working using RelativeLayout and anchors. Anchors are set to be the size of 1x1 grid square, then you have another set of image views AlignLeft and AlignTop on the position you want it e.g:

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/relay"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"> 

    <ImageView android:id="@+id/a_t1"
        android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|left"
        />
    <ImageView android:id="@+id/a_t2"
        android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|left"
android:layout_toRightOf="@id/a_t1"
        />
    <ImageView android:id="@+id/a_t3"
        android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|left"
android:layout_toRightOf="@id/a_t2"
        />
    <ImageView android:id="@+id/a_t4"
        android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|left"
android:layout_toRightOf="@id/a_t3"
        />
    <ImageView android:id="@+id/a_t5"
        android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|left"
android:layout_toRightOf="@id/a_t4"
        />


        <ImageView android:id="@+id/a_t6"
        android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|left"
android:layout_below="@id/a_t1"
        />
    <ImageView android:id="@+id/a_t7"
        android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|left"
android:layout_toRightOf="@id/a_t6"
android:layout_below="@id/a_t2"
        />
    <ImageView android:id="@+id/a_t8"
        android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|left"
android:layout_toRightOf="@id/a_t7"
android:layout_below="@id/a_t3"
        />
    <ImageView android:id="@+id/a_t9"
        android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|left"
android:layout_toRightOf="@id/a_t8"
android:layout_below="@id/a_t4"
        />
    <ImageView android:id="@+id/a_t10"
        android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|left"
android:layout_toRightOf="@id/a_t9"
android:layout_below="@id/a_t5"
        />



        <ImageView android:id="@+id/a_t11"
        android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|left"
android:layout_below="@id/a_t6"
        />
    <ImageView android:id="@+id/a_t12"
        android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|left"
android:layout_toRightOf="@id/a_t11"
android:layout_below="@id/a_t7"
        />
    <ImageView android:id="@+id/a_t13"
        android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|left"
android:layout_toRightOf="@id/a_t12"
android:layout_below="@id/a_t8"
        />
    <ImageView android:id="@+id/a_t14"
        android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|left"
android:layout_toRightOf="@id/a_t13"
android:layout_below="@id/a_t9"
        />
    <ImageView android:id="@+id/a_t15"
        android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|left"
android:layout_toRightOf="@id/a_t14"
android:layout_below="@id/a_t10"
        />



<ImageView android:id="@+id/a_t16"
        android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|left"
android:layout_below="@id/a_t11"
        />
    <ImageView android:id="@+id/a_t17"
        android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|left"
android:layout_toRightOf="@id/a_t16"
android:layout_below="@id/a_t12"
        />
    <ImageView android:id="@+id/a_t18"
        android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|left"
android:layout_toRightOf="@id/a_t17"
android:layout_below="@id/a_t13"
        />
    <ImageView android:id="@+id/a_t19"
        android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|left"
android:layout_toRightOf="@id/a_t18"
android:layout_below="@id/a_t14"
        />
    <ImageView android:id="@+id/a_t20"
        android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|left"
android:layout_toRightOf="@id/a_t19"
android:layout_below="@id/a_t15"
        />

    <ImageView android:id="@+id/gs01"
        android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|left"
android:layout_alignLeft="@id/a_t1"
android:layout_alignTop="@id/a_t1"
        />

</RelativeLayout>

So if you want to put something on #2 like my example, change layout_alignLeft and layout_alignTop on id gs01 to be @id/a_t2, and it will work. This gets around the issue with putting setVisibility(GONE) which deletes the 'anchor' point used to calculate the position of the grid spaces.

Now that was complicated. =(

Dororo
Complicated! O.o But glad you were able to get it working!
kcoppock