Universal layout for Android/iOS

I tried searching for topics related to this but didn’t find much. If anyone has a link to something helpful, I’d appreciate it.

I published an iOS app and it looks great. But when I preview on an Android device, it’s all squished and some of the content is off of the screen. This is mostly a vertical issue; the width seems okay. Although everything is zoomed in/larger on the Android device.

I’m trying to use relative heights for most components so I just assumed it would fit okay.

Are there any best practices for designing layouts for both platforms?

Do people create two sets of graphics and then use the “platform is” block to switch between them?


1 Like

Here’s an example. I designed the app for iOS, specifically my iPhone 10 with resolution of 1125 x 2436.

Here’s the layout in Thunkable:

Here’s the live test in Thunkable Live on:

iPhone 10 (1125 x 2436) vs. Moto X4 (1080 x 1920)

I want both devices to look like the iPhone 10 screenshot.

1 Like

Do the buttons have an absolute size?

1 Like

Yes, they do. 120 x 120 pixels.

1 Like

How about setting their size as a proportion to the screen’s height? This will most probably mean that you will also need do do that with the font size. Tricky but doable.

1 Like

The buttons are images. It was too limiting to work with button text in Thunkable.

I’ll try changing their size property.

1 Like

Well, switching to proportional sizes sort of helped but now they are all tiny. Lol. I think I’m going to re-build this whole app as a drag-and-drop project because I spent a couple hours trying to find the right layout settings and gave up.

Curious to see if using the DnD GUI will make any difference.

Right off the bat, it works WAY better. It took me about 5 minutes in the drag-and-drop interface to do what I couldn’t in two hours in the legacy interface as far as button sizing and spacing is concerned.

I’m running into some other issues which I’m listing here.

So, can you please check the properties of the buttons (or images) you created to see which settings work and try to match them with settings in the legacy GUI and see if by applying them you get the same result?

That’s the thing… there are no layout settings in the drag-and-drop interface. I just added buttons, entered width/height values, gave them a background picture and then it just worked.

So the buttons you created in the DnD GUI don’t have width and height values?

Sorry, I should have explained. In the DnD interface, I added buttons, set their height and width to 80, and imported an image that had square dimensions. That’s all I did. Oh wait, I set their Resize Mode to contain.

1 Like

maybe u did responsive sizing in place of fixed?