13
Clickteam Fusion 2.5 – Android Bars - Guide CONTENTS 1. Froyo / Gingerbread Bars 2. Honeycomb to above Bars 3. Title or Action bar 4. Display Status Bar 5. Navigation Bar 6. Controlling Navigation Bar 7. Menu For more information, tutorials, examples and walk-thrus visit the website. Website: http://www.Clickteam.com – Community: http://community.clickteam.com The Clickteam Fusion logo and all content copyright (c) 2013 Clickteam LLC. Unless otherwise stated.

CONTENTS - Clickteamdownload.clickteam.com/tutorials/en/Android_Bars.pdf · For more information, tutorials, examples and walk-thrus visit the website. Website: ... Fusion 2.5 or

Embed Size (px)

Citation preview

Page 1: CONTENTS - Clickteamdownload.clickteam.com/tutorials/en/Android_Bars.pdf · For more information, tutorials, examples and walk-thrus visit the website. Website: ... Fusion 2.5 or

Clickteam Fusion 2.5 – Android Bars - Guide

CONTENTS1. Froyo / Gingerbread Bars2. Honeycomb to above Bars3. Title or Action bar4. Display Status Bar5. Navigation Bar6. Controlling Navigation Bar7. Menu

For more information, tutorials, examples and walk-thrus visit the website.

Website: http://www.Clickteam.com – Community: http://community.clickteam.com

The Clickteam Fusion logo and all content copyright (c) 2013 Clickteam LLC. Unless otherwise stated.

Page 2: CONTENTS - Clickteamdownload.clickteam.com/tutorials/en/Android_Bars.pdf · For more information, tutorials, examples and walk-thrus visit the website. Website: ... Fusion 2.5 or

Clickteam Fusion 2.5 – Android Bars - Guide

1. Froyo / Gingerbread BarsFrom Froyo until Gingerbread Android present a different UI that was tremendous change from Cupcake and Eclair, allowing to achieve a better performance and make the device to be easy handle it.

For more information, tutorials, examples and walk-thrus visit the website.

Website: http://www.Clickteam.com – Community: http://community.clickteam.com

The Clickteam Fusion logo and all content copyright (c) 2013 Clickteam LLC. Unless otherwise stated.

Status Bar:

In some device you may see the name of the application, Menu and Back button that will depends if the device have or not hardware keys, in the early version of Android most device had from 3 to 4 button to execute: Search, Home, Menu and Back.Also you may see the notification Icon and status information like battery and Wifi.

Title Bar:

in gray color will only show the name of the ApplicationIn some device the height of this bar depends on the Theme.

Content Area:

This Area available for the application, in this case in portrait mode.

Page 3: CONTENTS - Clickteamdownload.clickteam.com/tutorials/en/Android_Bars.pdf · For more information, tutorials, examples and walk-thrus visit the website. Website: ... Fusion 2.5 or

Clickteam Fusion 2.5 – Android Bars - Guide

Also the menu for these version was designed like big buttons

For more information, tutorials, examples and walk-thrus visit the website.

Website: http://www.Clickteam.com – Community: http://community.clickteam.com

The Clickteam Fusion logo and all content copyright (c) 2013 Clickteam LLC. Unless otherwise stated.

Menu:

Have a mix of text and icon (both cane be set from Fusion 2.5 or MMF2)

In the case there are more than 6 menu items a more button will appear, notice that the following Item will be shown like a list

Page 4: CONTENTS - Clickteamdownload.clickteam.com/tutorials/en/Android_Bars.pdf · For more information, tutorials, examples and walk-thrus visit the website. Website: ... Fusion 2.5 or

Clickteam Fusion 2.5 – Android Bars - Guide

2. Honeycomb to above Bars

For more information, tutorials, examples and walk-thrus visit the website.

Website: http://www.Clickteam.com – Community: http://community.clickteam.com

The Clickteam Fusion logo and all content copyright (c) 2013 Clickteam LLC. Unless otherwise stated.

Status Bar:

Where you may find the notifications, and some hardware values set for user information.

Action Bar:

This Bar is a replacement for the traditional title bar at the top of the activity window. It includes the application logo in the left corner and provides a new interface for items in the Options Menu.

Navigation Bar:

This bar can be hidden during execution only until receive the first tap which will go for it and the second one to your application, navigation bar can be hide, show or dim.Have the Back, Home and Task Button.

Content Area:

Available are for your application.

Page 5: CONTENTS - Clickteamdownload.clickteam.com/tutorials/en/Android_Bars.pdf · For more information, tutorials, examples and walk-thrus visit the website. Website: ... Fusion 2.5 or

Clickteam Fusion 2.5 – Android Bars - Guide

3. Title / Action Bar

To set Title or Action Bar ON/OFF:

Title is set through the heading flag in windows properties

For more information, tutorials, examples and walk-thrus visit the website.

Website: http://www.Clickteam.com – Community: http://community.clickteam.com

The Clickteam Fusion logo and all content copyright (c) 2013 Clickteam LLC. Unless otherwise stated.

Page 6: CONTENTS - Clickteamdownload.clickteam.com/tutorials/en/Android_Bars.pdf · For more information, tutorials, examples and walk-thrus visit the website. Website: ... Fusion 2.5 or

Clickteam Fusion 2.5 – Android Bars - Guide

Using Android Object to control title/action bar

For more information, tutorials, examples and walk-thrus visit the website.

Website: http://www.Clickteam.com – Community: http://community.clickteam.com

The Clickteam Fusion logo and all content copyright (c) 2013 Clickteam LLC. Unless otherwise stated.

Page 7: CONTENTS - Clickteamdownload.clickteam.com/tutorials/en/Android_Bars.pdf · For more information, tutorials, examples and walk-thrus visit the website. Website: ... Fusion 2.5 or

