AIR for Android - landscape mode

Report · Feb 03, 2011

Hi All,

I have trouble starting my AIR application in landscape mode on a htc desire. The app does not start in landscape mode and the device orientation is ignored as well.

My air app has width of 800 and height of 480 pixels.

That's defined in my meta tag:

[SWF(backgroundColor="#000000", frameRate="30", quality="HIGH", width="800", height="480")]

I also edited the application descriptor file:

<aspectRatio>landscape</aspectRatio>

Everything seems to be ignored. My app is displayed in portrait mode scaled centred and with large black bars.

Am I missing something here?

Cheers

Robin

Report · Feb 03, 2011

Hi Rob 2006

What you are missing is in Flash Profession CS5:

Select the Air Android setting in the properties panel
In the General tab check Full Screen
Select the Aspect Ratio tab and select Landscape and compile.

When you view on your HTC Desire it will be the right orientation with no black boarders

Hope this help.

regards Mike

Report · Feb 03, 2011

Hmm – I'm using the adt command line. I reckon Flash just creates a <fullScreen>true</fullScreen> and a <aspectRatio>landscape</aspectRatio> tag when selecting these settings in the IDE. So the outcome should be the same ...

Report · Feb 03, 2011

Robin,

Set your "autoOrients" to false and the app should start/stay in landscape mode. Try that first and let me know if it works.

Next, to get autoOrient working so the device adapts depending on whether it is held vertical/horiztonal, you need to do the following:

1) Renable the "autoOrients" option

2) Set stage properties as follows:

stage.align = StageAlign.TOP_LEFT;

stage.scaleMode = StageScaleMode.NO_SCALE;

3) Add listener events for the stage resizing:

stage.addEventListener(Event.RESIZE, resizeHandler);
stage.dispatchEvent(new Event(Event.RESIZE));

function resizeHandler(e:Event):void{
   if(stage.stageWidth > stage.stageHeight){
    orientHorizontal();     //Write a custom function that repositions your display objects for horizontal viewing
   }
   else{
     orientVertical();       //Write a custom function that repositions your display objects for vertical viewing
   }

}

Report · Feb 03, 2011

If my above solution doesn't work, it's possible that there may be a bug specifically with HTC Desire running landscape mode in AIR.

See the following similar post from another user: http://forums.adobe.com/message/3446162#3446162.

Report · Feb 03, 2011

This is baffling to me as I have an HTC Desire and I am sure this works.

In fact I just made an APK using the CS5 Android extension. It uses no code and has 'landscape' set in the auto-generated app-xml.

When I load it on my phone the orientation is landscape and I have to rotate my phone to read it properly. If I change the xml to portrait then it comes up in portrait as expected.

It is here if you want to try: http://www.coldwired.com/orient.apk

(i'm going to delete this after a few days)

It is simply a textfield with the word 'TEST' inside, placed on the stage.

How does it come up on your phone?

Nick

Report · Feb 04, 2011

Ok I don't get it. Thank you Nick - your apk works fine (starts in landscape) so I think it's no the device.

I created a small test app and still no success. Here is the code:

package
{
     import flash.display.Sprite;
     import flash.display.StageAlign;
     import flash.display.StageScaleMode;
     import flash.events.Event;
     import flash.events.StageOrientationEvent;
     import flash.text.TextField;
     import flash.text.TextFormat;
     
     import flashx.textLayout.formats.TextAlign;
     
     public class Orientation extends Sprite
     {
          
          protected var _textField:TextField = new TextField();
          
          
          [SWF(backgroundColor="#FFFFFF", frameRate="30", quality="HIGH", width="800", height="480")]     
          public function Orientation()
          {
               this.addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);
               
               this.addChild(_textField);
               _textField.text = "waiting for orientation change...";
               _textField.width = 200;               
               
               centreTextField();
          }
          
          
          
          protected function addedToStageHandler(e:Event):void
          {     

               stage.align = StageAlign.TOP_LEFT;
               stage.scaleMode = StageScaleMode.NO_SCALE;
               
               stage.addEventListener(StageOrientationEvent.ORIENTATION_CHANGE, orientationChangeHandler);
               
               
               // for testing pursoses 
               //stage.addEventListener(Event.RESIZE, orientationChangeHandler);
               
               
               // dirty work around to set it to  landscape.....
               /*
               this.rotation = 90;
               this.x = 800 - 160;
               this.y = -160;*/
          }
          
          
          protected function orientationChangeHandler(e:Event):void
          {
               
               
               
               if (stage.stageWidth > stage.stageHeight)
               {
                    _textField.text = "landscape";
               }
               else
               {
                    _textField.text = "portait";
               }
               centreTextField();
               
               
          }
          
          
          protected function centreTextField():void
          {               
               var textFormat:TextFormat = new TextFormat();
               textFormat.align = TextAlign.CENTER;
               _textField.setTextFormat(textFormat);
               
               _textField.x = stage.stageWidth/2 - _textField.width/2;
               _textField.y = stage.stageHeight/2 - _textField.height/2;                         
          }
          
     }
}

