Skip to main content
Known Participant
February 3, 2011
Question

AIR for Android - landscape mode

  • February 3, 2011
  • 4 replies
  • 19570 views

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:

<renderMode>gpu</renderMode>

<fullScreen>true</fullScreen>

<aspectRatio>landscape</aspectRatio>

<autoOrients>true</autoOrients>

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

This topic has been closed for replies.

4 replies

Participating Frequently
February 6, 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.

Rob_2006Author
Known Participant
February 7, 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

Inspiring
February 7, 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

RossD20Studios
Known Participant
February 3, 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.

Inspiring
February 3, 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

Rob_2006Author
Known Participant
February 4, 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

RossD20Studios
Known Participant
February 3, 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
   }

}

Inspiring
February 3, 2011

Hi Rob 2006

What you are missing is in Flash Profession CS5:

  1. Select the Air Android setting in the properties panel
  2. In the General tab check Full Screen
  3. 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

Rob_2006Author
Known Participant
February 3, 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 ...