16 min read

In this article by John Horton, author of the book Learning Java by Building Android Games, we will learn how to set up our development environment by installing JDK and Android Studio. We will also learn how to create a new game activity and layout the same on a game screen UI.

(For more resources related to this topic, see here.)

Setting up our development environment

The first thing we need to do is prepare our PC to develop for Android using Java. Fortunately, this is made quite simple for us.

The next two tutorials have Windows-specific instructions and screenshots. However, it shouldn’t be too difficult to vary the steps slightly to suit Mac or Linux.

All we need to do is:

  1. Install a software package called the Java Development Kit (JDK), which allows us to develop in Java.
  2. Install Android Studio, a program designed to make Android development fast and easy. Android Studio uses the JDK and some other Android-specific tools that automatically get installed when we install Android Studio.

Installing the JDK

The first thing we need to do is get the latest version of the JDK. To complete this guide, perform the following steps:

  1. You need to be on the Java website, so visit http://www.oracle.com/technetwork/java/javase/downloads/index.html.
  2. Find the three buttons shown in the following screenshot and click on the one that says JDK (highlighted). They are on the right-hand side of the web page. Click on the DOWNLOAD button under the JDK option:

  3. You will be taken to a page that has multiple options to download the JDK. In the Product/File description column, you need to click on the option that matches your operating system. Windows, Mac, Linux and some other less common options are all listed.
  4. A common question here is, “do I have 32- or 64-bit windows?”. To find out, right-click on your My Computer (This PC on Windows 8) icon, click on the Properties option, and look under the System heading in the System type entry, as shown in the following screenshot:

  5. Click on the somewhat hidden Accept License Agreement checkbox:

  6. Now click on the download option for your OS and system type as previously determined. Wait for the download to finish.
  7. In your Downloads folder, double-click on the file you just downloaded. The latest version at time of writing this for a 64-bit Windows PC was jdk-8u5-windows-x64. If you are using Mac/Linux or have a 32-bit OS, your filename will vary accordingly.
  8. In the first of several install dialogs, click on the Next button and you will see the next dialog box:

  9. Accept the defaults shown in the previous screenshot by clicking on Next. In the next dialog box, you can accept the default install location by clicking on Next.
  10. Next is the last dialog of the Java installer. Click on Close.

    The JDK is now installed. Next we will make sure that Android Studio is able to use the JDK.

  11. Right-click on your My Computer (This PC on Windows 8) icon and navigate to Properties | Advanced system settings | Environment variables | New (under System variables, not under User variables). Now you can see the New System Variable dialog, as shown in the following screenshot:

  12. Type JAVA_HOME for Variable name and enter C:Program FilesJavajdk1.8.0_05 for the Variable value field. If you installed the JDK somewhere else, then the file path you enter in the Variable value: field will need to point to wherever you put it. Your exact file path will likely have a different ending to match the latest version of Java at the time you downloaded it.
  13. Click on OK to save your new settings. Now click on OK again to clear the Advanced system settings dialog.

Now we have the JDK installed on our PC. We are about half way towards starting to learn Java programming, but we need a friendly way to interact with the JDK and to help us make Android games in Java.

Android Studio

We learned that Android Studio is a tool that simplifies Android development and uses the JDK to allow us to write and build Java programs. There are other tools you can use instead of Android Studio. There are pros and cons in them all. For example, another extremely popular option is Eclipse. And as with so many things in programming, a strong argument can be made as to why you should use Eclipse instead of Android Studio. I use both, but what I hope you will love about Android Studio are the following elements:

  • It is a very neat and, despite still being under development, a very refined and clean interface.
  • It is much easier to get started compared to Eclipse because several Android tools that would otherwise need to be installed separately are already included in the package.
  • Android Studio is being developed by Google, based on another product called IntelliJ IDEA. There is a chance it will be the standard way to develop Android in the not-too-distant future.

If you want to use Eclipse, that’s fine. However, some the keyboard shortcuts and user interface buttons will obviously be different. If you do not have Eclipse installed already and have no prior experience with Eclipse, then I even more strongly recommend you to go ahead with Android Studio.

Installing Android Studio

