Tuning your apps and games for long screen devices

Posted by Fred Chung, Developer Advocate

In recent months, there's a growing trend for handset makers to ship new devices with long screen aspect ratio (stretching beyond 16:9), many of which also sport rounded corners. This attests to the Android ecosystem's breadth and choice. Pixel 2 XL and Huawei Mate 10 Pro are just two of many examples. These screen characteristics could bring a very immersive experience to users and they take notice of apps and games that don't take advantage of the long aspect ratio screen on these new devices. Therefore it is important for developers to optimize for these screen designs. Let's have a look at related support provided by the Android OS.

Optimize for long aspect ratio screens

Most apps using standard UI widgets will likely work out-of-the-box on these devices. Android documentation details techniques for flexibly working on multiple screen sizes. However, some games and apps with custom UIs may run into issues due to incorrect assumptions on certain aspect ratios. We're sharing a few typical issues faced by developers, so you can pay attention to those relevant to you:

• Certain sides of the screen are cropped. This makes any graphic or UI elements in the affected regions look incomplete.
• Touch targets are offset from UI elements (e.g. buttons). Users may be confused on UI elements that are seemingly interactive.
• For full screen mode on rounded corners devices, any UI elements very close to the corners may be outside of the curved corner viewable area. Imagine if a commerce app's "Purchase" button was partially obstructed? We recommend referencing Material Design guidelines by leaving 16dp side margins in layouts.

If responsive UI is really not suitable for your situation, as a last resort declare an explicit maximum supported aspect ratio as follows. On devices with a wider aspect ratio, the app will be shown in a compatibility mode padded with letterbox. Keep in mind that certain device models provide an override for users to force the app into full-screen compatibility mode, so be sure to test under these scenarios too!

Targets API level 26 or higher: Use android:maxAspectRatio attributes.

Targets API level 25 or lower: Use android.max_aspect meta-data. Note that maximum aspect ratio values will be respected only if your activities don't support resizableActivity. See documentation for detail.

System letterboxes an app when the declared maximum aspect ratio is smaller than the device's screen.

Consider using side-by-side activities

Long aspect ratio devices enable even more multi-window use cases that could increase user productivity. Beginning in Android 7.0, the platform offers a standard way for developers to implement multi-window on supported devices as well as perform data drag and drop between activities. Refer to documentation for details.

Testing is crucial. If you don't have access to one of these long screen devices, be sure to test on the emulator with adequate screen size and resolution hardware properties, which are explained in the emulator documentation.

We know you want to delight your users with long screen devices. With a few steps, you can ensure your apps and games taking full advantage of these devices!