Components don't follow the layout (Android)

Only the Android, layout doesn’t follow the expected design.
Height of components are resized and gap appeared with some components. (See icons and text combination.)
*No overlap components and iPhone build is working well.

On the preview screen on the Pixel4 (1,2).
Actual screen on the Pixel4 (3,4).

Nice interface!
Try an invisible rectangle snapped to the top of the screen, to push the list down a bit.
Likely you will have to live with a small but slightly bigger gap on devices that don’t have this issue. Unless you can hide the rectangle depending on device. Bit of a minefield with Android.

I have done the same things (using invisible rectangles) to make things look right at several places.

Try putting a rectangle at the back that is the size of the components you want to fix and then group then to the rectangle.

This should make sure it doesn’t more.

Hello, you can put a rectangle around these components at the back.

Thank you everyone, I tried your suggestions. But the issue didn’t solved.
If OK, please share its detail, like screenshots.

This issue fixed, I would share the cause of gaps and resize.

Cause: Font change
I selected “Noto sans JP” font, but I found this don’t work on android OS correctly.
Unexpected padding at the bottom of text appear with all text components, so layout was broken.
This issue is not able to find on Previewer.

Great that you found the issue! thanks for sharing.

1 Like