![](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/03\/word-image-4.png\")
<\/p>\n
Figure 1: Steps to bring your app to Microsoft Surface Duo 1: Steps to bring your app to Microsoft Surface Duo<\/p>\n
This week\u2019s blogpost will share details for Step 3 \u2013 How to embrace new Dual Screen features on Surface Duo.<\/p>\n
There are multiple ways to take advantage of the dual screens:<\/p>\n
- \n
- Access the dual screen APIs directly<\/li>\n
- Helper libraries<\/li>\n
- Screen manager<\/li>\n
- Dedicated layouts & controls we’ll provide<\/li>\n<\/ul>\n
This blog post covers how to access the dual screen APIs in your layout code.<\/p>\n
![](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/03\/word-image-5.png\")
<\/p>\nFigure 2: Dual Screen APIs layers<\/p>\n
Microsoft Dual Screen APIs:<\/h2>\n
Display Mask<\/h2>\n
The most useful API is the DisplayMask<\/a>, which gives you a RECT<\/a> with coordinates for the location of the<\/p>\n
Use this API to understand if your app and layouts intersects with the mask, and re-positions controls and assets based on their relevant position.<\/p>\n
Remember, you can also position controls differently if you\u2019re running on the left screen vs the right screen.<\/p>\n
The values you\u2019ll get differ based on the device rotation<\/a><\/p>\n
![\"A](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/03\/a-screenshot-of-a-social-media-post-description-a.jpeg\")
Figure 3: The Display Mask locationThe Display Mask location<\/p>\nSee this sample code:<\/p>\n
DisplayMask displayMask = DisplayMask.fromResourcesRect(context);\r\n\r\nInt rotation;\r\n\r\nList<Rect> masks = displayMask.getBoundingRectsForRotation(rotation);\r\nRect mask = new Rect();\r\nif(!masks.isEmpty()) {\r\n mask = masks.get(0);\r\n}<\/pre>\n<\/p>\n
Hinge Angle<\/h2>\n
You can also measure and act on the hinge angle between the two screens. We’ve added the hinge angle as a native sensor<\/a>, so you can add a listener to retrieve the value as the screens move.<\/p>\n
The range of motion is 0-360 degrees, which affects the screen display as shown in the diagram below:<\/p>\n
![](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2020\/03\/word-image-6.png\")
<\/p>\nFigure 4: The Hinge Sensor<\/p>\n
Adding this code to read the sensor values:<\/p>\n
private static final String HINGE_ANGLE_SENSOR_NAME = \"Hinge Angle Non-Wakeup\";\r\n\r\nprivate SensorManager mSensorManager;\r\n\r\nprivate Sensor mHingeAngleSensor;\r\n\r\nprivate SensorEventListener mSensorListener;\r\n\r\nprivate void setupSensors() {\r\n\r\n mSensorManager = (SensorManager) getSystemService(SENSOR_SERVICE);\r\n List<Sensor> sensorList = mSensorManager.getSensorList(Sensor.TYPE_ALL);\r\n for (Sensor sensor : sensorList) {\r\n if (sensor.getName().contains(HINGE_ANGLE_SENSOR_NAME)) {\r\n mHingeAngleSensor = sensor;\r\n }\r\n }\r\n mSensorListener = new SensorEventListener() {\r\n @Override public void onSensorChanged(final SensorEvent event) {\r\n if (event.sensor == mHingeAngleSensor) {\r\n int angle = (int) event.values[0];\r\n }\r\n }\r\n @Override public void onAccuracyChanged(Sensor sensor, int accuracy) {\r\n \/\/TODO\r\n }\r\n };\r\n}\r\n\r\n@Override protected void onPause() {\r\n super.onPause();\r\n if(mHingeAngleSensor !=null) {\r\n mSensorManager.unregisterListener(mSensorListener,mHingeAngleSensor);\r\n }\r\n}\r\n\r\n@Override protected void onResume() {\r\n super.onResume();\r\n if(mHingeAngleSensor !=null) {\r\n mSensorManager.registerListener(mSensorListener, mHingeAngleSensor, SensorManager.SENSOR_DELAY_NORMAL);\r\n }\r\n}<\/pre>\n<\/p>\n
Duo Device Capability<\/h2>\n
We know there’ll be times you want to build something special for Surface Duo devices, so we’ve made it easy to check at run-time with a device capability flag<\/a>.<\/p>\n
Use the code below to detect Surface Duo devices, so it’s easier to maintain one codebase for all device configurations:<\/p>\n
Add this code snippet to your code:<\/p>\n
private boolean isDualScreenDevice(){\r\nString feature = \"com.microsoft.device.display.displaymask\";\r\nPackageManager pm = this.getPackageManager();\r\n\r\n if (pm.hasSystemFeature(feature)) {\r\n Log.i(TAG, \"System has feature: \" + feature);\r\n return true;\r\n } else {\r\n Log.w(TAG, \"System missing feature: \" + feature);\r\n return false;\r\n }\r\n}<\/pre>\n<\/p>\n
*Note: You can also query the device name, but it will hard code the app to the Duo device, so not ideal<\/span><\/p>\n
Summary:<\/h2>\n
See these APIs in action in our Sample GIT repos, we got your covered in Java Samples<\/a>, Kotlin samples<\/a> in and C# Xamarin Samples<\/a>, all hosted in GitHub.<\/p>\n
Let us know how you are planning to use these APIs and how we can make it easier on you.<\/p>\n
And make sure to read our next week blog that will cover our helper functions and a new Dual Screen Layout Control that will speed up your development.<\/p>\n
Feedback<\/h2>\n
We would LOVE to hear from you about your experiences using the SDK, emulator, and your first thoughts on how you can utilize these in YOUR app.<\/p>\n
Please reach out using our feedback forum<\/a> or direct message me on Twitter<\/a> or GitHub<\/a>.<\/p>\n