In this third post in our series on programming apps in Android, we are going to use the “Hello” application presented in our previous post as a starting point to create a “HelloBye” application with two windows.
In this new app we will be adding a second window named “Bye”, and will explain how to switch from the “Hello” window to the “Bye” window and vicecersa,by means of the application contextual menu. This will also give us the opportunity to explain a bit more about the structure of an Android app.
Create a window
To create a new window in our application, me must design the layout of the window, and the Activity with the associated source code. The resources used in the layout (images, texts,…) must be created as well.
Layout and resources
The layout of the new screen es defined in a file “res/layout/bye.xml”:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainMenu" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:text="@string/bye_world" /> </RelativeLayout> |
We can see that this file is identical to the one that defines the layout of the main window, with the exception of a reference to the string “@string/bye_world” as the content of the TextView control. This new string must be defined in the resource file “res/values/strings.xml”:
|
1 2 3 4 5 6 7 8 |
<?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">HelloBye</string> <string name="hello_world">Hello world!</string> <string name="adios_mundo">Good bye, world!</string> </resources> |
Contextual menu
The contextual menu is the menu that pops up when the “Menu” button is pressed. We will define a menu with two options in it by editing the file “res/menu/main_menu.xml”:
- Switch screen – To switch from “Hello” to “Bye” and viceversa
- Exit – To leave the application
The contents of the resouce file are:
|
1 2 3 4 5 6 |
<menu xmlns:android="http://schemas.android.com/apk/res/android" > <item android:id="@+id/item1" android:title="Switch screen" android:titleCondensed="Switch"></item> <item android:id="@+id/item2" android:title="Exit" android:titleCondensed="Exit"></item> </menu> |
“Bye” Activity
The Activity for the new screen overrides three methods:
La actividad de la nueva pantalla contiene tres métodos:
- onCreate – Renders the layout “bye.xml”.
- onCreateOptionsMenu – Assigns the contextual menu defined in “main_menu.xml” to the new screen.
- onOptionsItemSelected – This is the code that is executed when on of the options in the menu is selected.
|
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 54 |
package com.openalfa.hellobye; import com.openalfa.hellobye.R; import android.os.Bundle; import android.app.Activity; import android.content.Intent; import android.view.Menu; import android.view.MenuItem; public class Bye extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.adios); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Create the menu getMenuInflater().inflate(R.menu.main_menu, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { Intent intent = new Intent(); switch (item.getItemId()) { case R.id.item1: // Switch to the "Hello" screen intent.setClass(Bye.this, Hello.class); startActivity(intent); finish(); // finish the "Bye" activity return true; case R.id.item2: // Switch to the "Hello" screen, finishing // any other activity in the app that could // be running (none in this sample) intent.setClass(Bye.this, Hello.class); // Flag that the application should close intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP); intent.putExtra("CLOSE", true); startActivity(intent); finish(); return true; default: return false; } } } |
Changes to the “Hello” activity
We are going to assign the same contextual menu “main_menu.xml” to the “Hello” activity:
We do this by adding to the “Hello.java” file a onCreateOptionsMenu method with the same code used in “Bye.java”.
|
1 2 3 4 5 6 7 8 |
@Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main_menu, menu); return true; } |
We add also a onOptionsItemSelected method with the actions to execute when a menu option is selected, as follows:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
@Override public boolean onOptionsItemSelected(MenuItem item) { Intent intent = new Intent(); // Handle item selection switch (item.getItemId()) { case R.id.item1: // Switch to the "Bye" screen when the "Switch" option is chosen: intent.setClass(Hola.this, Adios.class); startActivity(intent); finish(); return true; case R.id.item2: // Finalise the app when "Exit" is pressed: finish(); return true; default: return false; } } |
We must also modify the onCreate method, to check if the screen has been activated because the user selected the menu option “Exit” in the “Bye” screen. In this case, we must finalize the “Hello” activity as well, to completely quit the application:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); Bundle extras = getIntent().getExtras(); if (extras != null) { if (extras.getBoolean("CLOSE", false)) { finish(); return; } } setContentView(R.layout.hellobye); } |
AndroidManifest.xml
Finally, the AndroidManifest.xml file must be edited to add the new activity:
|
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 |
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.openalfa.hellobye" android:versionCode="1" android:versionName="1.0" > <uses-sdk android:minSdkVersion="8" android:targetSdkVersion="10" /> <application android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/HelloByeTheme" > <activity android:name="com.openalfa.hellobye.Hello" android:label="@string/app_name" > <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <activity android:name="com.openalfa.hellobye.Bye" android:label="@string/app_name" > </activity> </application> </manifest> |
With this, we can try the application in the emulator:
When the application starts it shows the “Hello” screen.
When the “Menu” button is pressed, the menu with the options “switch” and “exit” is displayed.
When the option “switch” is selected, the “Bye” activity is started and the “Bye” screen is displayed.
The eclipse project for this sample application can be downloaded here
—