Artboard displaying differently in Windows and Android

[gurs2die4]

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!

[gurs2die4]

Well, I came up with a workaround, but it is pretty cumbersome, especially if you have to make changes down the road.  I thought I would post it in case someone else runs into this issue, but I am still hoping that someone comes up with a better solution (or at least a less intrusive workaround).

I copied the rows of text from Excel and pasted it into XD, which results in a graphic.  After playing around with the formatting in Excel, I got it to match what I needed in XD in terms of font size, column width, etc.  I then copied/pasted the text into MS Paint and saved it as a PNG file.  Then I created a rectangle in XD, sized it for the area where the text goes and positioned it.  Then I dragged the PNG file onto the rectangle, which creates a mask of that image.  Finally, I deleted the border from the rectangle and grouped it with the adjacent graphic of the icons.  Now that both the icons and the text are graphics, XD scales them both in the same way, so they look good on both Windows and Android emulators (haven't tried iOS).

Of course, that is a REALLY cumbersome process if I need to update the text, change column widths, etc.  But it is better than a failed live demo!

[HARSHIKA_VERMA]

Hi there,

Thank you for reaching out. We haven't seen anything like this before. It looks like you have created the artboard and when viewing it on the different android devices, the objects are showing misaligned. However, it shows fine in windows.

We'd like to know what is the size of the artboard that you've set for android devices? Also, we'd request you to please check out this video tutorial for responsive resize in XD: NEW! Responsive Resize In Adobe XD - YouTube and let us know if that helps.

Thanks,

Harshika

[gurs2die4]

Hi Harshika.  As I mentioned in my original post, my artboards are set to 2160x1080.  I checked out that video, but it didn't really help.  It seems like this is an issue with the way XD scales text elements versus graphic elements.