So without any delay, let’s get Android Studio installed and then we can begin our first game project. To do this, let’s visit https://developer.android.com/sdk/installing/studio.html.

  1. Click on the button labeled Download Android Studio to start the Android studio download. This will take you to another web page with a very similar-looking button to the one you just clicked on.
  2. Accept the license by checking in the checkbox, commence the download by clicking on the button labeled Download Android Studio for Windows, and wait for the download to complete. The exact text on the button will probably vary depending on the current latest version.
  3. In the folder in which you just downloaded Android Studio, right-click on the android-studio-bundle-135.12465-windows.exe file and click on Run as administrator. The end of your filename will vary depending upon the version of Android Studio and your operating system.
  4. When asked if you want to Allow the following program from an unknown publisher to make changes to your computer, click on Yes. On the next screen, click on Next.
  5. On the screen shown in the following screenshot, you can choose which users of your PC can use Android Studio. Choose whatever is right for you as all options will work, and then click on Next:

  6. In the next dialog, leave the default settings and then click on Next.
  7. Then on the Choose start menu folder dialog box, leave the defaults and click on Install.
  8. On the Installation complete dialog, click on Finish to run Android Studio for the first time.
  9. The next dialog is for users who have already used Android Studio, so assuming you are a first time user, select the I do not have a previous version of Android Studio or I do not want to import my settings checkbox, and then click on OK:

That was the last piece of software we needed.

Math game – asking a question

Now that we have all that knowledge under our belts, we can use it to improve our math game. First, we will create a new Android activity to be the actual game screen as opposed to the start menu screen. We will then use the UI designer to lay out a simple game screen so that we can use our Java skills with variables, types, declaration, initialization, operators, and expressions to make our math game generate a question for the player. We can then link the start menu and game screens together with a push button.

Creating the new game activity

We will first need to create a new Java file for the game activity code and a related layout file to hold the game activity UI.

  1. Run Android Studio and select your Math Game Chapter 2 project. It might have been opened by default. Now we will create the new Android activity that will contain the actual game screen, which will run when the player taps the Play button on our main menu screen.
  2. To create a new activity, we now need another layout file and another Java file. Fortunately Android Studio will help us do this. To get started with creating all the files we need for a new activity, right-click on the src folder in the Project Explorer and then go to New | Activity. Now click on Blank Activity and then on Next.
  3. We now need to tell Android Studio a little bit about our new activity by entering information in the above dialog box. Change the Activity Name field to GameActivity. Notice how the Layout Name field is automatically changed for us to activity_game and the Title field is automatically changed to GameActivity.
  4. Click on Finish. Android Studio has created two files for us and has also registered our new activity in a manifest file, so we don’t need to concern ourselves with it.
  5. If you look at the tabs at the top of the editor window, you will see that GameActivity.java has been opened up ready for us to edit, as shown in the following screenshot:

  6. Ensure that GameActivity.java is active in the editor window by clicking on the GameActivity.java tab shown previously.
  7. Here, we can see the code that is unnecessary. If we remove it, then it will make our working environment simpler and cleaner. We will simply use the code from MainActivity.java as a template for GameActivity.java. We can then make some minor changes.
  8. Click on the MainActivity.java tab in the editor window. Highlight all of the code in the editor window using Ctrl + A on the keyboard.
  9. Now copy all of the code in the editor window using the Ctrl + C on the keyboard.
  10. Now click on the GameActivity.java tab.
  11. Highlight all of the code in the editor window using Ctrl + A on the keyboard.
  12. Now paste the copied code and overwrite the currently highlighted code using Ctrl + V on the keyboard.
  13. Notice that there is an error in our code denoted by the red underlining as shown in the following screenshot. This is because we pasted the code referring to MainActivity in our file that is called GameActivity.

    Simply change the text MainActivity to GameActivity and the error will disappear. Take a moment to see if you can work out what other minor change is necessary, before I tell you.

  14. Remember that setContentView loads our UI design. Well what we need to do is change setContentView to load the new design (that we will build next) instead of the home screen design. Change setContentView(R.layout.activity_main); to setContentView(R.layout.activity_game);.
  15. Save your work and we are ready to move on.

Note the Project Explorer where Android Studio puts the two new files it created for us. I have highlighted two folders in the next screenshot. In future, I will simply refer to them as our java code folder or layout files folder.

You might wonder why we didn’t simply copy and paste the MainActivity.java file to begin with and saved going through the process of creating a new activity? The reason is that Android Studio does things behind the scenes. Firstly, it makes the layout template for us. It also registers the new activity for use through a file we will see later, called AndroidManifest.xml. This is necessary for the new activity to be able to work in the first place. All things considered, the way we did it is probably the quickest.

The code at this stage is exactly the same as the code for the home menu screen. We state the package name and import some useful classes provided by Android:

package com.packtpub.mathgamechapter3a.mathgamechapter3a;
 
import android.app.Activity;
import android.os.Bundle;

We create a new activity, this time called GameActivity:

