1. ITEC535 – Mobile Programming
BTEP205 İşletim Sistemleri
Eastern Mediterranean University
School of Computing and Technology
Master of Information Technology
ITEC535 – Mobile Programming
Anatomy of the Tabbed Applications
Dr.Ahmet Rizaner

2. Introduction
Sometimes, we want to wrap multiple views in a single window and navigate through them with a Tab Container.
This can be done in Android using TabHost control.
There are two ways to use a TabHost application in Android:
Using the TabHost to navigate through multiple views within the same activity.
Using the TabHost to navigate through Actual multiple Activities using intents.
ITEC535 - Mobile Programming

3. Anatomy of the Tabbed Application
An activity with a TabHost may look like this:
The Activity consists of:
A TabHost: The root element of the layout
The TabHost wraps a TabWidget which represents the tab bar.
The TabHost wraps a FrameLayout which wraps the contents of each tab.
ITEC535 - Mobile Programming

4. Layout of the Tabbed Application
… <TabHost xmlns:android=" android:layout_width="fill_parent" android:layout_height="fill_parent“ > <TabWidget android:layout_height="wrap_content" /> <FrameLayout android:layout_height="fill_parent" > (Content of the tabs should be defined here) </FrameLayout> </TabHost>
ITEC535 - Mobile Programming

5. Layout of the Tabbed Application
For example, a tab may contain a single TextView element with a LinearLayout. …
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:text="This is tab1"/>
</LinearLayout>
ITEC535 - Mobile Programming

6. Layout of the Tabbed Application
Another example with a RelativeLayout. …
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:text="This is tab 1" />
<EditText
android:inputType="text" />
</RelativeLayout>
ITEC535 - Mobile Programming

7. Adding Tabs We create tabs using TabSpecs class.
We set the title of each tab using TabSpecs.setIndicator() method.
We set the content of each tab using TabSpecs.setContent() method.
ITEC535 - Mobile Programming

8. Adding Tabs
Example: …
TabHost tabHost=(TabHost)findViewById(R.id.tabHost);
tabHost.setup();
TabSpec spec1=tabHost.newTabSpec("Tab 1");
spec1.setContent(R.id.tab1);
spec1.setIndicator("Tab 1");
TabSpec spec2=tabHost.newTabSpec("Tab 2");
spec2.setIndicator("Tab 2");
spec2.setContent(R.id.tab2);
TabSpec spec3=tabHost.newTabSpec("Tab 3");
spec3.setIndicator("Tab 3");
spec3.setContent(R.id.tab3);
tabHost.addTab(spec1);
tabHost.addTab(spec2);
tabHost.addTab(spec3);
ITEC535 - Mobile Programming