Creating a Start-Up Screen: Defining Our RelativeLayout via XML

The first screen (Activity) layout container that we define is our Hello World application start-up screen, which was defined in Chapter 2. The Java code is located in the MainActivity.java and the XML mark-up is in the activity_main.xml, and as it currently exists, it is a RelativeLayout container with a Hello World! text message inside it.

We want to transmute this current start-up screen into an info chart of sorts showing our app end-user current attributes for the World on which the end-user is currently located. We use some Java code and XML mark-up changes (fairly minor ones). When the app first launches this is the Earth object we defined in Chapter 3. We are going to let our users travel between worlds, so we have to make this screen access variable content (rather than fixed text values) right from the get go, making it a bit more difficult. Let’s design our screen output as follows:

Planet Name:            Earth           <planetName instance variable>
Planet Mass:            5,973 YG        <planetMass instance variable>
Planet Gravity:         9.78 m/s        <planetGravity instance variable>
Planet Colonies:        1               <planetColonies instance variable>
Planet Population:      1,000           <planetPopulation instance variable>
Planet Military:        100             <planetMilitary instance variable>
Planet Bases:           1               <planetBases instance variable>
Planet Forcefield:      On              <getForceFieldState() method call>

What this translates into inside our Relative Layout container is eight text fields (on the left) containing eight string constants and eight text fields on the right that access our WorldGen object methods and variables and that can be set via Java code when our user travels to another world.

Even though we cover user interface elements in detail in the next chapter, we will have to cover at least one View subclass (TextView) here to create this Current World Information start-up screen. So let’s click our Eclipse Quick Launch Icon and get started!

Eclipse opens our Hello_World application exactly as we had it configured in Chapters 2 and 3. There should be edit tabs at the top already open for activity_main.xml (res/layout folder), activity_main.xml (res/menu folder), strings.xml (res/values folder), MainActivity.java (src/chapter.two.hello_world folder), and WorldGen.java (src/chapter.two.hello_world folder). Let’s get started by clicking on the strings.xml edit tab.

<string name="planet_name_label">Planet Name: </string>
<string name="planet_mass_label">Planet Mass: </string>
<string name="planet_gravity_label">Planet Gravity: </string>
<string name="planet_colonies_label">Planet Colonies: </string>
<string name="planet_population_label">Planet Population: </string>
<string name="planet_military_label">Planet Military: </string>
<string name="planet_bases_label">Planet Bases: </string>
<string name="planet_forcefield_label">Planet Forcefield: </string>

android:id="@+id/textView1"

android:layout_marginLeft="5dip"

<TextView
        android:id="@+id/dataView1"
        android:layout_toRightOf="@+id/textView1"
        android:layout_marginLeft="36dip"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/planet_name_label" />

<TextView
        android:id="@+id/dataView2"
        android:layout_toRightOf="@+id/textView2"
        android:layout_alignStart="@+id/dataView1"
        android:layout_alignBelow="@+id/dataView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/planet_mass_label" />

WorldGen earth = new WorldGen("Earth", 5973, 9.78);

TextView planetNameValue = (TextView)findViewById(R.id.dataView1);

planetMassValue.setText(String.valueOf(earth.planetMass));

Adding a Menu to Our Activity: The Menu Inflater and Menu XML

The first thing that we need to do is to define our start-up screen menu. Menus in Android usually have five or fewer entries, so let’s pick five primary functions that we need to define layout screens (Activities) for later in this chapter. After all, this is the layout design chapter.

Our Hello_World planet generator will need to have screens that allow its users to select a new world, set its attributes, visit that planet (in times of peace), attack that planet (in times of war), and return to the Home (Start-Up) Screen that we’ll call Show Home Planet, in case the user leaves planet Earth, and travels to one of the other planets they create.

Thus, the logical Start-Up (Home) Screen menu selections, along with what Java Activity, XML mark-up filename, and layout container type they would invoke (or call) when the menu item was selected, would be as follows:

