Nativescript: Imprecise transformation to dpi on Android

Created on 29 Nov 2016 · 3Comments · Source: NativeScript/NativeScript

Please, provide the details below:

Did you verify this is a real problem by searching [Stack Overflow]

Yes, didn't find anything similar

Tell us about the problem

It seems that NativeScript is not consistent on transform px to dpi in Android. marginTop allocate views on different position according the device the app is running on. Please see GIF attached to see the problem.
android_resolution_issue

Everything is correctly shown on left device. The red views are precisely allocated below the line of reference. But on right device you can see red views are misallocated, having a gap between the reference line and where the view lyes down. The later the red view is pinned, the biggest the gap is.

Not sure which UI is wrong, either the line of references (height=40) or the red views, as far as I understand this issue, one of them is not being precisely transformed to dpi. I checked that the core view round up the margin top lp.topMargin = Math.round(params.topMargin * utils.layout.getDisplayDensity()); but even I tried without it round up, the issue is still there.

Which platform(s) does your issue occur on?

Only in Android. iOS work perfectly across different devices

Please provide the following version numbers that your issue occurs with:

CLI: 2.3.0
Cross-platform modules: 2.4.0

Please tell us how to recreate the issue in as much detail as possible.

This issue is part of a bigger app, so I just isolated the issue on a demo app. Demo app can be found here. To replicate it, just run demo app in two different Android devices. In GIF attached, I used Google Nexus 4 - 5.1.0 API 22 - 768x1280 320dpi (left device where it works well) and Google Nexus 7 - 5.1.0 800x1280, 213dpi (right device where it works wrongly. See the gaps below the line the view should be allocated)