public class GameActivity extends Activity {

Then we override the onCreate method and use the setContentView method to set our UI design as the contents of the player’s screen. Currently, however, this UI is empty:

super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

We can now think about the layout of our actual game screen.

Laying out the game screen UI

As we know, our math game will ask questions and offer the player some multiple choices to choose answers from. There are lots of extra features we could add, such as difficulty levels, high scores, and much more. But for now, let’s just stick to asking a simple, predefined question and offering a choice of three predefined possible answers.

Keeping the UI design to the bare minimum suggests a layout. Our target UI will look somewhat like this:

The layout is hopefully self-explanatory, but let’s ensure that we are really clear; when we come to building this layout in Android Studio, the section in the mock-up that displays 2 x 2 is the question and will be made up of three text views (both numbers, and the = sign is also a separate view). Finally, the three options for the answer are made up of Button layout elements. This time, as we are going to be controlling them using our Java code, there are a few extra things we need to do to them. So let’s go through it step by step:

  1. Open the file that will hold our game UI in the editor window. Do this by double-clicking on activity_game.xml. This is located in our UI layout folder, which can be found in the project explorer.
  2. Delete the Hello World TextView, as it is not required.
  3. Find the Large Text element on the palette. It can be found under the Widgets section. Drag three elements onto the UI design area and arrange them near the top of the design as shown in the next screenshot. It does not have to be exact; just ensure that they are in a row and not overlapping, as shown in the following screenshot:

  4. Notice in the Component Tree window that each of the three TextViews has been assigned a name automatically by Android Studio. They are textView , textView2, and textView3:

  5. Android Studio refers to these element names as an id. This is an important concept that we will be making use of. So to confirm this, select any one of the textViews by clicking on its name (id), either in the component tree as shown in the preceding screenshot or directly on it in the UI designer shown previously. Now look at the Properties window and find the id property. You might need to scroll a little to do this:

    Notice that the value for the id property is textView. It is this id that we will use to interact with our UI from our Java code. So we want to change all the IDs of our TextViews to something useful and easy to remember.

  6. If you look back at our design, you will see that the UI element with the textView id is going to hold the number for the first part of our math question. So change the id to textPartA. Notice the lowercase t in text, the uppercase P in Part, and the uppercase A. You can use any combination of cases and you can actually name the IDs anything you like. But just as with naming conventions with Java variables, sticking to conventions here will make things less error-prone as our program gets more complicated.
  7. Now select textView2 and change id to textOperator.
  8. Select the element currently with id textView3 and change it to textPartB. This TextView will hold the later part of our question.
  9. Now add another Large Text from the palette. Place it after the row of the three TextViews that we have just been editing.

    This Large Text will simply hold our equals to sign and there is no plan to ever change it. So we don’t need to interact with it in our Java code. We don’t even need to concern ourselves with changing the ID or knowing what it is. If this situation changed, we could always come back at a later time and edit its ID.

  10. However, this new TextView currently displays Large Text and we want it to display an equals to sign. So in the Properties window, find the text property and enter the value =. We have changed the text property, and you might also like to change the text property for textPartA, textPartB, and textOperator. This is not absolutely essential because we will soon see how we can change it via our Java code; however, if we change the text property to something more appropriate, then our UI designer will look more like it will when the game runs on a real device.
  11. So change the text property of textPartA to 2, textPartB to 2, and textOperator to x. Your UI design and Component tree should now look like this:

  12. For the buttons to contain our multiple choice answers, drag three buttons in a row, below the = sign. Line them up neatly like our target design.
  13. Now, just as we did for the TextViews, find the id properties of each button, and from left to right, change the id properties to buttonChoice1, buttonChoice2, and buttonChoice3.
  14. Why not enter some arbitrary numbers for the text property of each button so that the designer more accurately reflects what our game will look like, just as we did for our other TextViews? Again, this is not absolutely essential as our Java code will control the button appearance.
  15. We are now actually ready to move on. But you probably agree that the UI elements look a little lost. It would look better if the buttons and text were bigger. All we need to do is adjust the textSize property for each TextView and for each Button. Then, we just need to find the textSize property for each element and enter a number with the sp syntax. If you want your design to look just like our target design from earlier, enter 70sp for each of the TextView textSize properties and 40sp for each of the Buttons textSize properties. When you run the game on your real device, you might want to come back and adjust the sizes up or down a bit. But we have a bit more to do before we can actually try out our game.
  16. Save the project and then we can move on.

As before, we have built our UI. This time, however, we have given all the important parts of our UI a unique, useful, and easy to identify ID. As we will see we are now able to communicate with our UI through our Java code.

Summary

In this article, we learned how to set up our development environment by installing JDK and Android Studio. In addition to this, we also learned how to create a new game activity and layout the same on a game screen UI.

Resources for Article:

Further resources on this subject:

Packt

LEAVE A REPLY

Please enter your comment!
Please enter your name here