Add a New Planet       Call NewActivity.java, activity_new.xml             RelativeLayout
Configure Planet       Call ConfigActivity.java, activity_config.xml       LinearLayout
Travel to Planet       Call TravelActivity.java, activity_travel.xml       FrameLayout
Attack on Planet       Call AttackActivity.java, activity_attack.xml       LinearLayout
Show Home Planet       Stay in MainActivity.java, activity_main.xml        RelativeLayout

Note that we have designed our menu labels to be evenly spaced (the text lines up nicely). This is so that our menu looks as attractive to our end-users as possible, enhancing our application’s user experience or UX.

To add menu items to our MainActivity screen, we will use XML mark-up to define our menu items in a file named activity_main.xml that is located in the menu folder within our res (resources) folder. But, we already have an activity_main.xml file in the layout folder, you are thinking to yourself intelligently. That is correct; however, that file is in the layout folder and thus is a different file than the activity_main.xml file that is also in the menu folder, even though it has the exact same filename.

Each layout container XML definition and menu XML definition for each of your Activity screens should have the same filename, which is really very logical if you think about it for a bit, as each screen (Activity) in your application (if it is an advanced app) will have complex user interface or content elements (layout XML) defined, as well as menu selections (menu XML) defined, for each Activity (functional application area and screen).

Notice that I’m interchanging these screen/Activity terms, at least for a little while, so that you will get used to the lingo of Android. Before we show you how to code separate Activity classes for these screens our menu is going to call, let’s modify the current activity_main.xml file that the New Android Application Project series of dialogs created for us, so that it contains our five menu labels, instead of just the one Settings label.

You should still have the menu folder version of activity_main.xml open in your Eclipse IDE from our work in Chapter 2, if it’s not open in the IDE, simply open the menu folder and right-click the activity_main.xml file and select the Open option from the context-sensitive menu. Then click on that XML edit tab, and copy the <item> tag four more times, to create our five item menu. Before we copy the existing <item> tag, let’s first edit it so it matches up with our first menu item that we designed previously.

Change the android:id from menu_settings to menu_add and the android:title to menu_add_planet and then copy the <item> tag four times underneath the first tag. Change the android:id parameters for menu_add to: menu_config, menu_travel, menu_attack, and menu_home, respectively.

Then change the android:orderInCategory values to: 200, 300, 400 and 500, and android:title parameters to: menu_config_planet, menu_travel_planet, menu_attack_planet, and menu_home_planet, respectively.

Each <item> tag should thus have the same basic format, as follows:

<item android:id="@+id/menu_function"
        android:orderInCategory="Number Value for Order in Menu"
        android:showAsAction="never"
        android:title="@string/menu_string_constant" />

The result of this work process is shown in the final XML menu mark-up in Figure 4-14.

Now we need to add the menu label text constants to our strings.xml file, so click the strings.xml tab at the top of Eclipse next, and edit the tag that is there already for the <string> named menu_settings to turn it into a menu_add_planet <string> tag with the label value: Add a New Planet.

Once you have done that, copy that <string> tag four times, and edit the <string> tags to create four new menu_config_planet, menu_travel_planet, menu_attack_planet and menu_home_planet string constants, as shown in Figure 4-15. Each <string> tag should follow this same basic format:

<string name="menu_add_planet">Add a New Planet</string>

We don’t need to write the Menu Inflater code to create the menu, because the New Android Application Project helper did that for us, however, because we are using it here to create our menu, let’s take a closer look at it now and get that taken care of as well. Here is the Menu Inflater code:

public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
}

The onCreateOptionsMenu( ) method is part of the Android Activity class, and it is used to create the options menu for any given Activity. In this particular case, it is our MainActivity subclass of android.app.Activity, which is imported at the top of our MainActivity.java file.

This method passes a Menu object named menu into the method, where it is populated with your menu XML parameters via an inflate( ) method, which references your esourcemenuactivity_main.xml file via the first (inflate from) parameter in the method of R.menu.activity_main and then inflates that data into the second (inflate to object) parameter, which is the menu object declared and passed into the onCreateOptionsMenu( ) method.

