Tutorial 3 How to create Tabbed Screens

What you will learn in this Tutorial

How to Create tabbed screens

Download Source Code - Tutorials - Source for this tutorial is in appemble-tutorial-tab-screen
Learn more FAQ
Good Read XMADL , screen

Introduction

In this tutorial you will learn how to create screens with TAB bar. TAB bar is an action bar that allows easy navigation among closely related screens. It allows the user to see what other functionality is present in an app, without actually browsing through all the screens. Tab Bar provides a very good navigation design to the app. Generally it is recommended not to have more than 5 tabs on Tab Bar displayed on smaller screens. In Android , TAB bar appears on top of screen by default. In iOS it appears at the bottom of the screen.

../_images/tabscreen1.png ../_images/iOS_tabscreen1_small1.png

Fig 1

Create tabbed screens

Create screens that are part of tab group.

  1. Create screen_1, screen_2, screen_3, screen_4 in your project/xml.

  2. Following attributes of <screen> are needed to define tab bar

    • Tab Group - In order to make screens part of a same tab action bar, add the attribute tab_group_name="<name of this action bar>" for example tab_group_name=”tabgroup_main”.
    • Tab Order - The attribute menuOrder="any integer" defines the arrangement order. The tabs are ordered by lowest menu order to the highest menu order. For example menuOrder=”0” will be the first tab, menuOrder=”1” will be the second and so on.
    • Tab Title - The attribute menuName="any string" defines the Tab Title. For ex. menuName=”My List”
    • Tab Icon - The attribute icon="image file name" defines the Tab Icon. Generally it is recommended to give png file. Make sure that these images are present in your project/assets folder.

screen_1

<screens>
    <screen name="screen_1" screen_type="SCREEN" menuOrder="0" menuName="Screen 1"
            icon="notepad.png" initial_layout="PORTRAIT" allowed_layouts="BOTH"
            width="100" height="100" tab_group_name="tabgroup1">

        <title_controls>
            <control type="TEXT" x="0" y="0" width="100" height="6"
                    default_value="Screen 1"
                    appearance_name="white" data_type="VARCHAR"/>
        </title_controls>
        <controls>
            <control type="TEXT" x="10" y="10" width="80" height="35"
                    appearance_name="black" word_wrap="1" data_type="VARCHAR"
                    default_value="Hello Screen 1"/>
        </controls>
    </screen>
</screens>

screen_2

<screens>
    <screen name="screen_2" screen_type="SCREEN" menuOrder="1" menuName="Screen 2"
            icon="upload.png" initial_layout="PORTRAIT" allowed_layouts="BOTH"
            width="100" height="100" tab_group_name="tabgroup1">

        <title_controls>
            <control type="TEXT" x="0" y="0" width="100" height="6"
                    default_value="Screen 2"
                    appearance_name="white" data_type="VARCHAR"/>
        </title_controls>
        <controls>
            <control type="TEXT" x="10" y="10" width="80" height="35"
                    appearance_name="black" word_wrap="1" data_type="VARCHAR"
                    default_value="Hello Screen 2"/>
        </controls>
    </screen>
</screens>

screen_3

<screens>
    <screen name="screen_3" screen_type="SCREEN" menuOrder="2" menuName="Screen 3"
            icon="navigation.png" initial_layout="PORTRAIT" allowed_layouts="BOTH"
            width="100" height="100" tab_group_name="tabgroup1">

        <title_controls>
            <control type="TEXT" x="0" y="0" width="100" height="6"
                    default_value="Screen 3"
                    appearance_name="white" data_type="VARCHAR"/>
        </title_controls>
        <controls>
            <control type="TEXT" x="10" y="10" width="80" height="35"
                    appearance_name="black" word_wrap="1" data_type="VARCHAR"
                    default_value="Hello Screen 3"/>
        </controls>
    </screen>
</screens>

screen_4

<screens>
    <screen name="screen_4" screen_type="SCREEN" menuOrder="3" menuName="Screen 4"
            icon="todo.png" initial_layout="PORTRAIT" allowed_layouts="BOTH"
            width="100" height="100" tab_group_name="tabgroup1">

        <title_controls>
            <control type="TEXT" x="0" y="0" width="100" height="6"
                    default_value="Screen 4"
                    appearance_name="white" data_type="VARCHAR"/>
        </title_controls>
        <controls>
            <control type="TEXT" x="10" y="10" width="80" height="35"
                    appearance_name="black" word_wrap="1" data_type="VARCHAR"
                    default_value="Hello Screen 4"/>
        </controls>
    </screen>
</screens>

Your tabbed group of screens is complete!

The display properties of the text are determined by appearance_name. To define different appearances, create a new file or edit a file called “appearance.xml” in the XML folder:

In appearance.xml, create a new appearance. This appearance name can be reused for any control in the app.

<appearances>
    <appearance name="white" font_family="Sans-Serif" font_name="Helvetica"
            font_size="3"
            font_color="#FFFFFF" background_color="#000000" alpha="0"
            justify="CENTER" font_style_bold="1"
            font_style_emboss="1"/>
    <appearance name="black" font_family="Sans-Serif" font_name="Helvetica"
            font_size="5"
            font_color="#000000" background_color="#FFFFFF" alpha="0"
            justify="CENTER" font_style_bold="1"
            font_style_emboss="1"/>
</appearances>

Now declare that screen_1 screen is the first screen to be displayed. This is declared in a file in your xml folder called application.xml

<screen_deck name="appemble-tutorial-3" version="1.0"
    short_description="Appemble Tabbed App"
    long_description="Appemble tabbed app" size="1024"
    publisher_name="Appemble"
    publish_date="2012-05-31" starting_screen_name="screen_1"
    background="tu_background.png"
    title_background="tu_titlebar.png"/>

Now your app is ready for launch.

Android - Right click on the project and click on Run as Android application.

iOS - Click on Product -> Run.

The fig below shows screen 1 and screen 4 in Android on left, and shows screen 1 and 4 in iPhone on right

Android ../_images/tabscreen11.png ../_images/tabscreen4.png
iPhone ../_images/iOS_tabscreen1_small1.png ../_images/iOS_tabscreen4_small.png

Download and Run Tutorials

This chapter uses source code from appemble-tutorial-tab-screen. If you have not downloaded tutorial source code, click on Download Source Code - Tutorials

Android - Right click on appemble-tutorial-tab-screen and click on Run as Android application.

iOS - Select scheme appemble-tutorial-tab-screen and iPhone x.x simulator. Click on Product -> Run.

FAQ

What is the maximum number of TABS recommended?

You can have at most 5 tabs because of the space on the device. The icons should not be very small that it results in fat fingering.


Can the tabs be displayed at the bottom of the screen in Android?

We plan to support in a future release of the framework.


Can the color of the active tab be customized?

Not in the current version.


Is the icon size defined?

Icons need to be in accordance to the specs by android icon design guidelines for Android and ios icon design guidelines for iOS.


I want to display a regular screen as the starting screen and then go to a group of TABBED screens. Is it possible?

Yes it is possible. In target attribute for NEXT_SCREEN action, give the name of the screen that is a part of a tab group. For example action_name=”NEXT_SCREEN” target=”screen_1”. screen_1 should have <screen name=”screen_1”...........tab_group_name=”name of tab group”>