Damian Walker

Personal Web Pages

A Breakthrough!

Wednesday, 20th May 2015

As a first step towards writing a board game app, I wanted to display an empty game board on the screen. This can be done very easily in Android, without any Java. You just have to add an <ImageView> tag in the relevant layout XML file, and include the src attribute like you would in an HTML document. I did this at first and it worked well.

But then I wanted more control over the image: on loading a board game app you wouldn't necessarily see an empty board. In chess, you would want to resume an ongoing game, or if starting fresh, you'd want to see the pieces all in place, with your colour at the bottom. So I went about looking for a way to use Java to load an image and place it on the screen.

As I've found since I started looking into Android, the solutions shown in the developer tutorial, and in many of the pages a Google search returns, are far too complicated for my current needs and understanding, creating new classes left, right and centre, adding functionality I didn't want or need, and generally confusing me. I tried to gain what I could from them but ended up with an app that presented me with a stubbornly blank screen.

I decided to go back to basics instead. I found a simple app (before I started this diary, sadly, so I can't remember where it was) that put a static image on the screen as I had done before. I also found that the image can be changed using the setImageBitmap method of the ImageView object.

Building on the first tutorial from the Android developer site, I created a simple app that would load up one default image.

The XML added to the layout is:

<ImageView android:id="@+id/imageview" android:src="@drawable/initial" android:layout_width="match_parent" android:layout_height="wrap_content" android:adjustViewBounds="true" android:scaleType="fitCenter" />

I've forgotten about board games for the moment; initial.png is a stock photo of the Arc de Triomphe, just because. I then added a menu option to change this image from another. In the menu's XML file I removed the Settings option and replaced it with:

<item android:id="@+id/action_castle" android:title="@string/action_castle" android:orderInCategory="100" app:showAsAction="never" />

I added the action_castle string to the strings.XML file as follows:

<string name="action_castle">Castle</string>

The Java code that changes the image to the castle is inserted into the onOptionsItemSelected method, and the meat of it is just a few lines long:

ImageView mImageView = (ImageView) findViewById (R.id.imageview);

This gets a reference to the ImageView object that's currently being displayed on the screen.

mImageView.setImageBitmap (BitmapFactory.decodeResource(getResources(), R.drawable.castle));

This line then changes the bitmap that the ImageView is showing, from whatever it is currently to the file castle.png in my project's drawable directory.

After the struggles I've had over the past several days I wasn't expecting it to be as simple as this. I was expecting another step like the repaint needed in Java applets. But to my satisfaction that's not necessary.

In a board game app, if I learn of no better solution, I can implement moves simple as a flip-frame animation. I would build up an altered board image after a move using an off-screen Bitmap object, and then use the method above to replace the currently-shown position with the new one.