The getMenuInflater( ) method calls the inflate( ) method and uses it to populate the MenuInflater object for the Activity. The MenuInflater class is a member of the android.view package (android.view.MenuInflater) and it takes your menu XML definition and instantiates the inflated menu object using those <menu> and <item> tags and their parameters.

Once the getMenuInflater( ).inflate( ) process has been completed without any failures, the onCreateOptionsMenu( ) method exits, and returns a true value, which signifies that a menu resource has been properly implemented.

We can now right-click our project folder and select the Run As Android Application command to compile and run our Java and XML code. Let’s take a look at how our menu looks in action in the emulator shown in Figure 4-16.

Before we can actually implement these menu options in our Java code, we need to create the layout containers (via XML mark-up) and activities (via Java code) for each of them. This is because selecting each of these menu items switches the application into each of these activities.

So let’s create four new Activity Java classes, each with their own custom Layout Container XML definitions, for the first four menu options shown in Figure 4-16 that encompass the major functional areas of our Hello_World Android application.

These new Activities and their layout containers give us plenty of application function screens to work with over the next few chapters in the book, where we will be learning about events, intents, UI widgets, graphics design, and animation in Android.

Defining the Configure Planet Activity: The LinearLayout Container

Next, we are going to create our Configure Planet UI screen, which involves creating another Activity subclass called ConfigActivity.java with a LinearLayout container defined in an activity_config.xml file. Because you have already done this once before I will forego the screenshots and figures as you can reference the previous section for those if needed.

First, right-click the Hello_World project folder and select New Class and create a Java class for the chapter.two.hello_world package that subclasses android.app.Activity and is named ConfigPlanet. Leave the other default options set and click on Finish.

Next, add an onCreate( ) method to create the Activity in Android so that it exists. This method is called when you reference (access) the Activity, and creates the Activity in system memory (allocates memory for it at runtime). This is why every Activity needs an onCreate( ) method implemented.

Next, add a setContentView( ) method that references activity_config.xml that we create next to hold our LinearLayout definition, like this:

setContentView(R.layout.activity_config);

Next, right-click the Hello_World project folder again and select the New Android XML file and create a LinearLayout XML file to define the LinearLayout user interface design. Select resource type: Layout, project: Hello_World, filename: activity_config, and root element: LinearLayout in this dialog (reference Figure 4-19) and click Finish.

Next, add some Button tags inside of our LinearLayout container, so you can see what a LinearLayout does. In a later chapter 5, we’ll wire these up so that they perform the tasks they are supposed to, but for now, we are just going to be concerned with the XML layout file definition. Click on the Graphical Layout Editor tab at the bottom of the XML editing pane (the activity_config.xml tab should be active at the top of the pane), and drag a Button UI element out of the Form Widgets drawer and onto the simulated app screen. Then switch to the XML editing pane and change the android:id value for the Button tag to coloniesButton and then the android:text parameter to reference the @strings/button_name_colonies value which we will create next. This can be seen in Figure 4-23.

Each <Button> tag should have the following parameter mark-up structure:

<Button android:id="@+id/coloniesButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_name_colonies" />

Next, copy the Button tag five more times underneath the first tag and edit the ID and Text parameter values to match what each of the button UI elements are going to do. Thus, we change colonies to colonists, bases, military, ffon (forcefield on), and ffoff (forcefield off), respectively.

Next, add six string tags that define the text labels for each button, and which are referenced via the android:text Button tag parameter, like this:

<string name="button_name_colonies">Add Colonies</string>
<string name="button_name_colonists">Add Colonists</string>
<string name="button_name_bases">Add Bases</string>
<string name="button_name_military">Add Military</string>
<string name="button_name_ffon">Forcefield On</string>
<string name="button_name_ffoff">Forcefield Off</string>

I’ll forego the extra screenshot here, but these <string> tags can be seen later in Figure 4-25 (along with the string tags we need to add the attack methods for our AttackPlanet class and Activity subclass).

