How to Make a Video Game for Android | Mobile Game Development

Wish to learn mobile game development? But don’t know anything about it. This tutorial will teach you how to make a video game for Android in fairly easy steps. The things that you will need even before you begin are:

  1. Android Studio IDE
  2. Java installed on your system

If you don’t know how, you can just click on the above respective links and you will find a step by step process to guiding you on how to set things up and running.

Once you are past that it is time to move on to the real steps on how to make a video game for android. Trust me if you have an eye for making games, you are going to absolutely love it.

Steps on How to Make a Video Game for Android

The first thing you gotta do is open Android Studio IDE. Opening it for the first time, will give you a screen like this:

android studio starting window

Just follow the steps of creating an activity in and you will be fine:

Opening Android Studio IDE

When you click on Finish, the Android Studio’s Welcome screen will welcome you. Here you can choose to select a new project or open an existing one depending upon your requirement.

Step 1: Click on the first option, since we are creating a new Android Studio project.

welcome android studio screen

If you start a new project this is what you will get:

create android project dialog box

Step 2: You can name your application here. I have named it Test just for the heck of it.

Click on Next and you will get the option to choose which Android Devices to target option.

target android devices dialog box

Step 3: You can make relevant selections and then click on Next again.

Next screen allows you to select which activity you wish to choose:

add an activity to mobile in android studio

Step 4: As you will scroll you will see you can have any kind of activity based on your project idea. I am going to just click Next by selecting Empty Activity.

configure activity dialog box in android studio

Moving forward you will get a chance to update the names of your Activity (.java file) and Layout (.xml file). Remember every project will have these two as basics.

Step 5: You can provide an apt name to your activity and click on Next.

Doing so you will move to the next screen that will install the necessary components:

component installer in android studio

Step 6: Just click on Finish.

It will start building the project:

building test gradle info

Understanding your Android Studio Workspace

Once the project builds you will get a screen which might appear something like this:

gradle build finished all errors gone

By default, a class will be created reflecting the name that you had given in Step 4. It will extend AppCompatActivity by default overriding the onCreate method.

As you can see right next to your MainActivity.java file is the “activity_main.xml” file. The name was again something that we had confirmed in Step 4. If you click on the activity_main.xml tab this is what you will get:

activity_main xml file in android studio

Here’s where you can see how your app is going to look like. It’s the UI from where you can make necessary changes and then quickly see what updates have been made.

Navigator Pane

To the left of the screen is your navigator pane. Make sure Android is selected on top so that it shows everything that you will need going forward. You can see what’s located where here. Your java and res folder are some of those folders that you will need to frequent more frequently.

res and src location in the Android navigator pane

As you can see in the diagram above the first line is the location where your MainActivity.java file is located. If accidentally closed, that file can be opened from there. That’s also the place where your pages are going to grow, and you are going to keep adding .java files there. The rest of the two locations down below are for testing purposes.

Moving on to the res folder which stands for “resources”, you can see there are four folders in there namely:

  • drawable – stuff like drawable images should be stored here.
  • layout – your layout which is the activity_main.xml file is located here.
  • mipmap – you can put your app/launcher icon here
  • values – you can create references to colors, strings and styles here to be used once in your project

Thus, each serves different purposes.

There is also one manifests folder at the top. It is loaded when your app gets loaded on your emulator, and specifies which activity needs to be launched first. Also, here you can specify the proper location of your icons, labels, themes etc. so that the Android Studio recognizes the exact location of the respective files.

manifests in android studio

Alright now that we have a proper look and feel of the Android Studio IDE, and know where to go looking for stuffs that matter, it is time to actually start learning how to make a video game for android.

Start Developing your Gaming App

So we are in position at the Designing part of how to make a video game for Android. The following steps are going to matter the most. Just follow the steps mentioned below one by one and you are going to be just fine.

Designing your Gaming App

Step 1: The first thing you could do is switch to design view so you have a better view of what your app’s gonna look like on a mobile.

Just click on the blue button and then on Design.

how to change views in android studio ide