This works fine on iOS btw.

And here is the descriptor code:

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<application xmlns="http://ns.adobe.com/air/application/2.5">

<!-- Adobe AIR Application Descriptor File Template.

     Specifies parameters for identifying, installing, and launching AIR applications.

     xmlns - The Adobe AIR namespace: http://ns.adobe.com/air/application/2.5
               The last segment of the namespace specifies the version 
               of the AIR runtime required for this application to run.
               
     minimumPatchLevel - The minimum patch level of the AIR runtime required to run 
               the application. Optional.
-->

     <!-- A universally unique application identifier. Must be unique across all AIR applications.
          Using a reverse DNS-style name as the id is recommended. (Eg. com.example.ExampleApplication.) Required. -->
     <id>Orientation</id>

     <!-- Used as the filename for the application. Required. -->
     <filename>Orientation</filename>

     <!-- The name that is displayed in the AIR application installer. 
          May have multiple values for each language. See samples or xsd schema file. Optional. -->
     <name>Orientation</name>
     
     <!-- A string value of the format <0-999>.<0-999>.<0-999> that represents application version which can be used to check for application upgrade. 
          Values can also be 1-part or 2-part. It is not necessary to have a 3-part value.
          An updated version of application must have a versionNumber value higher than the previous version. Required for namespace >= 2.5 . -->
     <versionNumber>1.0.0</versionNumber>
                   
     <!-- A string value (such as "v1", "2.5", or "Alpha 1") that represents the version of the application, as it should be shown to users. Optional. -->
     <!-- <versionLabel></versionLabel> -->

     <!-- Description, displayed in the AIR application installer.
          May have multiple values for each language. See samples or xsd schema file. Optional. -->
     <!-- <description></description> -->

     <!-- Copyright information. Optional -->
     <!-- <copyright></copyright> -->

     <!-- Publisher ID. Used if you're updating an application created prior to 1.5.3 -->
     <!-- <publisherID></publisherID> -->

     <!-- Settings for the application's initial window. Required. -->
     <initialWindow>
          <!-- The main SWF or HTML file of the application. Required. -->
          <!-- Note: In Flash Builder, the SWF reference is set automatically. -->
          <content>[This value will be overwritten by Flash Builder in the output app.xml]</content>


          <!-- The type of system chrome to use (either "standard" or "none"). Optional. Default standard. -->
          <!--<systemChrome>none</systemChrome>-->


          <!-- Whether the window is initially visible. Optional. Default false. -->
          <visible>true</visible>
          
          <renderMode>cpu</renderMode>
          <fullScreen>true</fullScreen> 
          <aspectRatio>landscape</aspectRatio>
          <autoOrients>true</autoOrients>
          
     </initialWindow>

    <!-- We recommend omitting the supportedProfiles element, -->
    <!-- which in turn permits your application to be deployed to all -->
    <!-- devices supported by AIR. If you wish to restrict deployment -->
    <!-- (i.e., to only mobile devices) then add this element and list -->
    <!-- only the profiles which your application does support. -->
    <!-- <supportedProfiles>desktop extendedDesktop mobileDevice extendedMobileDevice</supportedProfiles> -->

     <!-- The subpath of the standard default installation location to use. Optional. -->
     <!-- <installFolder></installFolder> -->

     <!-- The subpath of the Programs menu to use. (Ignored on operating systems without a Programs menu.) Optional. -->
     <!-- <programMenuFolder></programMenuFolder> -->

     <!-- The icon the system uses for the application. For at least one resolution,
           specify the path to a PNG file included in the AIR package. Optional. -->
     <!-- <icon>
          <image16x16></image16x16>
          <image32x32></image32x32>
          <image36x36></image36x36>
          <image48x48></image48x48>
          <image72x72></image72x72>
          <image128x128></image128x128>
     </icon> -->

     <!-- Whether the application handles the update when a user double-clicks an update version
     of the AIR file (true), or the default AIR application installer handles the update (false).
     Optional. Default false. -->
     <!-- <customUpdateUI></customUpdateUI> -->
     
     <!-- Whether the application can be launched when the user clicks a link in a web browser.
     Optional. Default false. -->
     <!-- <allowBrowserInvocation></allowBrowserInvocation> -->

     <!-- Listing of file types for which the application can register. Optional. -->
     <!-- <fileTypes> -->

          <!-- Defines one file type. Optional. -->
          <!-- <fileType> -->

               <!-- The name that the system displays for the registered file type. Required. -->
               <!-- <name></name> -->

               <!-- The extension to register. Required. -->
               <!-- <extension></extension> -->
               
               <!-- The description of the file type. Optional. -->
               <!-- <description></description> -->
               
               <!-- The MIME content type. -->
               <!-- <contentType></contentType> -->
               
               <!-- The icon to display for the file type. Optional. -->
               <!-- <icon>
                    <image16x16></image16x16>
                    <image32x32></image32x32>
                    <image48x48></image48x48>
                    <image128x128></image128x128>
               </icon> -->
               
          <!-- </fileType> -->
     <!-- </fileTypes> -->

  <!-- Specify Android specific tags that get passed to AndroidManifest.xml file. -->
  <!--<android> -->
  <!--<manifestAdditions> 
          <![CDATA[
               <manifest android:installLocation="auto">
                    <uses-permission android:name="android.permission.INTERNET"/>
                    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
                    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
                    <uses-configuration android:reqFiveWayNav="true"/>
                    <supports-screens android:normalScreens="true"/>
                    <uses-feature android:required="true" android:name="android.hardware.touchscreen.multitouch"/>
                    <application android:enabled="true">
                         <activity android:excludeFromRecents="false">
                              <intent-filter>
                              <action android:name="android.intent.action.MAIN"/>
                              <category android:name="android.intent.category.LAUNCHER"/>
                              </intent-filter>
                         </activity>
                    </application>
               </manifest>
          ]]>
      </manifestAdditions> -->
    <!-- </android> -->
  <!-- End of the schema for adding the android specific tags in AndroidManifest.xml file -->
  