Clickteam Fusion 2.5 – Android Bars - Guide

4. Display Status Bar

The status bar is always at the top of the screen for versions below Gingerbread, but can be also in the navigation bar in some tablets.

As explained, the status bar allows the user to receive notifications, in version Honeycomb and above is good behaviour keep the Action bar ON when using the status bar so the user will receive all information that is generated by the application or Operating System.

To control the Status bar you have to set the following flag inside Android properties.

The status bar can be turn off unchecked “Display Status bar”.

Notice that this is the only way to control the status bar.

For more information, tutorials, examples and walk-thrus visit the website.

Website: http://www.Clickteam.com – Community: http://community.clickteam.com

The Clickteam Fusion logo and all content copyright (c) 2013 Clickteam LLC. Unless otherwise stated.

Page 8: CONTENTS - Clickteamdownload.clickteam.com/tutorials/en/Android_Bars.pdf · For more information, tutorials, examples and walk-thrus visit the website. Website: ... Fusion 2.5 or

Clickteam Fusion 2.5 – Android Bars - Guide

5. Navigation Bar

New for phones in Android 4.0, the navigation bar is present only on devices that don't have the traditional hardware keys. It houses the device navigation controls Back, Home, and Recent, and also displays a menu for apps written for Android 2.3 or earlier.

This bar is called System bar for Honeycomb version and normally also share the status bar.

In an application made with target API bigger than Gingerbread (2.3.4) real modewill be use and the navigation bar will hide the 3 dots, in this case only through the action bar, so developer should take care to enable the action bar and in this case also the status bar to guarantee user to receive any notification generated by the application itself.

For more information, tutorials, examples and walk-thrus visit the website.

Website: http://www.Clickteam.com – Community: http://community.clickteam.com

The Clickteam Fusion logo and all content copyright (c) 2013 Clickteam LLC. Unless otherwise stated.

This 3 dots are only when the application is emulated and this is when the target api is below honeycomb.

Page 9: CONTENTS - Clickteamdownload.clickteam.com/tutorials/en/Android_Bars.pdf · For more information, tutorials, examples and walk-thrus visit the website. Website: ... Fusion 2.5 or

Clickteam Fusion 2.5 – Android Bars - Guide

6. Controlling Navigation Bar

Fusion has 3 ways to control the Navigation bar using for this the Android Object.

Show Navigation Bar

This action allow to show the navigation when is hidden or is dimmed, allowing to bring the bar as normal behaviour.

In some tablets the status bar is also present in the navigation bar and may look like this.

Hide Navigation Bar No image required for this you will only see the action bar if set to On and the Content area.

Dim Navigation Bar

The navigation bar will show only the 3 dots so it will not confuse user during executions

How Navigation Bar works

When the navigation is hidden this state will be valid until a tap occurs, the first tap will go to the navigation bar (this is how OS is designed) and the second tap will focus the content area. When the navigation bar is dimmed it will stay until the user taps on the bar, maintaining this status even if the user tap on the action bar or content area.

For more information, tutorials, examples and walk-thrus visit the website.

Website: http://www.Clickteam.com – Community: http://community.clickteam.com

The Clickteam Fusion logo and all content copyright (c) 2013 Clickteam LLC. Unless otherwise stated.

Page 10: CONTENTS - Clickteamdownload.clickteam.com/tutorials/en/Android_Bars.pdf · For more information, tutorials, examples and walk-thrus visit the website. Website: ... Fusion 2.5 or

Clickteam Fusion 2.5 – Android Bars - Guide

To have control over the navigation baryou have 3 actions available inside the Android Object...

For more information, tutorials, examples and walk-thrus visit the website.

Website: http://www.Clickteam.com – Community: http://community.clickteam.com

The Clickteam Fusion logo and all content copyright (c) 2013 Clickteam LLC. Unless otherwise stated.

Page 11: CONTENTS - Clickteamdownload.clickteam.com/tutorials/en/Android_Bars.pdf · For more information, tutorials, examples and walk-thrus visit the website. Website: ... Fusion 2.5 or

Clickteam Fusion 2.5 – Android Bars - Guide

7. Menu

Here are several images showing how the menu looks in the different versions.

Real Froyo or Gingerbread

For more information, tutorials, examples and walk-thrus visit the website.

Website: http://www.Clickteam.com – Community: http://community.clickteam.com

The Clickteam Fusion logo and all content copyright (c) 2013 Clickteam LLC. Unless otherwise stated.

Page 12: CONTENTS - Clickteamdownload.clickteam.com/tutorials/en/Android_Bars.pdf · For more information, tutorials, examples and walk-thrus visit the website. Website: ... Fusion 2.5 or

Clickteam Fusion 2.5 – Android Bars - Guide

Emulating Froyo to Gingerbread from Honeycomb

Real Honeycomb to above.

For more information, tutorials, examples and walk-thrus visit the website.

Website: http://www.Clickteam.com – Community: http://community.clickteam.com

The Clickteam Fusion logo and all content copyright (c) 2013 Clickteam LLC. Unless otherwise stated.

Page 13: CONTENTS - Clickteamdownload.clickteam.com/tutorials/en/Android_Bars.pdf · For more information, tutorials, examples and walk-thrus visit the website. Website: ... Fusion 2.5 or

Clickteam Fusion 2.5 – Android Bars - Guide

The Menu is set in Android Properties from there you may set the icon and the text

For more information, tutorials, examples and walk-thrus visit the website.

Website: http://www.Clickteam.com – Community: http://community.clickteam.com

The Clickteam Fusion logo and all content copyright (c) 2013 Clickteam LLC. Unless otherwise stated.

Press Here