Moods, Tutorials, Videos

Adaptive UI: mobile vs tablet

28 Comments 24 June 2011

Adaptive UI: mobile vs tablet

The screen size of a tablet device is much bigger than a smartphone one. It’s very close to a desktop one. If you plan to develop a mobile application and run it on smarphones and tablets, you need to adapt the UI (your views) for several reasons: user experience, performance and usability. Usually, you carry a smartphone with your left hand and interact with the fingers of your right-hand. Because of the size and the weight of tablets, you might design your screens differently to accept interactions on the left and on the right portions of the screen. Ideally, some users would just use their left and right thumbs to interact with your app. The shape of the BlackBerry PlayBook has been built to enable this “thumbs” experience. In this tutorial, I’ve just built a very simple application. It’s a gallery of pictures with two screens: the list of pictures view, and the full picture view. To enable the most efficient user experience, I defined three potential layouts:

The goal of this project is to handle these three layouts within one single project that will adapt its layout depending on the size and the orientation of the screen. I’ve been inspired by NJ’s presentation available on his blog. This video presents the final result on smartphones and tablets. As you can see, the performance of the application are excellent on Android, iOS and on the PlayBook.

States and groups

To adapt the UI, start with simple declarations of states. The use if stateGroups if necessary to reduce the size of your code creating two main families “screen sizes” (phone, tablet) and “orientation” (portrait,landscape).

<s:states>
	<s:State name="portraitPhone" stateGroups="phone,portrait"/>
	<s:State name="landscapePhone" stateGroups="landscape,phone"/>
	<s:State name="portraitTablet" stateGroups="portrait,tablet"/>
	<s:State name="landscapeTablet" stateGroups="landscape,tablet"/>
</s:states>

To switch from one state to another one, I’m just listening at Resize events.

protected function application1_resizeHandler(event:ResizeEvent):void
	{
 
		var isPortrait:Boolean = height > width;
		isTablet = height > 960 || width > 960;        
 
		currentState = (isPortrait ? "portrait" : "landscape") + (isTablet ? "Tablet" : "Phone");
	}

ViewNavigator x 2

Then I’m adding two ViewNavigator comps to my main <s:Application>. In this case, I’m building a Flex Mobile Project, but I’m not using the ViewNavigatorApplication architecture as a shell. Notice that the coordinates, the dimensions and the visibility of the viewNavigator components depend on the states (and on the state groups).

<!--TABLETS CENTERED VIEW-->
	<s:ViewNavigator includeIn="tablet"
		id="tabletPictureNavigator"
	        width.landscapeTablet="{this.width - phoneViewNavigator.width}"
		height.landscapeTablet="{this.height}"
		x.landscapeTablet="270"
		y.landscapeTablet="0"
		height="100%"
		width.portraitTablet="100%"
		x.portraitTablet="0"
		y.portraitTablet="400"
		height.portraitTablet="{this.height - phoneViewNavigator.height}"
 
	/>
	<!--PHONES-->
	<s:ViewNavigator
		width.phone="100%"
		height.phone="100%"
		width.portraitTablet="100%"
		height.portraitTablet="400"
		width.landscapeTablet="270"
		height.landscapeTablet="100%"
		id="phoneViewNavigator"
		backgroundColor="0xffff01"
 
		x="0" y="0"
		firstView="views.ListView"/>

The Hardware Back Button

The Flex 4.5 framework handles by default the Back Hardware Key on Android phones. It works perfectly with the classic ViewNavigatorApplication. In this case, as I’m using a <s:Application> shell architecture containing two ViewNavigator components, there is no stack of navigation at a root level and the application is lost when it receives a Back command. Here is the code that disable the classic behavior. I’ve added it within the view that displays the picture in full size.

protected function view1_initializeHandler(event:FlexEvent):void
			{
				// TODO Auto-generated method stub
				systemManager.stage.addEventListener(KeyboardEvent.KEY_DOWN, deviceKeyDownHandler);
				systemManager.stage.addEventListener(KeyboardEvent.KEY_UP, deviceKeyUpHandler);
			}
 
			protected function deviceKeyDownHandler(event:KeyboardEvent):void
			{
				// TODO Auto-generated method stub
				if(event.keyCode == Keyboard.BACK && navigator.length > 1){
					event.preventDefault();
				}
			}
 
			protected function deviceKeyUpHandler(event:KeyboardEvent):void
			{
				// TODO Auto-generated method stub
				if(event.keyCode == Keyboard.BACK && navigator.length > 1){
					navigator.popView();
				}
			}
 
			protected function view1_viewDeactivateHandler(event:ViewNavigatorEvent):void
			{
				// TODO Auto-generated method stub
				systemManager.stage.removeEventListener(KeyboardEvent.KEY_DOWN, deviceKeyDownHandler);
				systemManager.stage.removeEventListener(KeyboardEvent.KEY_UP, deviceKeyUpHandler);
			}

You can download the source code of this application and check the tricks introduced within my code.

Link to the source code application: http://riagora.com/pvt_content/android/DynamicLayout.fxp

I’ve also published the demo app on the Android Marketplace: https://market.android.com/details?id=air.com.riagora.dynamiclayout&feature=search_result

Post to Twitter

Your Comments

