- \n
- \n There is one camera, which can behave as either front-facing or rear-facing depending on how the device is folded. Tapping the \u201cswap cameras\u201d button will change how the image is mirrored to correctly render \u201cselfies\u201d.\n <\/li>\n
- \n There are two screens, so your camera app might be running at the same time as another app. Because the two apps might have different orientation requirements, your camera view might be rotated and letterboxed by the operating system. \n <\/li>\n<\/ul>\n
\n In this post, we will review some dual-screen-specific camera behaviors and present some different options for enhancing camera capture in your apps to work even better on the Surface Duo. The complete source code<\/a> is available for a Camera sample app, shown here:\n<\/p>\n
![\"Surface](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/10\/camera-sample-rose-portrait-500.png\")
<\/a>Working with portrait orientation lock<\/h2>\n
\n Many camera apps lock orientation \u2013 especially social media apps, which often lock the orientation to portrait mode. When your app is running on a single screen and is portrait locked, users will typically have the same experience as any other Android device.\n<\/p>\n
\n There is one new scenario for orientation-locked apps on the Surface Duo \u2013 remaining readable when the device is rotated. For example, when an app is portrait-locked, on a single screen, and the device is in double-landscape mode, the other screen will likely have a landscape-oriented app (or launcher) showing. Orientation may be locked by an entry in the AndroidManifest.xml<\/strong> file:\n<\/p>\n
android:screenOrientation=\"portrait\"<\/pre>\n
\n or in code:\n<\/p>\n
\r\nsetRequestedOrientation(Configuration.ORIENTATION_PORTRAIT); \/\/ Java\r\n<\/pre>\n
\n or\n<\/p>\n
requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_PORTRAIT \/\/ Kotlin<\/pre>\n
\n For the orientation-locked app to remain in portrait mode, Surface Duo keeps the app\u2019s orientation and creates a \u201cletterbox effect\u201d to preserve the correct aspect ratio.\n<\/p>\n
\n This is a new situation for many apps, and because the app is now oriented differently to the device, the camera view will be rotated. As a developer, you may want to tweak your code for a better dual-screen experience. There are a few options to consider:\n<\/p>\n
- \n
- \n Detect the letterboxed state, show a message to the user asking them to rotate or flip the device for a better experience.\n<\/li>\n
- \n Detect the letterboxed state and rotate the camera feed to match the device posture.\n<\/li>\n
- \n Remove the portrait orientation lock. This would allow the app to rotate freely, but if your UX depends on the portrait orientation, it might not be an option for you. \n<\/li>\n<\/ol>\n
\n The sample app includes code for each of these options, explained in more detail below.\n<\/p>\n
1. Show a message. <\/h3>\n
\n To recognize when an orientation-locked app has been \u201cletterboxed\u201d, we have created a helper class PortraitLockHelper<\/strong><\/a>. This is configured in the activity\u2019s OnCreate<\/strong> method by wiring up a listener and checking for a letterboxed state being detected:\n<\/p>\n
portraitHelper = new PortraitLockHelper(this);\r\nportraitHelper.StateListener = new PortraitLockHelper.PortraitStateListener() {\r\n @Override\r\n public void PortraitStateChanged(int state) {\r\n\/\/...\r\n if((state & PortraitLockHelper.PORTRAIT_STATE_LETTERBOXED_90) > 0 ){\r\n if(showRotationMessage){\r\n rotationMessageView.setVisibility(View.VISIBLE);\r\n }\r\n\/\/...\r\n }\r\n}<\/pre>\n\n In the Camera sample<\/a> we use this information to show a message advising the user to rotate the device. This is the simplest solution that preserves the app\u2019s portrait-locked behavior without requiring any other significant code changes.\n<\/p>\n
2. Rotate the camera feed<\/h3>\n
\n If you\u2019re interested in better supporting the \u201cletterboxed\u201d state by correcting the orientation of the camera feed, you\u2019d use the same PortraitLockHelper<\/strong> class to recognize that the app has been \u201cletterboxed\u201d. However, instead of showing a message to the user, rotate the camera data stream so it matches the app\u2019s perceived orientation.\n<\/p>\n
\n For this to happen, you need to make sure you use a TextureView<\/a> and not a SurfaceView<\/a> as your preview area. \n<\/p>\n