How to Build a Simple Game User Interface

We will now turn our attention to building the user interface for the CowsBells game we have been working on.  As a recap, we started with the initial project setup and then we built the Welcome Screen.  The files we will be working with today are:

• the AndroidManifest.xml file (located in the (project name) directory)
• the MainActivity.java file (from the previous exercise)
• the strings.xml file (to enter new values for the game_activity.xml file)
• the game_activity.xml file (new, will be located in the res/layout folder)
• the GameActivity.java file (new, will be located in the src/(package name) folder)

Create the Game Activity files

We will first create a new XML file.  We open Eclipse and right-click on the layout folder and select New -> Other (or you can type Ctrl-N to make easier).

A New File Wizard will appear, please select "Android XML File" and click Next.

You will then see a New Android XML File window.  You have a number of options to choose from for a Resource Type and Project.  You also have the opportunity to type in the file name.  For this exercise, we type in "game_activity," leave everything the same and click Next.

You will next see an optional window that allows you to type in the configuration folder path and select limitations for this new file.  We will leave that unchanged and click Finish.

You will now see the game_activity.xml file all opened up and ready to go in your project.

Now, let us create the GameActivity.java file that will work with the XML file.  Right click on the src folder and then New->Class.

You will now see a New Java Class window.  Please type in GameActivity and click Finish.

You will now see the GameActivity.java in your project.

AndroidManifest file changes

We will now modify the AndroidManifest file to recognize the GameActivity.  We add five lines of code to the Manifest file.

The reason why this is important is that if you attempt to run this app from Eclipse and if you miss this step, you will receive a message saying that your app has stopped and you will receive an ActivityNotFoundException in your LogCat file.

GameActivity XML/Java file initial changes

What we will do next is modify a line to the GameActivity.java (if it has not been done already) that makes the GameActivity file extend Activity.

This is important in that if "extends Activity" is not added to the declaration, you will receive a message saying that your app has stopped and you will receive a ClassCastException in your LogCat file.  Now we will add two new lines to the game_activity.xml file that are related to the tools context (the best explanation can be found here).

MainActivity Java file changes

We now head to the MainActivity.java file and we add a new Intent that tells the MainActivity to navigate to the GameActivity.  We set a new Intent to go from MainActivity to GameActivity and then we start the activity.

We now run the app from Eclipse and press on one of the buttons in the main screen and we get the following:

GameActivity Java/XML Structure

We now move on to building out the structure of the game_activity.xml file and adding the Java code that will work with the XML file.  We begin by adding a TextView for the label, an EditText for the number you wish to enter and two buttons (one for submitting your answer and one to start a new game).  We also want to group the TextView and EditText in a LinearLayout and the Buttons in a separate LinearLayout so that it would look nice.  For the TextView/EditText LinearLayout, we would have the segment look like this:

For the Submit/New Game Buttons LinearLayout, the segment would look like this:

We would also want to open the strings.xml file to add new values for submit, newGame and guess.  When we run the app using Eclipse and press on one of the buttons, we get this:

We can now go into the source code implementation of the GameActivity.  First, you need to build the onCreate function and include the Intent and EditText for your guess.  Once you're done, your code snippet should look like this:

The next thing you want to do is add the submit and newGame functions.  For this purpose, we will get it to display a Toast message identifying the button just pressed and in the case of the Submit button, your guess.  Your code snippet should look like this:

When we now run the app in Eclipse, this is what you get when you click any of the buttons:

 

One more thing we would like to do at this point is to add a multi-column list view so that we can add the list of guesses generated.  One example to put together a multi-column list view can be found here.  Once your row layout file is setup, you can add your ListView to the GameActivity.  From there, you can now add your code to integrate the ListView into your game_activity.xml file according to the directions of the example.  When you run the app on Eclipse and click on one of the buttons, you should get this:

This is your end result for now.  Stay tuned to this channel for more lessons on putting this app together.