28 Comments so far

  1. 23yen says:

    Hello, and sorry for my maybe silly question, but how do i open your fxp file in FB? when i get to it in browser, it just displays weird stuff, and don’t know how to import project from url in fb?
    Thanks in advance

  2. admin says:

    @23yen Can u try with a different browser. It should be okay with chrome for instance. Or Right-click and try “Save link as…”

  3. milkmidi says:

    thanks your tutorial.

  4. nick says:

    Do we need to overlay the air 2.7 sdk? It doesn’t seem to compile in FB 4.5.1 – unkown namespace – is there going to be another update to FB before the end of month?

  5. Joseph says:

    Chapeau!!

    C’est vraiment sympa!!

  6. aristophrenia says:

    Hi,
    i am developing exactly this, with full site control via css, mysql using zend and amfphp. The aim of the project is to deliver across absolutely all types of phones. The php also uses swfobject and swfaddress, address offer iPhone and google search info.
    I use swf-resize to do custome stage resizing on top of all of this.

    I have several fixed objects, like box, circle, text, etc and everything is self organising. Scrolling is all controlled through, filters etc is all controlled through the CSS.

    WOULD VERY MUCH LIKE to get in touch to see where you are at with things. If you are interested will provide some links to examples.

    The entire thing is controlled through a CMS

  7. admin says:

    @aristophrenia Nice. I’m a big fan of PHP. Can you send me some links on my email ? mchaize at adobe dot com

  8. GreG says:

    Hi,

    the YouTube Video cant be viewed because they block it the content by music right problems ( DE / EU )

    Please reupload it without the music.

  9. admin says:

    oops… What is your country ? I’ll publish a new one without sound :)

  10. @Nick Yes, you will need to overlay the AIR 2.7 SDK. I saw the same namespace error.

    Alternatively, you probably could open the DynamicLayout-app.xml file and change the namespace from 2.7 to 2.6

    @Michaël Nice presentation from Adobe’s Developer week that included this Adaptive UI example. Everyone, be sure to check it out. It is called “Architecting Flex Applications For Re-Use Across Web, Desktop and Mobile.”

  11. daslicht says:

    the video is not available in germany :/

  12. Erkko says:

    Can you do this also for other views?

  13. 1942viva says:

    i am a newbie for andriod development,hope you can post more articles:)
    thx for sharing

  14. Flex Beginner says:

    Hello! Great post. I just have recently setup the flash builder 4.6 trial and the 4.6 SDK. I just downloaded your source file and imported it into FB but I am getting several “?” errors. When I try to compile it says that I am missing SDK Superhero. Is that something different from SDK 4.6? The mx components dont seem to work in my mobile setup. Thanks! Looking forward to learning this platform because it seems pretty great.

  15. rom says:

    Any Version for Flex 4.6?

  16. JESUS says:

    SDK Superhero ???????????????????????????????????????????????????????????????????”

  17. JESUS says:

    Excelente ^_^ funciona de maravilla

  18. admin says:

    replace it with flex 4.5 or 4.5.1.
    Superhero was the codename for 4.5


Trackbacks/Pingbacks

  1. Adaptive UI: mobile vs tablet | RIAgora » IT Blog 2011 - June 26, 2011

    [...] Continue reading here: Adaptive UI: mobile vs tablet | RIAgora [...]

  2. Adaptive UI fuer Smartphones und Tablets » Netbooknews.de - das Netbook Blog - June 27, 2011

    [...] dem grossartigen Blog von Michaël CHAIZE, eines Zeichens Adobe Evangelist (oder wohl eher Lobbyist aber das mag jeder fuer sich persoenlich [...]

  3. Adaptive UI for Smartphones and Tablets Demo | Netbooknews - Netbooks, Netbook Reviews, Smartbooks and more - June 27, 2011

    [...] all the difference for user experience. If you want to learn how to do this your self, check out his blog post here. [...]

  4. Eskimo, skins your mobile apps | RIAgora - July 25, 2011

    [...] Android and the BlackBerry PlayBook. I’ve already posted some tutorials to explain how to adapt dynamically the layout of your app depending on the screen resolutions, how to adapt your app to some UI patterns or how to manage custom gestures. Jason’s blog is [...]

  5. Favourite Reading 08/01/2011-08/31/2011 | HowardWu - September 3, 2011

    [...] Adaptive UI: mobile vs tablet  by Michaël Chaize [...]

  6. PTM - Pasi Manninen - Web and Mobile Developer - September 11, 2011

    [...] I decided to make mobile application with s:Application and first test is application running in mobile or tablet. After that different states are used in s:ViewNavigator to launch MainPhoneView or MainTabletView view depending on used device (mobile or tablet). (Michael Chaize has wrote excellent article about Adaptive UI: Mobile vs. Tablet). [...]

  7. Andrew Trice » Blog Archive » Flex for Mobile – Device Form Factor Detection - September 29, 2011

    [...] being consumed. If you’d like to read more, fellow Adobe Evangelist Michael Chaize also has a great example showing how to combine device form factor and orientation into Flex view states. [...]

  8. Using CSS for Phone and Tablet UI « Jason's Flex Blog - October 21, 2011

    [...] Best Practices for Building Flex Tablet Applications Glenn Ruehle Read: Adaptive UI: Phone vs. Tablet Michaël Chaize Read: Flex for Mobile – Device Form Factor Detection Andrew [...]

  9. Flex mobile and music apps | RIAgora - January 19, 2012

    [...] to use Flex to stream the playlists on smartphones and tablets. First, I’ve decided to use my adaptive layout technic to code one UI and target both mobile and tablet screens. Here is a video that explains the trick. [...]

  10. 類 Facebook App | Bananasims Workshop - June 13, 2012

    [...] 同 Phone 方面,上網搵咗一堆 state 既碼,擺落去最 top 既 ViewNavigatorApplication,再响 view 同 actionContent 控制 [...]

Share your view

Post a comment

Who am I ?

I'm Michaël CHAIZE, Adobe Flash Platform Evangelist based in Paris. I'm a big fan of Rich Internet Applications and I promote the Flash Platform in the Enterprise world.
You can follow me on twitter: http://twitter.com/mchaize

Magazine

Follow us on Facebook

© 2014 RIAgora. Powered by WordPress.

Daily Edition Theme by WooThemes - Premium WordPress Themes