I have a mobile app that I have prototyped using XD for Windows. I am having an issue where certain artboards look as expected when previewed in Windows, but when previewed using the Adobe XD for Android app the placement of objects on the page changes. My guess is that this has something to do with how XD adjusts for different screen resolutions and aspect ratios, and I'm hoping there is a way to insure that objects remain aligned.
My artboards are set to 2160x1080, so when I preview the app in Windows I see it in a 2:1 window. But my phone is a Samsung Galaxy S10+, which has a screen resolution of 3040x1440 (aspect ratio of 2.11:1). When I preview using the Android XD app, XD makes each page taller and wider, but has to increase height by 40.7% while width is only increased by 33.3%. I am guessing this is causing the problem. On some artboards, I have a tall vertical graphic item that sits to the left of a text box with multiple rows of text. The graphic items contains an icon that lines up with each row of text, so that each row of text has a single icon to the left. The text and graphic items are grouped together. Think of it like bulleted text, but the bullets are contained in a single PNG. When I preview in Windows, the app renders exactly how it looks on the artboard. But in Android, the graphic is too tall, so that the bullets get misaligned with the text rows and stretch further down the page than the text. I have played with the "Responsive Resize" settings to no avail.
Has anyone seen this before? More importantly, any suggestions for a solution or workaround? Thanks!