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

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

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

Layout of the Tabbed Application … <TabHost xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/tabHost" android:layout_width="fill_parent" android:layout_height="fill_parent“ > <TabWidget android:layout_height="wrap_content" android:id="@android:id/tabs" /> <FrameLayout android:layout_height="fill_parent" android:id="@android:id/tabcontent" > (Content of the tabs should be defined here) </FrameLayout> </TabHost> ITEC535 - Mobile Programming

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:id="@+id/tab1" android:orientation="vertical"> <TextView android:text="This is tab1"/> </LinearLayout> ITEC535 - Mobile Programming

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

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

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