Remember you can switch to Blueprint or Design + Blueprint view anytime later. Relax it is just a view and is not going to affect anything.

While you are at it you can also zoom in or zoom out based on your preference by clicking on the following + or – buttons:

zoom button on android studio layout

There much better!

As you can see there’s a default “Hello World” text in the center of our screen.

Step 2: Since we do not want anything like that on our front page, you can simply remove it. To do that click on it and then press delete.

remove hello world from android studio screen

Better!

You can put all sorts of images in your first page to make it look cool. Since I am going to demonstrate our game directly there is no need to create a separate java file. Our main game will begin the moment we will launch our app.

The Game Idea

I have decided to create a spinning game, where a wheel with points will spin and then stop at a random color depicting points atop.

I will go on to create a button that will set things in motion. We will call it “Spin” to complement the theme.

Step 3: Click on the palette and then look for the Button option. Simply drag and drop the button on your mobile screen. Place it at the bottom so there is plenty of space for our image to show.

how to drag and drop button in android studio

Setting up Constraints

Towards the left of the screen, in the Component Tree you will see information about your layout. As you can see by default it takes ConstraintLayout option. If you are using the ConstraintLayout option you need to specify the exact location of your input fields, as to how far they are from your mobile screen borders, and how far they are from each other.

setting constraints in android studio

You can do so by simply dragging the constraint button on your inputs (that white bubble on each sides of your button) and then placing it where you want your input to be.

When you drag that you will find an arrow like structure popping out. Don’t worry it will just help you identify where your input field will actually head.

setting other constraints in android studio

Do that for all sides (left, right, top and bottom), and then drag the button all the way down where you want to place it. I want it at the bottom.

When you will click on the button you will realize a zig-zag line with some value trying to tell you how far your field is from the screen borders like this:

delete connection in android studio

If you wish to delete a connection you can simply click on the solid bubbles again, this time it will redden when you take your mouse cursor there. Click on it and the thread will be broken.

You can alternatively use “RelativeLayout” too which basically stops you from all the unnecessary trouble.

Layouts form a crucial phase while you are trying to learn how to make a video game for Android.

Step 4: Towards the right side in the Attributes section, look for the TextView column. It will have a text field where Button must have been written. Just replace that button with “Spin”.

How to Include Images

I have a Wheel.png file of a shoddy wheel that I drew in Paint. What we also need is a Pointer to point to these rotating wheel which I have drawn in another .png file and named it as Pointer.png. Time to put them in drawable where all images are supposed to go.

Step 5: Select your images and then press Ctrl + C or right click them and select copy.

images copy and paste process in android studio

Then navigate to Android Studio, look for res folder wherein there is drawable folder. Right click on it and then on Paste.

Step 6: A box might open to confirm the directory. Just click on Ok.

confirm destination directory

Step 7: Another as confirmation to copy. Simply click on Ok again.

copy confirmation

With that, you will notice that the images will get copied in drawable folder.

images copied in drawable folder

Time to move on.

Now that we have the images ready with us, we can go ahead and put them on our screen. Let’s understand how to do that first.

Placing Images on Screen

Step 8: Navigate to the .xml file once again, and then locate Palette. Click on it and then on the Images button located on the left. Doing so will flare more options up on the right. Just drag and drop ImageView from there to your screen as shown:

imageview drag and drop in android studio

When you do that a Resources dialog box will automatically open.

Step 9: Just select your image and then click on Ok.

ImageView Selection from Resources window

Step 10: Adjust the image to fit into the screen.

wheel ImageView

Looks legit. Set constraints again as was mentioned earlier in the tutorial.

Hey! But what about our pointer?

Step 11: Drag another ImageView and place it at the bottom of the wheel. Let it be a pointer to identify the points on the wheel.

Repeat Step 8 to 10 this time selecting the Pointer Image in the Resources dialog. Adjust it accordingly and set constraints again, you should have something like this:

pointer included in android studio

We aren’t done yet.

We need a TextView too that will read how much points we have earned in our spin cycle.

