Shantanoo K Shantanoo K - 5 months ago 9
Android Question

Preventing pure HTML 5 mobile app from reseting when changing orientation in Android

I am developing a pure HTML 5 mobile app using jquery mobile and very less dependency on Android code apart from loading my main HTML file.

Following is my MainActivity code.

public class MainActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// setContentView(R.layout.activity_main);
WebView webView = new WebView(this);
WebSettings settings = webView.getSettings();
// TO enable JS
settings.setJavaScriptEnabled(true);
// To enable Localstorage
settings.setDomStorageEnabled(true);


webView.loadUrl("file:///android_asset/main.html");
setContentView(webView);
}


@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
// getMenuInflater().inflate(R.menu.main, menu);
return true;
}


Following is my Mainifest file

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.android_playlist"
android:versionCode="1"
android:versionName="1.0" >

<uses-permission android:name="android.permission.INTERNET"></uses-permission>
<uses-sdk
android:minSdkVersion="14"
android:targetSdkVersion="18" />
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name="com.example.android_playlist.MainActivity"
android:label="@string/app_name"
android:configChanges="orientation|keyboard|keyboardHidden"
android:screenOrientation="sensor" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>


As per the android documentation when the orientation is changed the Android re-loads the activity.
In my case my single activity is a single HTML5 file which contains list of videos. Now when I am testing this on my Android mobile the page reloads itself when I change my orientation.
I would like to avoid this. Can someone please suggest me a way to this.

Note: in my activity I am just loading this page and rest all code is at client side i.e. using jquery mobile so I am not sure how I will tell my Android to save my HTML5 page state.

Also, sometimes I noticed that when The app is crashes or if I hit the back button more than once to come out of the application my localStorage is getting clear.

I am using following syntax to store any item into localStorage.

localStorage.setItem() and localStorage.getItem()


Also I am using following 2 utility functions as I am storing json obj as well into localStorage.

Storage.prototype.setObj = function(key, obj) {
return this.setItem(key, JSON.stringify(obj));
}
Storage.prototype.getObj = function(key) {
if (this.getItem(key) != "undefined") {
return JSON.parse(this.getItem(key));
} else {
return null;
}
}

Answer

Use this for main activity

<activity android:name=".SomeActivity"
          android:label="@string/app_name"
          android:screenOrientation="landscape">

Or you can use

setRequestedOrientation (ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
Comments