the UI and the basics

Here, we will lay out a home menu screen UI and a UI for the game itself. We will

also configure some IDs for some of the UI elements so that we can control them in

our Java code later:

1. Create a new application called Memory Game and clean up the code if you wish.

2. Now we create a new activity and call it GameActivity. So right-click on the java folder in Project Explorer, navigate to New | Activity, then click on

Next, name the activity as GameActivity, and click on Finish. For clarity, clean up this activity in the same way as we cleaned up all our others. 3. Make the game fullscreen and lock the orientation as we did in the Going

fullscreen and locking orientation tutorial at the end of Chapter 4, Discovering Loops and Methods.

4. Open the activity_main.xml file from the res/layout folder.

Let's quickly create our home screen UI by performing the following steps:

1. Open activity_main.xml in the editor and delete the Hello World TextView. 2. Click and drag the following: Large Text to the top center (to create our title

text), Image just below that, another LargeText below that (for our high score), and a Button (for our player to click to play). Your UI should look a

3. Adjust the text properties of the two TextViews and the Button element to make it plain what each will be used for. As usual, you can replace the Android icon in the ImageView with any image you choose (as we did in Chapter 4, Discovering Loops and Methods, in the Adding a custom image tutorial). 4. Tweak the sizes of the elements in the usual way to suit the emulator or

device you will be running the game on.

5. Let's make the ID for our Hi Score TextView more relevant to its purpose. Left-click to select the Hi Score TextView, find its id property in the

Properties window, and change it to textHiScore. The IDs of the image and the title are not required, and the existing ID of the play button is button, which seems appropriate already. So there is nothing else to change here.

Let's wire up the Play button to create a link between the home and the game screens, as follows:

1. Open MainActivity.java in the editor.

2. Add implements View.onClickListener to the end of the MainActivity declaration so that it now looks like this:

public class MainActivity extends Activity implements View.OnClickListener {

3. Now hover your mouse over the line you just typed and right-click on it. Now click on Generate, then on Implement methods..., and then on OK to have Android Studio autogenerate the onClick method we must implement. 4. At the end of our onCreate method, before the closing curly brace, enter the

following code to get a reference to our Play button and listen to clicks:

//Make a button from the button in our layout Button button =(Button) findViewById(R.id.button); //Make each it listen for clicks

button.setOnClickListener(this);

5. Scroll down to our onClick method and enter the following code in its body to have the Play button take the player to our GameActivity, which we will design soon:

Intent i;

i = new Intent(this, GameActivity.class); startActivity(i);

At this point, the app will run and the player can click on the Play button to take

them to our game screen. So let's quickly create our game screen UI:

1. Open activity_game.xml in the editor and delete the Hello World TextView. 2. Drag three Large Text elements one below the other and center them

horizontally. Below them, add four buttons stacked one on top of the other,

and finally, add another button below that but offset it to the right-hand side

so that it looks like what is shown in the next screenshot. I have also adjusted the text properties for the UI elements to make it clear what each will be used for, but this is optional because our Java code will do all of the work for

us. You can also tweak the sizes of the elements in the usual way to suit the

3. Now let's assign some useful IDs to our UI elements so that we can do some

Java magic with them in the next tutorial. Here is a table that matches the UI elements shown in the last screenshot with the id property value that you need to assign. Assign the following id property values to the corresponding UI elements:

Purpose Default id property New id to assign

Score indicator textView textScore Difficulty indicator textView2 textDifficulty

Watch/go indicator textView3 textWatchGo Button 1 button Leave at default Button 2 button2 Leave at default Button 3 button3 Leave at default Button 4 button4 Leave at default Replay button button5 buttonReplay

Now that we have our game menu and actual game UI ready to go, we can start to make it work.

Phase 2 – preparing our variables and