Step 12: Let us place a TextView then using the same palette. Look for the Text row, and then click on it. You will find TextView as the first option. Simply drag and drop it on the empty space above the wheel.

drag textView to the mobile screen in android studio

This time you will see a small label saying “TextView” being shown at the place you release your mouse.

Attributes in Android Studio IDE

You will continuously bump into this while learning how to make a video game for Android. Let’s understand this first.

When you click on it and then on the Design tab (located at the bottom of the screen right against the Text tab View) you will be shown Attributes on the right side of the screen. You can change all the properties related to the selected buttons or fields, from here. You can also do that from the “Text view” but I think as a beginner it will be difficult for you to grasp.

Step 13: Remove the text in the “text” box located in the Attributes for textView. This will remove the text that was being shown on the mobile screen.

design view in android studio

You can increase the text size too or change the font style, provide extra line spacing, justify or stylize and give your desired color too.

I will show you how to change the textSize here.

NOTE: At the very beginning of the Attributes screen is the field that holds ID. This will default to the used palette field suffixed by numbers like – ImageView, ImageView2, ImageView3 and so on. However, for simplicity you can choose to give your own name to these fields. The choice is yours.

Step 14: Simply click on the textAppearance label, it will show more options:

Attributes for TextView for text Appearance in Android Studio

Step 15: Look for the option that says textSize. By default it must be 14sp, change it to 30sp since we want our players to really see the score.

Now that we are done with the design part, we will move on to the next important section in How to Make a Video Game for Android. Yes, you guessed right the Coding part.

Coding your Gaming App

We are at the Development stage of how to make a video game for Android now. You need to navigate back to the MainActivity.java file now since we are going to write the code behind that’s going to call the shots in reality.

If accidentally closed you can reopen it by navigating to app> java> com.example.<file_name>.MainActivity

main activity java file opened from java folder

Step 16: First step here will be to declare all our included fields that we are going to use. So we will do that.

Add the following code in the MainActivity class:

Button button;
ImageView imageView;
TextView textView;

For basics of Java to understand the what, and the why, you can always go back and flip our tutorial pages.

Importing Classes to Avoid Errors

If any of these classes are reddened and you are getting an error of them not being resolved it is because their respective classes have not been imported.

You can simply click on these classes and press Alt + Enter.

press alt and enter to resolve

Doing so will open resolution options. Select the one that says import class.

import class in android studio

Respective classes will get imported and the red bothering mark will disappear.

So I did that, and as you can see the red marks have vanished, and things look pretty smooth:

declaration of fields in android studio

Now we are past the Declaration part. We want to bring these created variables to good use.

Now our code should go in the onCreate method part implying when our app gets created or launched what are the things that need to happen?

So we will make Android Studio understand that we want to carry out a specific activity when say, our Button is pressed.

Remember, your app might crash if you choose to add your code before these two lines. I know that because I faced that problem while learning how to make a video game for Android.

Find View By ID

Step 17: Here’s the code that should go in the onCreate() method bit: (Do not remove what’s already there. Simply start typing after those two lines)

button = findViewById(R.id.button3);

In the above code, we are using the findViewById method to locate our button. When you type “R.id.” it will automatically suggest all those fields that can be identified by their Ids in your little program. Since “button3” is the ID for our Spin button, we are going to write “R.id.button3” as the argument to findViewById method.

The same holds true for the rest of the fields. We will find them and define them. Ooh yeah!

Step 18: Append the following two codes as well:

imageView = findViewById(R.id.imageView);
textView = findViewById(R.id.textView);

I hope I don’t have to explain the aforementioned now.

Time to set the listener for our button. Until this point, you were dealing with all the easy stuff of how to make a video game for Android. Now brace yourself!

The Real Action

Yes the real action on how to make a video game for Android happens when you are allocating a field to listen for activities. Since we want some action to be performed when we click our Spin button, we need to tack it against a Listener. To understand what listeners are all about you can go back and refer to our Java Event Handling chapter.

Step 19: As you type button.setOnClick Android Studio IDE is intelligent enough to suggest the method you had in mind.

suggestions for listener

