Introduction

Creating the Menu

Before I jump into the code I’m going to take a second to explain my way of coding menus in Android. As we all know Android is built on the concept of activities. If you have been following earlier tutorials you already know how to create activities which can display graphics and deal with player input. But what if you want several different screens, such as options or credits? You could code them all into one activity but you would end up with a bloated and hard to maintain class.

The Android way of course is to split the screens in different activities. So you would have one for the options screen, one for the credits and of course one for the main game. This tutorial will show you how to create new activities via a menu with custom image buttons that change based on state.

Below is a screen shot of the menu application. Please forgive my terrible art skills but it is good enough to demonstrate custom button designs and how to create them yourself.

The next picture shows the button when in focus  but not clicked.

And finally this picture shows the button pressed down.

I apologise once more for the art skills but hey I’m a coder not an artist.

Each of the buttons in the example I’ve coded up will start a new activity. I’ve only added a simple text view and some basic text but in your games you would add whatever you wanted the screen to show. The exception is your main game activity which would load your graphics thread and start the game.

Now I’ve showed you the eventual result of the tutorial we can jump into some code. We first need to create the XML layout to display the buttons. The Layout I made simply  creates four buttons in a table layout separated by some blank text views. The text views are simply to create a spacer between the buttons and are not used for anything else.

The Important parts of this code is the android:background fields for each button. The field itself specifies a background to use for the button. If you set this to point to a normal image the button would display it fine, however it would stay the same even when clicked or in focus.

In order to get it to change if clicked we need to tell it when to change and what image to change to. We do this in a separate XML file. So...

1

android:background="@drawable/startgame_button"

Actually refers to a XML file called startgame_button.xml.

The XML file for the start game button is show below. It is created in the drawables folder and is a lot simpler then it looks. It defines four selectors which is the way android decides which image it should draw for the button.

1
2
3
4
5
6
7

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true" android:state_pressed="false" android:drawable="@drawable/startgame_highlighted" />
    <item android:state_focused="true" android:state_pressed="true" android:drawable="@drawable/startgame_pressed" />
    <item android:state_focused="false" android:state_pressed="true" android:drawable="@drawable/startgame_pressed" />
    <item android:drawable="@drawable/startgame" />
</selector>

The first selector is for when then button is focussed but not pressed. In this case I specified it should draw the startgame_highlighted image that is in the drawables folder. The second one is for if the button is focussed and pressed in which case it should draw the startgame_pressed image. The third is for when the button is not focussed but it pressed in which case we want to draw the startgame_pressed image. Finally there is the default case; in this case we only want to draw the normal startgame image.

Each button needs to have its own XML file to set which images to draw. Once that is done it is time to add code to the buttons to create the new activitys.We first need to create new classes to represent each new screen.

1
2
3
4
5
6
7
8

public class StartGame extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.startgame);
    }
}

Above is the code for the StartGame Activity. This is just an example and is the simplest activity it is possible to write. Its layout file simply specifies a text view and some basic text. In a real game it is here you would setup your custom views and graphics threads as explained in earlier tutorials. Each of the other screens also has an activity created for it in the same way and you would adjust the code in each activity to display what you wanted in each.

We now need to know how to start each of these activities. We do this in the Menu Class which in my case is the entry point for the app. Again this is as simple as it is possible to make the class. This class implements the onCreate() function which in turn creates four Button listeners for each of the buttons.  The code below shows the code for one of the listeners.

1
2
3
4
5
6
7

Button StartGameButton = (Button) findViewById(R.id.StartGame);
StartGameButton.setOnClickListener(new OnClickListener() {
    public void onClick(View v) {
        Intent StartGameIntent = new Intent(Menu.this,StartGame.class);
        startActivity(StartGameIntent);
    }
});

Firstly we create a reference to the Startgame Button using findviewById() to get the right button. We then define a new onClickListener. This basically is just a way of specifying what to do when you click the button. When the Startgame button is pressed it calls the associated onClick function.

The two most important lines in the code are show below.

1
2

Intent StartGameIntent = new Intent(Menu.this,StartGame.class);
startActivity(StartGameIntent);

This code creates the intent to start the activity and then calls the startActivity function to start it.The intent  construtor requires a refrence to the current class and the name of the class you want to start.You may wonder why we need to specify Intent to create an activity. We have to do this since android is an open platform and its possible to get another application to fulfil an activity that you need.

Obviously we want our activity to be called, so we create an intent which refers explicitly to the activity we want starting. I recommend reading the documentation about intents if this is confusing to you.

Finally we need to declare the activity’s in the application manifest file. So to add the four classes need for the menu we just need to add these lines to the manifest.

1
2
3
4

<activity android:name=".StartGame"></activity>
<activity android:name=".Help"></activity>
<activity android:name=".Options"></activity>
<activity android:name=".Credits"></activity>

That’s all there is too it. I would recommend taking a look at the sample code I’ve provided here which will hopefully make it make more sense. Fell free to add any questions in the comments and i’ll do my best to answer them.

Thanks again to Stephen Flockton, you can find the original article here.

Source code files

File	Description	SDK Version	File size	Last Modified
Menu-Tutorial.zip	The source code for this example		131 Kb	12/08/10 09:05