Next, let’s go ahead and create our TravelPlanet class Activity subclass, as well as a FrameLayout container, so that later we can add digital video of intergalactic travel to the other planets in our application.

Defining a Travel to Planet Activity: The FrameLayout Container

Next, we create our Travel to Planet UI screen, which involves creating another Activity subclass called TravelActivity.java with a FrameLayout container defined in an activity_travel.xml file. Because you have done this before, I’ll skip most of the figures, as you can reference the NewPlanet.java section for those, if you need to, it’s back in the Defining a New Planet Activity Screen section.

First, right-click the Hello_World project folder and select New Class and create a Java class for the chapter.two.hello_world package that subclasses android.app.Activity and is named TravelPlanet. Leave the other default options set, and then click Finish.

Next, add an onCreate( ) method to create the Activity in Android so that it exists. This method is called when you reference (access) the Activity, and creates the Activity in system memory (allocates memory for it at run-time). This is why every Activity needs an onCreate( ) method implemented.

Next, add a setContentView( ) method that references activity_travel.xml, which we create next to hold our LinearLayout definition, like this:

setContentView(R.layout.activity_travel);

Next, right-click the Hello_World project folder again, and select the New Android XML File and create a FrameLayout XML file to use for defining the FrameLayout user interface design. Select resource type: Layout, project: Hello_World, filename: activity_travel, and root element: FrameLayout in this dialog (reference Figure 4-19) and click on Finish.

Next, add a VideoView tag inside the FrameLayout container. A FrameLayout is the perfect layout to use with full-screen digital video, as a FrameLayout contains only one single UI element. In a later chapter, we add the digital video assets, but for now, we’re just going to be concerned with our XML layout file definition.

The basic <VideoView> tag XML mark-up is implemented as follows:

<VideoView android:id="@+id/travelVideoView"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

This <VideoView> XML mark-up is nested inside the <FrameLayout> tag, as shown in Figure 4-24.

Click the Graphical Layout Editor tab at the bottom of the XML editing pane (the activity_travel.xml tab should now be active at the top of the editing pane), and drag a VideoView UI element out of the Images & Media drawer and onto the simulated app screen.

Next, switch over to the XML editing pane, and change the android:id value for the VideoView tag to travelVideoView. This can be seen in Figure 4.24.

Finally, we add the AttackPlanet.java class Activity subclass, and yet another LinearLayout, which holds ImageButton tags. Now we have a five screen framework set up for our Hello_World application for use during the rest of this book.

Defining the Attack on Planet Activity: Our Second Linear Layout

Next, we create our Attack on Planet UI screen, which involves creating another Activity subclass called AttackActivity.java with a LinearLayout container defined in an activity_attack.xml file. Because you have already gone through this before, I will forego the screenshots and figures, as you can reference the Defining the Add a New Planet Screen section for those, if needed.

First, right-click the Hello_World project folder and select New Class and create a Java class for the chapter.two.hello_world package that subclasses android.app.Activity and is named AttackPlanet. Leave the other default options set as they are, and click on Finish.

Next, add an onCreate( ) method to create the Activity in Android so that it exists. This method is called when you reference (access) the Activity, and creates the Activity in system memory (allocates memory for it at runtime). This is why every Activity needs an onCreate( ) method implemented.

Next, add a setContentView( ) method that references: activity_attack.xml, which we create to hold our LinearLayout definition, like this:

setContentView(R.layout.activity_attack);

Next, right-click the Hello_World project folder again and select the New Android XML File and create a LinearLayout XML file to use for defining the LinearLayout user interface design. Select the resource type: Layout, project: Hello_World, filename: activity_attack, and root element: LinearLayout in this dialog (reference Figure 4-19), and click Finish.

Next, add in someImageButton tags inside the LinearLayout container, so we can add some attack icons and features to our Hello_World (or maybe we should we have named it Goodbye_World) Android application.

Note that in a later chapter, we’ll wire these up so that they perform the tasks they are supposed to, but for now, we are just going to be concerned with our XML layout file definition.

