How to lock orientation for only on one page on Mobile App?

Question

We are working on hybrid app, so from coding perspective most of the work is only in HTML5, CSS3 and Javascript/JQuery.

Was able to find related bunch of posts on SO

How to disable orientation change in Android?

However, we just need to lock orientation on only one page, dont have liberty to add settings in manifest file. Looking for a Javascript/JQuery based solution or an Android plugin that can be invoked using Javascript ?

Thanks Bic .. its a hybrid app basically, will try to do this in generated code. — Sachin Thapa, Sep 15 '14 at 15:13

score 0 · Answer 1 · answered Sep 15 '14 at 15:04

0

You are able to specify orientation per activity in the Android Manifest:

<activity
    android:name=".activities.LoginActivity">
</activity>

<activity
    android:name=".activities.HomeActivity"
    android:screenOrientation="userLandscape">
</activity>

In the above example, the LoginActivity will rotate when the user changes orientation, but the HomeActivity will always be in landscape.

answered Sep 15 '14 at 15:04

Bic

3,141
18
29

Thanks.. but need JQuery/Javascript based solution... edited question with some details. – Sachin Thapa Sep 15 '14 at 15:19

score 0 · Answer 2 · answered Sep 15 '14 at 15:05

0

You can set the orientation of one Activity programmatically by calling setRequestedOrientation() before calling setContentView() in onCreate() like this:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);

    ...
}

You can also specify the orientation for one Activity in your manifest by adding this:

android:screenOrientation="portrait"

Like this:

<activity android:name="com.example.ui.MainActivity"
          android:screenOrientation="portrait" />

answered Sep 15 '14 at 15:05

Xaver Kapeller

49,491
11
98
86

Thanks.. but need JQuery/Javascript based solution... edited question with some details. – Sachin Thapa Sep 15 '14 at 15:17
@SachinThapa So you are saying you are using Phonegap? Why wouldn't you mention that? And how does my answer not apply even if it is a hybrid app? For such specific things you are going to need to write a plugin for each platform. – Xaver Kapeller Sep 15 '14 at 15:19
Sorry.. I edited my question later.. whole app is one activity. – Sachin Thapa Sep 15 '14 at 15:25
@SachinThapa Then you cannot lock the orientation. You need to set the lock before calling `setContentView()` in `onCreate()`. After that you cannot change it or remove it anymore. You need to start a new `Activity` instance each time you want to change the orientation lock. – Xaver Kapeller Sep 15 '14 at 15:28
Thanks Xaver for taking out time to respond, yes exactly ! Was looking around to find a Javascript solution for the same reason. – Sachin Thapa Sep 15 '14 at 15:31
Well you will not find one, in case my previous comment wasn't clear enough: What you are trying to do is technically impossible on Android. – Xaver Kapeller Sep 15 '14 at 15:32

score 0 · Answer 3 · edited May 23 '17 at 11:52

0

I had a similar requirement for an app. It was not able to lock the orientation but I could detect the orientation change using the "deviceorientation" event which can be handled as window.addEventListener("deviceorientation", hadlerFunction, true);. What I did was, I showed an alert prompting the user to change tge orientation. It was not a hybrid app. However if you follow this [link][1]

[1]: Ability to lock orientation of device with JavaScript in PhoneGap/Cordova you would get some inputs for your question.

edited May 23 '17 at 11:52

Community

1
1

answered Sep 15 '14 at 15:31

MaheshMG

41
3

Thanks @MaheshMG, looking at the link, this might be close to what we want to do. – Sachin Thapa Sep 15 '14 at 15:33

score 0 · Accepted Answer · answered Sep 24 '14 at 13:35

0

Found a very simple plugin that can do this job:

pg-plugin-screen-orientation

Very easy to use:

To lock the screen to Landscape: navigator.screenOrientation.set('landscape');
To lock the screen to Portrait: navigator.screenOrientation.set('portrait');
To unlock: navigator.screenOrientation.set('fullSensor');

Worked for us.

answered Sep 24 '14 at 13:35

Sachin Thapa

3,559
4
24
42

This plugin is deprecated now, use this one: http://stackoverflow.com/a/32405615/1848600 – Gajotres Sep 04 '15 at 20:07

How to lock orientation for only on one page on Mobile App?

4 Answers4