ANDROID: SESSION-3

APPING-MASTERS-2013-VERDIER

Android: TP3
Part1: TabHost
We want to create an application with 2 tabs containing the following screens:

PAGE 1 OF 8

ANDROID: SESSION-3

APPING-MASTERS-2013-VERDIER

First step: Creating the TabHost

Create a new TabProject android project, 2.3.3 SDK, with an activity.
First we are going to create the TabHost that is going to manage our tabs.
A TabHost is meant to host multiples tabs in what look like the same view. If you drag and drop a
TabHost in the layout editor youll be able to define the multiple tabs in the same XML file. But we want
to load other activities based on the tab the user clicked so well use a custom XML that only have
placeholders for our tabHost and tabContent.
The XML code is really straight forward; here is the code you have to use. Copy and paste it in your
activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TabWidget
android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>
</TabHost>

The ids are really important because the TabHost requires them, so you cant use whatever you want.

Second step: Creating the tab activities

Create a new package called fr.epita.tabproject.tabs in your source folder, we are going to put the tabs
activities in it. Now lets add the 2 new activities.
PAGE 2 OF 8

ANDROID: SESSION-3

APPING-MASTERS-2013-VERDIER

Go to the AndroidManifest.xml file.

In the Application tab, click on the add button in the Application Nodes section. Choose Activity in
this new window and it will add a new activity to your manifest. But actually that does not mean we
created a new activity: we only declared that our application is going to use a new one.
Select your newly added activity and click on the Name* hyperlink. Change the package name to
fr.epita.tabproject.tabs and the class name to FirstTabActivity.

Now that you have the activity you can create the first_tab.xml layout file.
In the onCreate() method in your activity you have to inflate your view with the SetContentView()
method.
Do the same procedure for the SecondTabActivity and the second_tab.xml layout.

PAGE 3 OF 8

ANDROID: SESSION-3

APPING-MASTERS-2013-VERDIER

Third step: Creating the tab activities

We can now add tabs to host our newly created activities.
To do this, your MainActivity class needs to extend TabActivity instead of Activity:
public class MainActivity extends TabActivity

and you have to add the following code to your onCreate() method:
Resources res = getResources();
TabHost mTabHost = getTabHost();
mTabHost.addTab(mTabHost
.newTabSpec("tab_home")
.setIndicator("First", res.getDrawable(R.drawable.ic_launcher))
.setContent( new Intent(this,



fr.epita.tabproject.tabs.FirstTabActivity.class)));
mTabHost.setCurrentTab(0);

You should now be able to launch your application with the first tab.
Add the second tab to the UI.

PAGE 4 OF 8

ANDROID: SESSION-3

Fourth step: first_tab

The goal is to create a user interface that adapts to the screen size:

Here are the rules:

label
the sides must stay at 50dp from the screen border.
the height is 200dp
the width is the width of its content
they are vertically centered
PAGE 5 OF 8

APPING-MASTERS-2013-VERDIER

ANDROID: SESSION-3

APPING-MASTERS-2013-VERDIER

button
the height is the height of its content
the width takes all the space left between the labels
the top from the first button is aligned with the labels top
the bottom from the last button is aligned with the labels bottom
If you change your rendering target inside your layout editor, the layout must adapt it self.

Fifth step: second_tab

Let the user input a message in a textView and display it toast when he click on the Toast it ! button.

PAGE 6 OF 8

ANDROID: SESSION-3

APPING-MASTERS-2013-VERDIER

Part 1: PalindromeChecker
The goal of this exercise is to check in real time if a user inputed string is a palindrome.

Step 1: create the UI

Create a PalindromeChecker android project, in SDK 2.3.3, with an activity. Here is a screenshot of the
UI you have to create:

There is an EditText to let the user inputs a string.

The first TextView will be used to display whether the string is a palindrome (OK ! message with a
green background) or not (KO :( message with a red background).
The second TextView is used to display the character count. This value is displayed on the right side.

PAGE 7 OF 8

ANDROID: SESSION-3

APPING-MASTERS-2013-VERDIER

Step 2: TextWatcher
To check if the input string is a palindrome and to display the character count, we want to be notified
each time it is modified. To do this, your activity has to implements TextWatcher interface.
public class MainActivity extends Activity implements TextWatcher

Youll also have to set the listener on your TextEdit with the addTextChangedListener() method.
We will be working in the afterTextChanged method. This method is called each time the text is
modified.
In this method, check if the textEdit contains a palindrome, count the characters it contains and update
your UI.

PAGE 8 OF 8