Flex Mobile Action Bar Back Buttons

Brief history of action bars on mobile devices:
1) Apple devices always had a “Back” button on the top action bar defined for their mobile devices.

2) Android devices depended on the hardware based back button to provide this functionality so a software based “Back” button was not included on the action bar.

This button behavior was described in a mobile skinning article on Adobe called Mobile Skinning Part 3.

Method 1
On the Adobe site, the article on creating your first mobile app, Build your first mobile Flex Application – Twitter Trends provides one method of dynamically rendering the back button in your mobile implementation. The code makes the “Back” button invisible when an android device is detected and visible for all other devices. The latest pdf is available at: Adobe devnet site.

Method 2
An alternative method to dynamically create a “Back” button if an Apple device is detected was illustrated in the web article on riagora.com site called Dynamic UI Patterns.

This “Back” button omission for android devices was recently changed by Google as indicated in this developer design article called, Pure Android. Read the section “Don’t use labeled back buttons on action bars”. In essence, they have a “Back” button on the action bar but it can not have text. The “Back” button should contain a chevron and icon to indicate backward navigation within the current application’s context.

The issue that now needs to be addressed is to make a Text label appear if it is an Apple device and to make an icon to appear if it is an Android device. I implemented 3 different approaches to test the performance and appearance of the back button on both apple and android devices using the following methods:

  1. Add device based Back button after detecting device in ViewActivate method for view
  2. Add device based Back buttons using states – detecting device in view activiate method
  3. Add device based Back button after detecting device in CreationComplete method for view

I went with approach 3 since it provided both the best performance response from the view and the smoothest transition for displaying the button.

Advertisements

One Response to Flex Mobile Action Bar Back Buttons

  1. […] my previous post, Flex Mobile Action Bar Back Buttons, I provided a brief overview of the history of back buttons for Android and Apple […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: