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.
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: