Let me say from the start, that Android is a tough language to learn. One not only has to learn the way Android works, but the person also has to learn and understand Java as well. While that maybe fine for people who have the time to learn it, it sucks for people (like me) who have to learn it “on the fly” as I had to with a current customer who needed an app to be converted from iOS to Android.
Making single screen apps is fine. But sooner or later, you’ll have to have an app where it has to go from one screen to another. There are several ways to do this, but I’m going to show you one way that’ll get the job done (and keep your end users content at the same time).
The program will have one button on the main screen. When the user taps it, it’ll go to the next screen with a “Back” button to go back to the previous screen.
Let’s call this example PageExample. Make a new project in Eclipse and fill in the normal screens.
When that’s done, do the following:
– Find and then double click on the values folder and then find the strings.xml file, and then double click on that.
This file is where you define two things:
1) The name of a string that you’re going to “call” later in the app.
2) What ever you want the device to say to the user (you’ll see this in a minute).
You’ll input two of these strings. One for the first button, and one for the second.
Now type the following:
<string name=”tapme”>Tap here to go to next page.</string>
<string name=”back””>Go Back</string>
The above should be easy to understand – especially if you’ve written in HTML at some point.
* The string name is the name of the value that you will use throughout the app when you want to show the message that follows it. In this case, tapme.
* After that is the ‘human message’ that the user will see on the button itself.
* Finally, we “close out” the command with the </string> indicator.
Now save the file and then go in to the main.xml file – located in the /layout/ folder.
Open that file by double clicking it.
This is where you’ll define the first button that the end user will see. Defining a button in Android is a little tough to get used to at first, especially if you’re used to iOS where you can visually make a button.
The file should look like this:
<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:orientation=”vertical”
</LinearLayout>
We have to define the layout of the first screen that the user will see. I am not going to go through each line of the above in this article. You can learn more about it by going to http://developer.android.com.
Now, make room for the below command just before the </LinearLayout> command and type the following to build the first button that the user will see:
<!– Tap Me Button –>
<Button
android:id=”@+id/tapbutton”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=”@string/tapme” >
</Button>
The above defines one button on the screen.
– The id is a button dentifier for the button that you’ll use later.
– The layout_width and layout_height are where you define the X and Y coordinates of the button. In this case, the layout_width will fill the entire length of the device. The layout_height will make the button the height of the text that will show inside the button.
The android:text command calls the tapme string that you defined earlier and shows the text on the button.
Save the file.
Before we go any further, we have to create a new XML and JAVA file to go to when the user taps the Tap Me button. We’re going to name it screen2.xml to keep things simple.
In Eclipse, click FILE > NEW > ANDROID XML FILE and name the file main2.xml.
Now, when you create a new XML file, you’ll need to also create a related Java file with the same name so the Android device can work with both files when it needs to. These files are called CLASS files.
BUT you have to make sure that these files end up in the correct location of the file tree, or it may not work.
Click and then open the src folder as this is where you’ll put the Java (class) files.
Again, click FILE > NEW > CLASS FILES and name it main2
Now we have a problem. We need to let the Android device know about the main2.xml file. If not, the app may error out when they tap the first button.
Find and then open the AndroidManifest.xml file. Don’t let this file scare you. This is where you’ll define all of your other screens that the app may have. Find the location where it says </activity> Below that, type in the following:
<activity android:name=”.main2″></activity>
An ACTIVITY is another activity that the app will do when a user taps the first button.
That’s done. Now let’s do some coding.
We’ve defined the button earlier, now lets make it work. Open the main.xml file and type the following after the following lines of code:
Button NEXT = (Button) findViewById(R.id.tapbutton);
NEXT.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
Intent theIntent = new Intent(view.getContext(), Main2.class);
startActivityForResult(theIntent, 0);
}
});
}
}
Now let’s take a look at what the code is doing:
1. We’ve define NEXT as the Android value for this button by activating it when the user taps the tap button value that we defined earlier.
2. We then activate an onClickListener command so the device “listens” for a tap.
3. We then make a new INTENT for another screen to appear after the tap (in this case, main2).
4. Start the activity as soon as possible.
5. Close out this block of code.
Now, open main2.java and type the following:
// Make the Back Button work:
Button back = (Button) findViewById(R.id.back);
back.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
Intent intent = new Intent();
setResult(RESULT_OK, intent);
finish();
}
});
}
}
Ok….This is where the magic happens when a user goes in to the main2.java file. The button appears at the top of the screen and then (just like in main.java) it listens for the button tap. When a user taps the button, it assigns a new Intent (more about Intents in a later article) and then the app will actually cause an error but you catch it by telling it the result of the error is OK and go back to the previous screen. Finally, the device is finished with the code block so finish the block of code.
Whew! That’s it….Happy coding!