Simply click on the setOnClickListener method and it will automatically populate the screen taking you into the parenthesis.

Step 20: Type new View and the following suggestions will flare:

View OnClickListener suggestion

Select the first option that says View.OnClickListener {…}

When you do that you will notice a box will automatically get created making life easier for you.

onClickListener Box for Button

Here’s where your actual code should go.

Working with Random Class

Since we are dealing with a wheel here, and we want it to stop at a random location, we will have to make use of the class Random here.

Step 21: Let’s declare the class Random first, and then use it at a later stage for extracting a random value for degrees.

Random r = new Random();

We will do the above by separating the declaration and creation part since it’s a good coding practice:

declaration and instantiation code

 

Random class has got this nextInt() method which we can use to generate random numbers. As a parameter, it takes the limit out of which you wish to choose a random no.

Just remember the above coz we are going to need it soon while we are trying to understand how to make a video game for android.

RotateAnimation Class

Time to deal with the RotateAnimation class which will help us to actually rotate the wheel.

Step 22: Type the following code and it will wait for you to enter parameters.

RotateAnimation rotateAnimation = new RotateAnimation(

RotateAnimation class in Android Studio for rotating

 

The first two fields ask you to enter the from and to degrees in float format.

Just go ahead and enter the required info.

random class method nextInt

The nextInt Method

In the second parameter I have written:

r.nextInt(3600) + 720;

So we want to generate a random degree. We can do so by using the nextInt method of Random class. Let’s pick a big no., say 3600 from where the method nextInt picks a random degree.

What if the degree comes out to be 5 or 10, the rotation wouldn’t be as convincing.  We want our wheel to rotate up good. So we have added 720 to it which will ensure even though the random no. generates 0, it will still spit out 720 degree rotation.

NOTE: As you keep typing you will notice that whatever info is next required automatically emboldens as if asking for you to enter the next info. This is one feature of Android that makes learning how to make a video game for Android fun.

Type the rest of the code as:

RotateAnimation rotate = new RotateAnimation(0, r.nextInt(3600) + 720, RotateAnimation.RELATIVE_TO_SELF, 0.5f, RotateAnimation.RELATIVE_TO_SELF, 0.5f);

Your Android Studio IDE will automatically take them as pivotX and pivotY value to understand that the rotation is relative to its actual state.

pixotX and pivotY in RotateAnimation

Now using the instance created, here rotate, you need to specify the duration as to for how long do you want the wheel to rotate.

Rest of the Formalities

Step 23: Type the following code:

rotate.setDuration(5000);

Step 24: Follow the above by this to set fill after:

rotate.setFillAfter(true);

Step 25: You can choose to slow down the wheel as rotation ends by using an Interpolator. Here’s the code for that:

rotate.setInterpolator(new DecelerateInterpolator());

 

It will make it feel like an actual wheel stopping by decelerating.

Now you need to use the startAnimation method of imageView to start the rotation.

Step 26: Finally type the following to actually start the Animation.

imageView.startAnimation(rotate);

With the above additions you will have something like this:

code so far

Tracking Progress

Just for the heck of it, to see our code’s working or not, try to run the program by pressing the Green Play button at the top-right side of the screen.

green button to run the code for how to make a video game for Android

In case you haven’t created a virtual device, follow this AVD creation tutorial to successfully create one. It is something that forms a crucial stage in learning how to make a video game for Android.

Step 27: So I am gonna just run it quickly and check if things are fine so far, that our wheel actually rotates when we click on Spin button:

Cool! That means we are on the right track.

I want to go on, to teach you How to Make a Video Game for Android but I think there are a lot of things that we still need to do.

Let’s take a hiatus on this for now. We will get back to this at a later stage.

phew meme obama

Relax soldier! You have earned it. Adios!

Scottshak

Poet. Author. Blogger. Screenwriter. Director. Editor. Software Engineer. Author of "Songs of a Ruin" and proud owner of four websites and two production houses. Also, one of the geekiest Test Automation Engineers based in Ahmedabad.

You may also like...

Leave a Reply