Before we add the ImageButton tags, let’s first define the four <string> labels that they will reference. These are shown in Figure 4-25 at the very bottom of the screenshot. They are the last four <string> tags listed in the <resources> parent tag container whose name parameters start with: content_desc.

There are four graphical (image or icon) buttons that allow us to initiate four different types of attacks on a planet: Bomb, Invade, Infect, and Laser.

Because graphics in Android (ImageView and ImageButton UI elements) require a Content Description tag to help the visually impaired, let’s add four string constants that reflect these modes of attack in our strings.xml file (values folder) referenced via android:contentDescription, like this:

<string name="content_desc_bomb">Bomb the Planet</string>
<string name="content_desc_invade">Invade the Planet</string>
<string name="content_desc_virus">Infect Planet with Virus</string>
<string name="content_desc_laser">Fire Laser at Planet</string>

Next, click the activity_attack.xml tab at the top and Graphical Layout tab at the bottom, and drag-out an ImageButton UI element (see Images & Media) and select the app launcher icon as a placeholder graphic to use for now. Then go into XML editing mode and change its ID to bombButton and add the string reference @string/content_desc_bomb to point to the string tag just you added. The <ImagButton> mark-up for the tag should look like this:

<ImageButton android:id="@+id/bombButton
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:contentDescription="@string/content_desc_bomb"
             android:src="@drawable/ic_launcher" />

Copy and paste this three more times below the tag and change the bomb ID reference to invade, infect, and laser as shown in Figure 4-26, and change the contentDescription reference to invade, virus, and laser, respectively.

Now that all our Activities and their Layout Containers are defined, the last thing we have to do is to declare these four new Activity screens to the Android OS using <activity> tags in our AndroidManifest.xml file.

Adding our Application Activities to our XML: AndroidManifest.xml

The last thing we need to do to be 100 percent sure that everything that we have done in this chapter compiles and runs cleanly is to add in declarations of our usage of these Activities into the AndroidManifest.xml file. This is done by adding <activity> tags, each of which defines the use of one Activity, as well as provides the Android OS with the name of the Activity via a specific naming convention.

The format for the <activity> tag and required Activity subclass name is

<activity android:name="chapter.two.hello_world.NewPlanet" />
<activity android:name="chapter.two.hello_world.ConfigPlanet" />
<activity android:name="chapter.two.hello_world.TravelPlanet" />
<activity android:name="chapter.two.hello_world.AttackPlanet" />

Here are all four <activity> tags, so you can see what needs to be added to the AndroidManifest.xml file, after the MainActivity class <activity> tag created back in Chapter 2. You can see that the full reference to the class name includes the package and class name.

As you can see in Figure 4-27 our new <activity> tags “throw” no errors or warnings in Eclipse. There was one warning on my android:targetSDKVersion that said it was not the latest version so I changed the value from the 16 API Level Android 4.1.2 JellyBean version that the New Android Application Project helper placed into this <uses-sdk> tag, over to the current 17 API Level Android 4.2.2 Jelly Bean + version. As I mentioned previously, Eclipse ADT can, and will, make some mistakes, which you may need to fix later on!

To be sure that everything we have created in this chapter is in perfect working order (we added lots of impressive Java code and XML mark-up), I’m now going to right-click the Hello_World project folder in the Eclipse Package Explorer, and select the Run As Android Application menu sequence to launch our trusty Nexus S emulator and see whether our application will run.

After a few minutes of loading the emulator and its user interface, and then replacing the previous application screen, this app runs perfectly, and I see the same exact screen that we saw earlier in Figure 4-4.

Sometimes, if the new app version does not appear, you can click the run previous arrow (a left-pointing, swoop-around arrow) in the emulator (on the top-right bank of buttons, in the second row, third button from the left), and it will relaunch the Hello_World app for you (or will at least hurry things up a little bit). Whew! We really got a ton of critical application infrastructure (Activity screens, Functional classes, Layout XML) in place during this chapter. Pat yourself on the back!