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. href="https://developer.android.google.cn/guide/practices/screens_support.html">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 href="https://material.io/guidelines/layout/metrics-keylines.html#metrics-keylines-keylines-spacing">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 href="https://developer.android.google.cn/guide/practices/screens_support.html#MaxAspectRatio">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 href="https://developer.android.com/guide/topics/ui/multi-window.html#configuring">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 href="https://developer.android.com/studio/run/managing-avds.html#hpproperties">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!