I’m currently facing a serious issue with the Preview mode in the new Adalo builder.
The problem is that Preview does not show or detect the same errors that appear after publishing the Android build to Google Play.
Because of this, many errors only become visible after the APK/AAB is uploaded and installed, which causes unexpected bugs for users and leads to significant delays in development and testing.
This issue makes it very difficult to rely on Preview for real testing, and I often have to rebuild and republish many times just to identify a bug that should normally appear in Preview.
Can you please look into this problem or provide guidance on how to ensure that the Preview reflects the real behavior of the published app?
Thank you for your help and support.
Best regards,
KhedmaDZ Developer
The app preview/staging preview option is not a real testing environment, it just simulates the app screens on web and you cannot guarantee that it will be the same when you publish the app because native Android or iOS have different settings which works in different ways. That’s where you need to do QA testing using an internal testing track for Google Play Store & TestFlight for Apple App Store before going into production/live. If you just use the app preview as the testing environment and just submit the app into the stores, users will face many issues.
Hi Dilon,
Thank you so much for the detailed explanation — it was really helpful!
I now understand why the preview environment is not enough for real testing.
Could you please guide me on the correct steps to properly test my app on the internal testing track (for Google Play) or TestFlight (for iOS)?
I want to make sure I follow the right process before publishing the app.
Thanks again for your support, and have a great day!
Hi Dilon, and thank you again for your previous explanation.
I want to clarify my issue because it seems there was a misunderstanding.
My problem is not related to testing tracks or publishing.
The issue is that the UI looks very different between Adalo Preview and the real Android app downloaded from Google Play.
In Adalo Preview, the images appear stretched, cropped, or resized incorrectly.
But in the actual Play Store app, the images display correctly.
This makes it difficult to design the screens because the Preview does not show the real final result.
I attached screenshots from both the Preview and the real app so you can clearly see the differences.
Could you please check this and let me know if this is expected behavior or if there is a way to make the Preview match the real app layout more accurately?
Hi Dilon,
I’ve attached screenshots comparing Adalo Preview and the real Android app.
The Preview looks correct, but in the Android build the icons aren’t centered and the search input text is misaligned.
This is just one of several UI-related issues I’m experiencing.
It seems you have the icon put into the rectangle. You may be facing an issue where the elements’ layout doesn’t match.
What might help:
I can see that your circles (rectangles) aren’t actually “circles” in the Android version. This might happen because you have width resizing enabled. Try to change it for the rectangle: left pane → layout → width resizing to “Fixed”. Doublecheck in the Setup → edit styles that width/height are correct.
when you align the icon itself, try to do it via “align to parent”: 3 dots on the left pane → align to parent → align horizontally and align vertically.
In general, for icons with background it is better to use Button element (without text).
Thank you very much for your detailed explanation and for taking the time to help me. I truly appreciate the information and tips you shared regarding layout, width resizing, and alignment.
I will apply these changes and test them on the Android version.
If possible, I would appreciate it if you could provide a bit more explanation or a simple step-by-step guide, especially about using the Button element for icons with background.
@osama.mb you just take a button, resize it so it’s rectangular, in button stule make button’s color transparent and icon&text color so it’s visible and delete the text. You can change icon/text size if you want the icon to be larger/smaller.
