CODEWITHSUNDEEP
ionic-framework
Muhammad Faizan Khan
Muhammad Faizan Khan

Reputation: 10561

How to restrict app to portrait mode only in ionic for all platforms?

I'm working on Ionic/Cordova, I added this to androidManifest.xml but this didn't work for me and app is still showing in both ways

android:screenOrientation="portrait"

How can I restrict my app to portrait mode only? I have checked on android and it doesn't work

Upvotes: 134

Views: 101826

Answers (10)

stanimirsp
stanimirsp

Reputation: 3086

Using ionic 7:

If you only want to lock orientation and won't use it for dynamic functionality in your app. You don't need to install any package but just to update the configuration.

  • On iOS

in Info.plist file edit value on key UISupportedInterfaceOrientations and leave only UIInterfaceOrientationPortrait. Like that:

<key>UISupportedInterfaceOrientations</key>
<array>
    <string>UIInterfaceOrientationPortrait</string>
</array>
  • On Android

In AndroidManifest.xml update activity tag and add:

  android:screenOrientation="portrait"

Upvotes: 2

AyushKatiyar
AyushKatiyar

Reputation: 1030

Please add android:screenOrientation="portrait" in the androidManifest.xml file as an attribute of activity tag for android.

<activity
        android:name="com.example.demo_spinner.MainActivity"
        android:label="@string/app_name"
        android:screenOrientation="portrait" >
</activity>

Upvotes: 7

Omkar Porje
Omkar Porje

Reputation: 288

In config.xml add the following line

<preference name="orientation" value="portrait" />

Upvotes: 1

Vivek Singh
Vivek Singh

Reputation: 521

If you want to do something on your orientation means you want to perform any action when change your app orientation then you have to use ionic framework plugin... https://ionicframework.com/docs/native/screen-orientation/

If you just want to restrict your app on portrait or landscape mode then you have to just add these following line in your config.xml

<preference name="orientation" value="portrait" />
                 OR
<preference name="orientation" value="landscape" />

Upvotes: 6

Tyler
Tyler

Reputation: 3826

Ionic v2+ Update

For Ionic versions 2 and later, you will need to also install the corresponding Ionic Native package for any plugin you use, including cordova-plugin- and phonegap-plugin- plugins.

  1. Install Ionic Native Plugin

    Install Ionic Native's TypeScript module for the plugin from the CLI.

    $ ionic cordova plugin add --save cordova-plugin-screen-orientation
$ npm install --save @ionic-native/screen-orientation

    * Note that the --save command is optional and can be omitted if you do not wish to add the plugin to your package.json file

  2. Import ScreenOrientation Plugin

    Import plugin into your controller, more details available in the documentation.

    import { ScreenOrientation } from '@ionic-native/screen-orientation';

@Component({
    templateUrl: 'app.html',
    providers: [
        ScreenOrientation
    ]
})

constructor(private screenOrientation: ScreenOrientation) {
  // Your code here...
}

  3. Do Your Thing

    Lock and unlock the screen orientation programatically.

    // Set orientation to portrait
this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.PORTRAIT);

// Disable orientation lock
this.screenOrientation.unlock();

  4. Bonus Points

    You can also get the current orientation.

    // Get current orientation
console.log(this.screenOrientation.type);  // Will return landscape" or "portrait"

Upvotes: 37

Bal mukund kumar
Bal mukund kumar

Reputation: 363

You can try this:-

Cordova plugin to set/lock the screen orientation in a common way for iOS, Android, WP8 and Blackberry 10. This plugin is based on an early version of Screen Orientation API so the api does not currently match the current spec. 

https://github.com/apache/cordova-plugin-screen-orientation

or try this code in xml config:-

<preference name="orientation" value="portrait" />

Upvotes: 0

Ahmed Bouchefra
Ahmed Bouchefra

Reputation: 256

First, you need to add the Cordova Screen Orientation Plugin using

cordova plugin add cordova-plugin-screen-orientation

and then add screen.lockOrientation('portrait'); to .run() method

angular.module('myApp', [])
.run(function($ionicPlatform) {

    screen.lockOrientation('portrait');
    console.log('Orientation is ' + screen.orientation);

});
})

Upvotes: 4

Vlasis Perdikidis
Vlasis Perdikidis

Reputation: 19

Inside your angular app.js add the line screen.lockOrientation('portrait'); like shown bellow:

an

angular.module('app', ['ionic'])
.run(function($ionicPlatform) {
    // LOCK ORIENTATION TO PORTRAIT.
    screen.lockOrientation('portrait');
  });
})

You will also have other code in the .run function, but the one you are interested in is the line I wrote. I haven't added the line <preference name="orientation" value="portrait" /> in my code, but you may need to add the cordova-plugin-device-orientation

Upvotes: 1

Vadiem Janssens
Vadiem Janssens

Reputation: 4109

If you want to restrict to portrait mode only on all devices you should add this line to the config.xml in your projects root folder.

<preference name="orientation" value="portrait" />

After that, please rebuild the platform by typing below text in command line:

ionic build

Upvotes: 330

Michael Zhou
Michael Zhou

Reputation: 151

According to https://cordova.apache.org/docs/en/4.0.0/config_ref/#global-preferences,

Orientation allows you to lock orientation and prevent the interface from rotating in response to changes in orientation. Possible values are default, landscape, or portrait. Example:

<preference name="Orientation" value="landscape" />

Be aware that these values are case sensitive, it is "Orientation", not "orientation".

Upvotes: 14

Related Questions