Develop Reference

Android - How to force Portrait orientation on phone and tablets, but Landscape only on Android TV?

I am developing an Android application in portrait mode like this:
[ScreenOrientation = Android.Content.PM.ScreenOrientation.Portrait)]
public class MainActivity : AppCompatActivity
{
// ...
}
It is working fine on all phone and tablet devices, both physical and emulators.
On the other hand, it is working very bad on Android TV emulators. The screen is being cut in half and the application is unusable. However landscape orientation seems good for Android TV format and works fine.
So my question is: is there any way to keep portrait orientation for phone and tablets and use landscape for TV?
I tried to use resources and size qualifiers (like a bool threshold value in res/values-sw1200dp) and then request an orientation change with RequestedOrientation = Android.Content.PM.ScreenOrientation.Landscape; but I'm afraid to include also high definition tablets in this way.
Does anyone have a better solution? I am developing in Xamarin.Android, but any solution in Android Studio would also be welcome.

Found a solution myself. I do not want to use sizes as some tablets have better resolution than TVs.
var res = Application.Context.Resources;
if (res.DisplayMetrics.DensityDpi == Android.Util.DisplayMetricsDensity.Tv ||
res.Configuration.UiMode.HasFlag(Android.Content.Res.UiMode.TypeTelevision))
{
RequestedOrientation = Android.Content.PM.ScreenOrientation.Landscape;
}
This is basically the code. Then I used other code tricks like global vars as activity was being recreated if this was called inside onCreate method. Putting this on manifest.xml was not enough.
android:configChanges="orientation|screenSize"

Titanium android different orientation lock between tablet and phone

I'm using Titanium, my app supports tablets and phones. For phones I need to use PORTRAIT orientation anche for tablets LANDSCAPE.
I tried to configure android:screenOrientation="nosensor" in tiapp.xml importing all activities from AndroidManifest.xml and orientationModes : [Ti.UI.LANDSCAPE_LEFT] in window configuration in tablet case, but I have no results. All orientations are active.
Anyone can help me?

This should be pretty forward with following points:
Since you need to change orientations at runtime, you cannot control it from tiapp.xml unless you create separate builds for phones and tablets which I believe is not the case.
Leave tiapp.xml as default and do not set any orientation there.
Use below snippet for handling it inside app.tss file.
"Window[if=Alloy.isTablet]" : {
orientationModes : [Ti.UI.LANDSCAPE_LEFT, Ti.UI.LANDSCAPE_RIGHT]
}
"Window[if=Alloy.isHandheld]" : {
orientationModes: [Ti.UI.UPSIDE_PORTRAIT, Ti.UI.PORTRAIT]
}
This solution will work only if you create Window controllers using XML, not by using Classic JS.
Double check your code to not to set orientations anywhere else to avoid any issues.

locking screen orientation on mobile browser

I create a web page(chrome & safari) for mobiles (iphone & android), I want to lock the screen orientation in portrait mode.
Unlike mobile apps,there is no manifest file and activity as it a web page.
How to lock the orientation in mobiles using technologies (css/javascript/bootstrap/jquery) or any other?

I use a manifest file for my web app, which locks orientation for Chrome on my Android. For whatever reason, Safari gives their users the "right" to do this, but not the designers of the web app... Sort of feels like copyright infringement or something! ;) Don't get me started on Safari's disgraceful rewriting/rendering of input buttons!...
Anyways, back to the answer.
1) Include a link to your manifest within the head section of your page:
<link rel="manifest" href="http://yoursite.com/manifest.json">
2) Create your manifest file, "manifest.json"
{
"name":"A nice title for your web app",
"display":"standalone",
"orientation":"portrait"
}
3) Read more about manifests HERE

From my tests, assigning the screen.lockOrientation ( every browser versions ) to a var throw an illegal invocation error. Just use wind.screen.orientation.lock('landscape'); . It
EDIT: You can't use lock orientation on safari, cause it doesn't support fullscreen api at the moment http://caniuse.com/#feat=fullscreen . The lock orientation API NEED a fullscreen page to work. In Chrome, the window.screen.orientation.lock return a promise. So, AFTER you go fullscreen with the page, you can do something like this :
var lockFunction = window.screen.orientation.lock;
if (lockFunction.call(window.screen.orientation, 'landscape')) {
console.log('Orientation locked')
} else {
console.error('There was a problem in locking the orientation')
}
However, the lock orientation and fullscreen API are still experimental, not all browsers supports it.

The lockOrientation method locks the screen into the specified orientation.
lockedAllowed = window.screen.lockOrientation(orientation);
From the following code, you can check that orientation is locked or not.
var lockOrientation = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;
if (lockOrientation("landscape-primary")) {
// orientation was locked
} else {
// orientation lock failed
}
see the following link, you will get idea from this.
https://developer.mozilla.org/en-US/docs/Web/API/Screen.lockOrientation

You can use:
screen.addEventListener("orientationchange", function () {
console.log("The orientation of the screen is: " + screen.orientation);
});
and
screen.lockOrientation('landscape');
Following: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Managing_screen_orientation

disable css animation on mobile devices

I am working on a horizontal scrolling site and to add to it it has a couple of CSS animations that totally crash all the browsers on the ipad i am testing on, so I am wondering if there is a way for the code to detect mobile devices (iOs, Android..) over and above screen sizes, to just disable animation for it?
Thanks for all your help in advance.
I haven't attached any code to it because, I really do not know what I would use to detect the Os, I am aware of using media queries but as I said window size is not what I am looking for its the Mobile OS that I want to target.

You can use the navigator.platform property to check the device type, then use some javascript to add the stylesheet containing your CSS animations if it's not one of the excluded platforms.
For example, to load the animations for all devices besides iPads, you could do:
if(navigator.platform != 'iPad')
{
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'animations.css';
document.getElementsByTagName('head')[0].appendChild(link);
}
For a list of platform values, refer here:
What is the list of possible values for navigator.platform as of today?
For more info on loading a stylesheet with JS, look here:
How to load up CSS files using Javascript?

Jquery mobile orientation change returns opposite value

I am currently working on a mobile website using jquery mobile and I encountered problem in detecting orientation change. My mobile website detects the orientation as "landscape" when in portrait mode and vice versa when testing on my Samsung Galaxy. However, working properly on iphone n HTC Desire. I did find in some forums that described that as Android bug and someone used setTimeOut to tackle it. But I can't solve the problem using that. Not sure if it's my syntax error or not. Can someone kindly enlighten me? Thanks in advance.
Sample code will be much appreciated.
Here is my current code:
$(document).ready(function() {
$(window).bind("orientationchange", function (event) {
setTimeout(detectOri(event),100);
});
function detectOri(event)
{
alert(event.orientation);
if(event.orientation == 'portrait')
{
//load portrait mode page
}
else if(event.orientation == 'landscape')
{
//load landscape mode page
}
}
});

you shouldn't be using DOM ready
use pageinit

change setTimeout(detectOri(event),100); for this:
setTimeout(detectOri,1000);