Android: Unable to achieve screen orientation, app closes on device rotation

Question

As soon as the device is rotated, the app closes. I want the app to rotate in all the four directions. I've included screenSize in configChanges and screenOrientation is made as fullSensor. Apart from these inclusions should I be doing anything else to achieve screen rotation? AndroidManifest.xml activity code is as follows

<application
    android:allowBackup="true"
    android:icon="@drawable/ic_launcher"
    android:label="@string/app_name"
    android:theme="@style/AppTheme" >
    <activity
        android:name="com.example.testappone.MainActivity"
        android:label="@string/app_name" >
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />

            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>
    <activity 
android:name="org.apache.cordova.DroidGap" 
android:label="@string/app_name" 
android:configChanges="orientation|keyboardHidden|screenSize" 
android:screenOrientation="fullSensor">
<intent-filter></intent-filter> </activity> </application>  

 //code for the activity
 <html>
 <head>
 <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
 <link rel="stylesheet" href="css/jquery.mobile-1.2.1.min.css"/>
 <script src="js/jquery-1.6.1.min.js"></script>
 <script src="js/jquery.mobile-1.2.1.min.js"></script>
 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>           
 </head>
 <script>
 document.addEventListener("deviceready", onDeviceReady, false);
 function onDeviceReady() {
navigator.geolocation.getCurrentPosition(onSuccess, onError);
 }
function onSuccess(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
initialize(lat, lon);
var lat1=lat; var lon1= lon;
window.lat1 = lat1;
window.lon1 = lon1;
}
function onError(error) {
alert('code: ' + error.code + '\n' +
    'message: ' + error.message + '\n');
}
function Senddata() 
        {
        var Datasend = { "latitude ": lat1,"longitude": lon1   };
             $.post(
                 "http://devtests9.dreamhosters.com/post.php" ,
                {json: JSON.stringify(Datasend)},
                 function (data) {
                     alert("success…" + data);
                 }
             );
         }
 var map;
function initialize(lat, lon) {
var mapDiv = document.getElementById('map-canvas');
if (mapDiv == null) {
    // if not, wait until it does
    google.maps.event.addDomListener(window, 'load', function(){
        initialize(lat, lon);
    });
} else {
map = new google.maps.Map(mapDiv, {
        center: new google.maps.LatLng(lat, lon),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    google.maps.event.addListenerOnce(map, 'tilesloaded', function(){
        addMarkers(lat, lon);
    });
}
}
 function addMarkers(lat, lon) {
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
var latLng = new google.maps.LatLng(lat, lon);
var marker = new google.maps.Marker({
    position: latLng,
    map: map
});
}
  google.maps.event.addDomListener(window, 'load', initialize);
  </script>
      <body style="font-family" style="width:100%; height=500px;">
      <div data-role="page" data-theme="d" id="page1">
      <div data-theme="a" data-role="header" data-position="fixed">
        <h2>
      Map
      </h2>
<a href="#page2" data-icon="arrow-r" data-position="fixed">Post</a>
      </div>
          <div id="map-canvas" style="width:100%; height:500px;"></div>

        <div data-role="footer" data-position="fixed"></div>
        </div>
      <div data-role="page" data-theme="d" id="page2"> 
<div data-role="header" data-position="fixed" >
<a href="#page1" data-icon="arrow-l" data-position="fixed">Map</a>
<h1>Post Location</h1>
</div>
    <button onClick="Senddata();">Tap to Post Location</button>
<div data-role="footer" data-position="fixed">
</div>
</div>
      </body>
      </html>

Answer 1

I've been having this same problem. My HTML5 app wasn't wable to rotate. The App just close.

I've only been able to do that after I've stopped using PhoneGap 2.9. I've tried to implement the same code I've hade with PhoneGap 2.8.1 but it didn't work.

So I've downloaded PhoneGao 2.3.0 and now rotation works fine.

=D

Android: Unable to achieve screen orientation, app closes on device rotation

Question

1 answers

solution1
0 2014-08-05 19:23:26

Android: Unable to achieve screen orientation, app closes on device rotation

Question

1 answers

solution1 0 2014-08-05 19:23:26

solution1
0 2014-08-05 19:23:26