Eastern Mediterranean University School of Computing and Technology
- Slides: 8
Eastern Mediterranean University School of Computing and Technology Master of Information Technology ITEC 535 – Mobile Programming ANATOMY OF THE TABBED APPLICATIONS
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 Tab. Host control. There are two ways to use a Tab. Host application in Android: • Using the Tab. Host to navigate through multiple views within the same activity. • Using the Tab. Host to navigate through Actual multiple Activities using intents. ITEC 535 - MOBILE PROGRAMMING 2
Anatomy of the Tabbed Application An activity with a Tab. Host may look like this: The Activity consists of: • A Tab. Host: The root element of the layout • The Tab. Host wraps a Tab. Widget which represents the tab bar. • The Tab. Host wraps a Frame. Layout which wraps the contents of each tab. ITEC 535 - MOBILE PROGRAMMING 3
Layout of the Tabbed Application … <Tab. Host xmlns: android="http: //schemas. android. com/apk/res/android" android: id="@+id/tab. Host" android: layout_width="fill_parent" android: layout_height="fill_parent“ > <Tab. Widget android: layout_width="fill_parent" android: layout_height="wrap_content" android: id="@android: id/tabs" /> <Frame. Layout android: layout_width="fill_parent" android: layout_height="fill_parent" android: id="@android: id/tabcontent" > … (Content of the tabs should be defined here) … </Frame. Layout> </Tab. Host> ITEC 535 - MOBILE PROGRAMMING 4
Layout of the Tabbed Application For example, a tab may contain a single Text. View element with a Linear. Layout. … <Linear. Layout android: layout_width="fill_parent" android: layout_height="wrap_content" android: id="@+id/tab 1" android: orientation="vertical"> <Text. View android: layout_width="fill_parent" android: text="This is tab 1"/> </Linear. Layout> … ITEC 535 - MOBILE PROGRAMMING 5
Layout of the Tabbed Application Another example with a Relative. Layout. … <Relative. Layout android: id="@+id/tab 1" android: layout_width="fill_parent" android: layout_height="wrap_content" android: orientation="vertical"> <Text. View android: id="@+id/text. View 1" android: layout_height="wrap_content" android: text="This is tab 1" /> <Edit. Text android: id="@+id/edit. Text 1" android: layout_height="wrap_content" android: layout_align. Bottom="@+id/text. View 1" android: layout_to. Right. Of="@+id/text. View 1" android: input. Type="text" /> </Relative. Layout> … ITEC 535 - MOBILE PROGRAMMING 6
Adding Tabs We create tabs using Tab. Specs class. We set the title of each tab using Tab. Specs. set. Indicator() method. We set the content of each tab using Tab. Specs. set. Content() method. ITEC 535 - MOBILE PROGRAMMING 7
Adding Tabs Example: … Tab. Host tab. Host=(Tab. Host)find. View. By. Id(R. id. tab. Host); tab. Host. setup(); Tab. Spec spec 1=tab. Host. new. Tab. Spec("Tab 1"); spec 1. set. Content(R. id. tab 1); spec 1. set. Indicator("Tab 1"); Tab. Spec spec 2=tab. Host. new. Tab. Spec("Tab 2"); spec 2. set. Indicator("Tab 2"); spec 2. set. Content(R. id. tab 2); Tab. Spec spec 3=tab. Host. new. Tab. Spec("Tab 3"); spec 3. set. Indicator("Tab 3"); spec 3. set. Content(R. id. tab 3); tab. Host. add. Tab(spec 1); tab. Host. add. Tab(spec 2); tab. Host. add. Tab(spec 3); … ITEC 535 - MOBILE PROGRAMMING 8
