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"

Best Practices for organizing different code for phone and tablet

I'm adapting an existing phone application for tablets. The problem is that there are some small differences in the UI between the phone and the tablet.
For example, on the phone, there is a landing page and then a login page with a cancel button that goes back too the landing page.
On the tablet, the login fragment is on the landing page and the cancel button is removed. This means that I've made a check to see if the device is a tablet and if it is, I dunno find the view of the cancel button.
This seems hacky to me and i was wondering if there was a better way to do this. Thanks.

Tablet or phone ?
First of all you should know on which device you are. An elegant way (in my opinion) is to declare a resource in config.xml :
values/config.xml
<bool name="isTablet">false</bool>
values-sw600dp/config.xml
<bool name="isTablet">true</bool>
Then extends Application and keep the type of device running the app :
public static boolean IS_TABLET = false;
public void onCreate() {
super.onCreate();
MyApp.IS_TABLET = getResources().getBoolean(R.bool.isTablet);
}
Handling differents view
To handle differents view use the differents folders in /res
/layout for phone view
/layout-sw600dp for 7" tablet (you can just use this folder if there is no difference between 7 et 10")
/layout-sw720dp for 10" tablet
Handling code
Two solutions here :
1- The change between views are minor : keep the same activity/fragment and add some condition like
if(MyAPP.IS_TABLET) {
// DO something on tablet
} else {
// Do something on phone
}
2- If tablet and phone are very different create a new activity/fragment with a suffixe like :
HomeActvity => HomeActivityTablet
And add a condition on the loading of this particular view.
You can also works with differents namespace , depending on what give you best architecture.
Exemple
Have a look on the Google IO app's source code

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

iOS/Android Phonegap - portrait for smartphones, landscape on tablets

I'm creating a multidevice multiplatform app with Phonegap.
Basically, I have two scenarios:
Smartphones should be locked to portrait mode.
Tablets should be locked to landscape mode.
I should be able to customize the layout and placement with media queries, depending if the device is a tablet or smartphone (landscape or portrait, respectively).
I've experimented with locking to portrait regardless of device, and then using CSS media queries and rotate transformations, but I run with two problems:
I haven't been able to find a media query that targets tablets and excludes smartphones and viceversa, the universe of resolutions seems to be too sparse.
Working with body{transform:rotate(90deg)} looks like a nightmare to nail everything down.
I also looked into: https://github.com/champierre/pg-plugin-screen-orientation but it seems to be working only for Android and I need to support both iOS and Android.
Does anyone have any experience with this particular scenario? Any suggestions on handling this orientation problem?

you can use navigator.userAgent to get the device type. For Example something like this:
var deviceType = (navigator.userAgent.match(/iPad/i)) == "iPad" ? "iPad" : (navigator.userAgent.match(/iPhone/i)) == "iPhone" ? "iPhone" : (navigator.userAgent.match(/Android/i)) == "Android" ? "Android" : (navigator.userAgent.match(/BlackBerry/i)) == "BlackBerry" ? "BlackBerry" : "null";
alert(navigator.userAgent);
Or you can use the guide in this page...
After that you can use the following code to set the orientation:
$(window).bind('orientationchange', function(event){
if (/*is tablet*/) {
navigator.screenOrientation.set('landscape');
}
else if (/* is smart phone */) {
navigator.screenOrientation.set('portrait');
}
});
I hope that above codes be helpful for you ;)

How to change the screen orientation during automated testing?

I am testing my Android application using ActivityInstrumentationTestCase2, and I need to test that the screen orientation change works correctly. However, I cannot find any way to cause an orientation to occur. What am I missing?

Check this example where I tried extending Android ActivityInstrumentationTestsCase2 to use different screen orientations: iliasbartolini / AgileDayConferenceApp
Basically you need to change the Resources configuration. I found this example here: Tip for unit-testing: loading Resources for a specific screen orientation/
Resources res = getInstrumentation().getTargetContext().getResources();
Configuration oldResourcesConfiguration = res.getConfiguration();
Configuration newConfiguration = new Configuration(oldResourcesConfiguration);
newConfiguration.orientation = configurationOrientation;
res.updateConfiguration(newConfiguration, res.getDisplayMetrics());
Here is a dummy Landscape test example on how to use it.
It actually only checks that the Landscape layout and resources loaded by the activity are not broken: don't know if there are better ways to do it.
And here the Portrait test