</application>

Seems all straight forward to me. Would be cool if anbody could try to compile this on his/her computer. Im using the Flex 4.1 SDK and the AIR 2.5 SDK.

Cheers

Robin

Report · Feb 04, 2011

Hi Robin,

Here's something else you could take a look at, just to be sure:

If you go and get a tool like apktools http://code.google.com/p/android-apktool/ then you can deconstruct the apk and open the android manifest xml and make absolutely sure the aspect ratio is set to 'landscape' in the finished product.

Then we'll know whether or not something is going wrong during the build.

Or if you want to post the apk I'll do it?

Nick

Report · Feb 04, 2011

I tested the app on a Nexus one – so it's definitely not the device. Here is the link to the apk file:

http://dl.dropbox.com/u/4393586/Orientation.apk

Would be great if you could test it Nick.

Cheers

Robin

Report · Feb 04, 2011

I think we're getting somewhere now.

I tested your apk on my phone and it opened in portrait mode.

So I used apktool to decode the apk and I took a look at the android manifest xml, and it seems to be missing some stuff. (To clarify, this is the android manifest xml, not the app xml).

I'm not familiar with what should and shouldn't be there so I may be barking up the wrong tree, but a typical android manifest xml file would contain a few lines like this example:

It gets that data from the settings in the app xml (the one that we include in the build). I can see your app xml too and it's all correct, you have set up the landscape aspect ratio. I have no idea why it is not making it into the completed apk.

