Locking Landscape Device Orientation

Question

am developing a phonegap application and have an issue with the device orientation.

Basically I want the user to be free to use the device as he/she wishes to, either portrait or landscape. However, I only want the screen to turn to Portrait or Landscape. Currently the screen is also turning reverse landscape.

Is it possible to limit the orientation changes to portrait and landscape only? (so you would have a total of 2 orientation change possibilities rather than 3).

EDIT

I have used a plugin (suggested below) and came up with the below code that works. Once the screen is rotated to reverseLandscape, it is displayed in landscape mode instead (exactly what I wanted). However the issue is that if the user turns the mobile in portrait mode, the orientation is locked and would not turn back to portrait.

    $(window).bind('orientationchange', function(event){

    if (event.orientation == 'landscape') {
     navigator.screenOrientation.set('landscape');
    } 
    if (event.orientation == 'portrait') {
     navigator.screenOrientation.set('portrait');
    }

   });

Anyone has any idea where I should put the following line so that it unlocks the orientation?

navigator.screenOrientation.set('fullSensor');

Solution

You will need to change main Phonegap Activity class. First remove this line from AndroidManifest file:

android:screenOrientation="portrait"

We still need:

android:configChanges="orientation|keyboardHidden"  

Unfortunately we can't configure more then one orientation mode in screenOrientation. Because of that we will change it through java code.

This is a working code example:

package com.roadrunner.mobile21;

import android.content.pm.ActivityInfo;
import android.content.res.Configuration;
import android.hardware.SensorManager;
import android.os.Bundle;
import android.view.Display;
import android.view.OrientationEventListener;
import android.view.Surface;

import com.phonegap.*;

public class RoadRunnerActivity extends DroidGap {
    OrientationEventListener myOrientationEventListener;    

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.loadUrl("file:///android_asset/www/index.html");

        myOrientationEventListener = new OrientationEventListener(this, SensorManager.SENSOR_DELAY_NORMAL){

            @Override
            public void onOrientationChanged(int arg0) {

                Display display;         
                display = getWindow().getWindowManager().getDefaultDisplay();
                int rotation = display.getRotation();   
                if(rotation == Surface.ROTATION_0 || rotation == Surface.ROTATION_90) {
                    unlockScreenOrientation();                      
                }        
            }                
        };  
        if (myOrientationEventListener.canDetectOrientation()){
            myOrientationEventListener.enable();
        } else{
            finish();
        }         
    }


    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        Display display;         
        display = getWindow().getWindowManager().getDefaultDisplay();
        int rotation = display.getRotation();   
        if(rotation == Surface.ROTATION_180 || rotation == Surface.ROTATION_270) {
            lockCurrentScreenOrientation();                     
        } 
    }  

    private void lockCurrentScreenOrientation() {
        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
    }

    private void unlockScreenOrientation() {
        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_USER);
    }    

}

• There is also a possibility to alter screen orientation through css. I dont like because it is a little bit buggy but here you can find more about it. It is an easiest way but you will need to play a little to make it work.

This will easily do it:

$(window).bind("orientationchange", function(){
    var orientation = window.orientation;
    var new_orientation = (orientation) ? 0 : 180 + orientation;
    $('body').css({
        "-webkit-transform": "rotate(" + new_orientation + "deg)"
    });
});

you will need to change a formula to only accommodate 0 and 90 degree orientation.