Easy way to make an ImageView that is underneath a GridView match the GridView's size exactly?

Question

My ImageView is displaying an image of a chess style board for a little game I'm making. It is covered by a GridView that displays the images of my pieces. I have it displaying underneath but it is not positioned properly. I want it to match exactly the edges of the GridView but don't know how. Is there some way to make the GridView a "parent" of the ImageView so then I could say "match_parent" in the XML for it's height and width and so on?

Here is a screen of how my app looks now. I want the ugly colored grid I made to line up with the GridView images so that the black squares around the edge of my pieces are centered in the squares of the board.

enter image description here

Here is my XML:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/textFieldFU"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >

<ImageView
    android:id="@+id/imageView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/gridview"
    android:layout_alignTop="@+id/gridview"
    android:layout_centerHorizontal="true" />

<GridView
    android:id="@+id/gridview"
    android:layout_width="fill_parent"
    android:layout_height="600dp"
    android:gravity="center"
    android:horizontalSpacing="0dp"
    android:numColumns="8"
    android:stretchMode="columnWidth"
    android:verticalSpacing="10dp" />

Here is the relevant part of my MainActivity:

    @Override
protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    final ImageAdapter iA = new ImageAdapter(this);

    final ImageView board;
    board = (ImageView) findViewById(R.id.imageView1);
    board.setImageResource(R.drawable.board1);


    GridView gridview = (GridView) findViewById(R.id.gridview);
    gridview.setAdapter(iA);
...

And here is the relevant parts of my ImageAdapter that I have which sets up the GridView:

public class ImageAdapter extends BaseAdapter {

public static int[] images = { R.drawable.rock2, R.drawable.paper2,
        R.drawable.scissors2, R.drawable.rock2, R.drawable.paper2,
...//This part goes on for a while...
...//On to the relevant part...
@Override
public View getView(int position, View convertView, ViewGroup parent) {
    ImageView iv;
    if (convertView != null) {
        iv = (ImageView) convertView;
    } else {
        iv = new ImageView(context);
        iv.setLayoutParams(new GridView.LayoutParams(60, 60));
        iv.setScaleType(ScaleType.CENTER);
        iv.setPadding(0, 0, 0, 0);
    }
    iv.setImageResource(images[position]);
    return iv;
}

public static int[] getImagesArray() {
    return images;
}

public void setImagesArray(int[] newImages) {
    images = newImages;
}

----------------EDIT, Added the alternative solution from answer below.--------------

I got rid of the ImageView entirely and just added this to my getView in the ImageAdapter class:

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    ImageView iv;
    if (convertView != null) {
        iv = (ImageView) convertView;
    } else {
        iv = new ImageView(context);
        iv.setLayoutParams(new GridView.LayoutParams(60, 60));
        iv.setScaleType(ScaleType.CENTER);
        iv.setPadding(0, 0, 0, 0);
        if(position < 8 && position % 2 ==0){
            iv.setBackgroundColor(Color.DKGRAY);
        }
        else if(position > 7 && position < 16 && position % 2 ==1){
            iv.setBackgroundColor(Color.DKGRAY);
        }
        else if(position > 15 && position < 24 && position % 2 ==0){
            iv.setBackgroundColor(Color.DKGRAY);
        }
        else if(position > 23 && position < 32 && position % 2 ==1){
            iv.setBackgroundColor(Color.DKGRAY);
        }
        else if(position > 31 && position < 40 && position % 2 ==0){
            iv.setBackgroundColor(Color.DKGRAY);
        }
        else if(position > 39 && position < 48 && position % 2 ==1){
            iv.setBackgroundColor(Color.DKGRAY);
        }
        else if(position > 47 && position < 56 && position % 2 ==0){
            iv.setBackgroundColor(Color.DKGRAY);
        }
        else if(position > 55 && position < 64 && position % 2 ==1){
            iv.setBackgroundColor(Color.DKGRAY);
        }
        else
            iv.setBackgroundColor(Color.GRAY);
    }
    iv.setImageResource(images[position]);
    return iv;
}

Here is how it looks now:

enter image description here

This answer also helped me, http://stackoverflow.com/questions/9062512/how-set-alternate-cell-color-in-a-grid — ChrisWilson4, May 02 '13 at 15:20

score 1 · Accepted Answer · answered May 02 '13 at 13:36

1

You can configure the layout of the base element of your gridview. An imageView with a custom background seems to be what you need. You will have to check in getview in which row you are in order to know which background color to use.

answered May 02 '13 at 13:36

Teovald

4,369
4
26
45

That sounds promising, I'll check in to it now. – ChrisWilson4 May 02 '13 at 13:38
You were right, this is a much better idea than what I was doing. I'll post the solution up top. – ChrisWilson4 May 02 '13 at 15:03
Glad to hear it. It gives the additional benefit of getting rid of a layer. Avoiding as much as possible to pile-up layers is a good idea since it costs a lot of resources (the system has to draw all these successive layers, even if they are not visible. – Teovald May 02 '13 at 15:25

Easy way to make an ImageView that is underneath a GridView match the GridView's size exactly?

1 Answers1

Linked