So anyway, I suspect the app is reverting to portrait mode when it starts because that's the default aspect ratio when none is specified.

I will think about this a bit more, but I need some lunch now!

Nick

Report · Feb 04, 2011

What about the <manifestAdditions> tag? Not sure what it is for but when it's not commented I get a compiler arrow...

Thanks for your help.

Report · Feb 04, 2011

That sounds strange that you would get an error. To give you some perspective, the CS5 extension creates an empty manifestAdditions tag, rather than commenting it out.

I just use a cutdown one in my apps, like this:

<![CDATA[<manifest android:installLocation="auto">
<uses-permission android:name="android.permission.INTERNET"/>
</manifest>]]>
</manifestAdditions>
</android>

You want to give that a try and recomplile your apk? I don't see why this would affect the aspectRatio, but maybe they are symptoms of the same problem.

On a separate note, the manifestadditions that you have commented out in your apk has this line in it:

<uses-configuration android:reqFiveWayNav="true"/>

And that would prevent your app showing up in the marketplace on any device without a trackball. The HTC Desire has one, but a lot of other phones don't.

Nick

Report · Feb 04, 2011

Hi Nick,

on my way home now - will try that on Monday.

Have a good weekend and thanks again for your help!

Cheers

Robin

Report · Feb 05, 2011

Hello All,

I've been having the same issue as Rob - in the end, I just built my app in portrait, but for future apps, especially games, I really want to be able to use landscape.

From reading this thread, there seems to be an error when compiling the apk and the <landscape> tag somehow gets changed back to <portrait>. I don't think it's a problem with coding or the application XML since I tried this and had the same issue with a Hello World grade test app. However, if it's not a phone issue, is it just coincidence that both Rob and myself have HTC Desires?

I'll be following this post and I'll also post my findings when I get a chance to work on it sometime next week.

Report · Feb 07, 2011

Ok that's all very strange. Even if I use the cut-down version of the “android tag” I can't compile the apk file. I always get an error message: error 105: application.android.additions contains an invalid value.

Sine it's not a device issue (it does not work on a Nexus One either) and people who use the Flash IDE does not have this problem either, I assume it has something to do with the command ADT compiler in the Air SDK.

So my question is: Does anyone use ADT to compile apks and does/doesn't have the same issue?

I uploaded my “hello world” orientation testing flex project for testing purposes.

http://dl.dropbox.com/u/4393586/Orientation.fxp

Cheers

Robin

Report · Feb 07, 2011

I've tried compiling it via ADT with AIR 2.5 and it opened in landscape mode as normal.

Then I tried copying and pasting in your app xml from above, swapping the filenames and re-compiling. This time it opened in portait mode and I thought I'd managed to recreate the issue.

Then I saw <autoOrients> is set to true. As soon as I set that to false, it opened in landscape mode.

So I think that all along it's been opening in landscape and immediately re-orientating itself to portrait? This is unusual on my phone because I have auto-orientation switched off at an OS level, but still that would explain everything.

Can you try setting <autoOrients> to false?

If that's not it, then I think whatever is causing the error with the manifest additions on your system is responsible. It compiled fine with manifestAdditions for me.

Nick

Report · Feb 08, 2011

Hi Nick,

