Roon's interface should look great on most common Android devices, but because of the wide variety of Android devices and manufacturers in the world, there's a chance you may run in to a few display anomalies, such as:
- Your tablet is displaying the phone UI
- Roon doesn't look right on your high resolution phone
Anomalies like this can be explained by understanding the two factors that affect the way Roon is displayed on your Android device:resolution and screen density (DPI)
The total number of physical pixels on a screen. When adding support for multiple screens, applications do not work directly with resolution; applications should be concerned only with screen size and density, as specified by the generalized size and density groups.
And screen density:
The quantity of pixels within a physical area of the screen; usually referred to as dpi (dots per inch). For example, a "low" density screen has fewer pixels within a given physical area, compared to a "normal" or "high" density screen. For simplicity, Android groups all actual screen densities into six generalized densities: low, medium, high, extra-high, extra-extra-high, and extra-extra-extra-high.
How do resolution and screen density affect the way Roon is displayed?
Let's take for example a Lenovo Yoga 10" tablet. You should be able to run at 160 DPI and take full advantage of its 1280x800 resolution. But Lenovo ships the device at 213 DPI and suddenly the "virtual resolution" is much smaller than 1280x800, and Roon will get stuck displaying the phone UI. Compare that to a modern phone which has considerably larger resolution (1440 x 2560 is common) than the 10 inch Yoga tablet, but is under 6 inches. In the case of that phone, looking at pure resolution, if you were to use a 1:1 DPI the elements would be so small that they would be impossible to use.
This is why you must take into account DPI when working with Android. In fact, everything in Android works with units called "dp": A virtual pixel unit that you should use when defining UI layout, to express layout dimensions or position in a density-independent way.
The density-independent pixel is equivalent to one physical pixel on a 160 dpi screen, which is the baseline density assumed by the system for a "medium" density screen. At runtime, the system transparently handles any scaling of the dp units, as necessary, based on the actual density of the screen in use.
The conversion of dp units to screen pixels is simple: px = dp * (dpi / 160). For example, on a 240 dpi screen, 1 dp equals 1.5 physical pixels. You should always use dp units when defining your application's UI, to ensure proper display of your UI on screens with different densities.
With respect to the 10" Lenova Yoga tablet, Lenovo decided that even through the screen is 1280x800, they want everything to be bigger, so they picked a DPI of 213 instead of the pixel accurate 160 DPI (where 1dp == 1px, see "dp" above).
Why did Lenovo do this? Maybe they felt that people with bad eyes were buying that tablet and they needed bigger elements in the UI, maybe they just felt that a 213 DPI looked better, at the end of the day the DPI the device reports out of the box is up to the manufacturer.
My Android device isn't displaying Roon correctly, how do I fix it?
If you think Roon is not displaying correctly on your Android device, we suggest changing the DPI. There's an easy way to do that, just follow the instructions
here. If you're continuing to have trouble,
grab your display metrics, and send a screenshot of the results
to our support team.