Hi folks! In this tutorial series we’ll build a simple Frogger game for Google Android. You will see how to setup an Android application, how to create menus, the life cycle of a process in Android, how to work with graphics, how to work with sounds and much more!
In this first part we’ll setup our application and create the first screen of our game: the menu screen. I’ll use Eclipse as a IDE for this tutorial since it provide many tools and is really simple to develop with it, but you can use whatever other IDE you want.
Setting up our application
Okay, let’s work. The first step is to install the Android SDK and the ADT plugin on Eclipse, we’ll need those to build our game. Take a look at Android Developers – Installing the SDK if you don’t have it installed yet.
Once you have the SDK and ADT plugin installed, is time to setup our project. Open Eclipse, go to Window > Android SDK and AVD Manager, click on Virtual Devices, and if there’s no virtual device already, click the New button to create a new one. The target platform must be at least the Android 1.6 – API Level 4.
Now that we have a virtual device to test our application, let’s create the application project. On Eclipse, click File > New > Android Project, and fill the fields like in the image below:
Press the Finish button to create the project.
What is an Activity?
You can think of an activity like a window or a dialog in a desktop application. Every screen in your application will extend the Activity class. Is the activity class that will contain the UI elements of our application.
Eclipse already has created an Activity for us. Open the Main.java file (our main activity), you’ll find it in src > app.frogger package in the Project Explorer panel. On Eclipse, click Run > Debug, select Android Application and press ok. Eclipse will run the Android virtual device and then run your application. The application shows you a simple hello world text.
So, the next step is to change this activity, adding the menu of our game and a background too.
In Android we can create our layout elements using Java or XML. The current layout of our Main activity is defined in the res/layout/main.xml file. Open the main.xml file.
1 2 3 4 5 6 7 8 9 10 11 12 | <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" /> </LinearLayout> |
As you can see it defines a LinearLayout with vertical orientation and a TextView to show the “hello world” text. The value “@string/hello” of the text property of the TextView component is defined in a separated file, called strings.xml at the res/values folder.
1 2 3 4 5 | <?xml version="1.0" encoding="utf-8"?> <resources> <string name="hello">Hello World, Main!</string> <string name="app_name">Frogger Game</string> </resources> |
The strings.xml file defines all default texts of our UI.
Let’s say that our start menu has four buttons: New Game, How To Play, About and Exit. So, we need to create the labels for those buttons. Now our strings.xml file will look like:
1 2 3 4 5 6 7 8 9 10 11 12 | <?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">Frogger Game</string> <string name="game_title">Frogger Game</string> <!-- MENU LABELS --> <string name="new_game_label">New Game</string> <string name="how_to_play_label">How To Play</string> <string name="about_label">About</string> <string name="exit_label">Exit</string> </resources> |
Back to the res/layout/main.xml file. Here is were we’ll define our menu buttons.
The first thing that we need to do is to remove that TextView object and put our buttons. So, now our main.xml file will look like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <Button android:id="@+id/new_game_button" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/new_game_label" /> <Button android:id="@+id/how_to_play_button" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/how_to_play_label" /> <Button android:id="@+id/about_button" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/about_label" /> <Button android:id="@+id/exit_button" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/exit_label" /> </LinearLayout> |
Well, we still have our LinearLayout as the base of our activity screen, and now we have four buttons too. Let’s take a better look at one of our buttons.
1 2 3 4 5 6 | <Button android:id="@+id/new_game_button" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/new_game_label" /> |
First we define the id of our button. Is through this id that we’ll access our button to add events, etc.
Second, we define the layout_width property with the value fill_parent. This tells our application to set the width of our button as the same of it’s parent.
After that we define the layout_height property with the value wrap_content. The wrap_content value tells our application to set a height to the button that fits it’s content, in this case the label.
Last, we set the text of the button with the new_game_label string that we defined in the strings.xml file.
Run it (in the eclipse menu at Run > Run)! If everything is right your menu will looks like this:
Wow! This looks like… I mean… this looks ugly as hell! OMG!
I think that the first thing is to decrease the width of our buttons, later we’ll add a background image to our LinearLayout and a logo would be good! I think that’s will solve our problem.
So let’s create a new container to group our buttons. That container will be another LinearLayout, take a look:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <LinearLayout android:layout_width="250dip" android:layout_height="wrap_content" android:orientation="vertical" android:paddingTop="20dip" > <Button android:id="@+id/new_game_button" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/new_game_label" /> <Button android:id="@+id/how_to_play_button" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/how_to_play_label" /> <Button android:id="@+id/about_button" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/about_label" /> <Button android:id="@+id/exit_button" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/exit_label" /> </LinearLayout> </LinearLayout> |
If you run it you will see that the buttons now are less broad, but they are aligned on the left side, and would be good to have them aligned at the center of our screen.
To change that we need to set the gravity property of our root LinearLayout component.
1 2 3 4 5 6 7 | <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="center_horizontal" > |
Now is better. Maybe you are wondering why we have set the value of 250dip to our layout instead of using 250px. So, let me explain why we use dips instead of pixels.
What is dip and sp?
Pixels (px) represent the dots on the screen while Density-independent pixels (dip or dp) are an abstract unit based on the density of the screen. One dip is equivalent to one pixel on a 160dpi screen.
Scale-independent pixels (sp) is very similar to dip but is also scaled by the user’s font size preference.
So, when we need to make an application compatible with screens of different dpis, the best way is to use sp for texts and dip for anything else. Why you need to care about? Because Android runs in many types of hardware, with many types of screens and resolutions.
I fully recommend that you take a look at the Supporting Multiple Screens text of the Android developer site.
Working with images
Next step is to put the logo and background of our game. Please download the assets file and then put the main_bg.png and the main_logo.png files in the res/drawable-mdpi folder.
In the main.xml, add the following code above of the first Button inside the LinearLayout component.
16 17 18 19 20 21 | <ImageView android:layout_width="fill_parent" android:layout_height="wrap_content" android:src="@drawable/main_logo" android:paddingBottom="20dip" /> |
The “@drawable/main_logo” value tells the application to look for the main_logo image, independent of the extension that the image file has, in the drawable folders.
If you run it, you’ll see the Frogger logo above of the menu buttons.
Next and last step is to add a background image to the root LinearLayout component. That’s very easy, just add the android:background property to that component including the image name.
1 2 3 4 5 6 7 8 | <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@drawable/main_bg" android:gravity="center_horizontal" > |
Easy huh?!
The complete code of the main.xml file:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@drawable/main_bg" android:gravity="center_horizontal" > <LinearLayout android:layout_width="250dip" android:layout_height="wrap_content" android:orientation="vertical" android:paddingTop="20dip" > <ImageView android:layout_width="fill_parent" android:layout_height="wrap_content" android:src="@drawable/main_logo" android:paddingBottom="20dip" /> <Button android:id="@+id/new_game_button" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/new_game_label" /> <Button android:id="@+id/how_to_play_button" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/how_to_play_label" /> <Button android:id="@+id/about_button" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/about_label" /> <Button android:id="@+id/exit_button" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/exit_label" /> </LinearLayout> </LinearLayout> |
The final result:
Next post I’ll show you how to add actions to the buttons and open new activities. See ya!
Show, parabéns, se que fez a logo Frogger??
Fiz não, achei ela no google. :)
You explain everything so well.
I would love Part 2 if you have time.
Which books would you recommend for Android dev,
cheers
Mikey
Hey friend
The tutorial was awesome. I have learned the basics now.
Can you send me the next tutorials files to my mail is possible.
Thanks in advance.