no - changing the auto <autoOrients> to false does not help either. I tried this before. The opposite does not work either (changing the <autoOrients> to true and the <aspectRatio> to portrait). It seems that the orientation change events are never dispatched and/or never received. The auto orientation setting in the OS is switched on as well.

Could you send me your application descriptor xml?

Cheers

Robin

Report · Feb 08, 2011

Yep, here you go:

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<application xmlns="http://ns.adobe.com/air/application/2.5">

<id>orient</id>

<filename>orient</filename>

<name>orient</name>

<initialWindow>
    <content>orient.swf</content>
    <systemChrome>standard</systemChrome>
    <transparent>false</transparent>
    <visible>true</visible>
    <fullScreen>true</fullScreen>
    <aspectRatio>landscape</aspectRatio>
    <renderMode>cpu</renderMode>
    <autoOrients>false</autoOrients>
</initialWindow>

<icon/>

<customUpdateUI>false</customUpdateUI>

<allowBrowserInvocation>false</allowBrowserInvocation>

<![CDATA[<manifest>
</manifest>]]>
</manifestAdditions>
</android>

</application>

Report · Feb 08, 2011

No luck:

error 105:application.android.manifestAdditions contatins an invalid value

that's what I get when the mainfest tag is not commented.

Not sure what the reason for this could be ....

Cheers

Robin

Report · Feb 09, 2011

Ok – I just compiled my orientation app on my macbook (before I was using my work PC). Same result – I don't get any orientation change events and I'm not able to launch the app in landscape mode either.

So I sum up:

it can't be the device
it's unlikely that it is my setup

So it must be my application or a bug in the compiler.

So please if anybody out there is using Flash Builder and the command line to compile apks then please send me a demo app flash builder project (just a hello world text filed app will do).

Any help is appreciated.

Cheers

Robin

Report · Feb 11, 2011

Ok I fixed it finally ....

Here is how:

1. Downloaded Flash CS5 trail

2. Installed the air extensions

3. Copied the AIR 2.5 folder and used contained ADT for command line compiling

Now it works like a charm.

So I guess there is some bug in the ADT compiler that comes with the AIR 2.5 standalone SDK. The one that's included in the Android extensions for Flash CS5 does not have the orientation bug.

Hope this information is useful for people who prefer to use flash builder for development and ran in the same problem.

Cheers

Robin

Report · Feb 23, 2011

Hello Robin and All,

Remember I was having the same problem? I tracked it down at last and fixed it.

You said that you thought the problem was with Flash Builder and it was fixed when you switched to Flash CS5. This struck me as odd because I had been using Flash CS5 and having this issue. Actually, the problem was with the extension.

I had installed the extension: AIRforAndroid_FlashCS5_070510.zxp which shows up in the extension manager as AIR for ANDROID pre-release. The problem was with this file. (You don't get any kind of prompt when a newer version is available.)

I downloaded the latest one to replace it (flashpro_extensionforair_p2_112210.zxp) and now it works perfectly.

Robin, when you switched to Flash CS5 from FlashBuilder, you mentioned that you downloaded a new extension. This is what fixed your problem as far as I can see.

I hope this post helps out anyone with the same issue.

Report · Feb 23, 2011

Hello Robin and All,

Remember I was having the same problem? I tracked it down at last and fixed it.

You said that you thought the problem was with Flash Builder and it was fixed when you switched to Flash CS5. This struck me as odd because I had been using Flash CS5 and having this issue. Actually, the problem was with the extension.

I had installed the extension: AIRforAndroid_FlashCS5_070510.zxp which shows up in the extension manager as AIR for ANDROID pre-release. The problem was with this file. (You don't get any kind of prompt when a newer version is available.)

I downloaded the latest one to replace it (flashpro_extensionforair_p2_112210.zxp) and now it works perfectly.

Robin, when you switched to Flash CS5 from FlashBuilder, you mentioned that you downloaded a new extension. This is what fixed your problem as far as I can see.

I hope this post helps out anyone with the same issue.

Adobe Community

AIR for Android - landscape mode