# Universal layout for Android/iOS

**URL:** <https://community.thunkable.com/t/universal-layout-for-android-ios/1146809>\
**Category:** Questions about Thunkable X\
**Created:** [March 6, 2021, 12:32am UTC](https://community.thunkable.com/t/universal-layout-for-android-ios/1146809 "2021-03-06T00:32:30Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [March 6, 2021, 12:32am UTC](https://community.thunkable.com/t/universal-layout-for-android-ios/1146809/1 "2021-03-06T00:32:30Z")

</div>

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?

![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/4/0/40b0afaa6f73023a67ba5e8515fa8729dc03c761.png)

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [March 6, 2021, 5:01am UTC](https://community.thunkable.com/t/universal-layout-for-android-ios/1146809/2 "2021-03-06T05:01:33Z")

</div>

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:

 ![Screen Shot 2021-03-05 at 8.41.22 PM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/f/a/fa49083faded7c0e5eced0d05e3acbcebb672c33.jpeg)

Here’s the live test in Thunkable Live on:

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

 ![IMG_2779.PNG](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/c/c/cc44af69de575c83aa238f8105dc44e57f3876f3.jpeg) ![Screenshot_20210305-204058](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/b/f/bfda27daaf9d436244a32c47d2973b65b4a629f9.jpeg)

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

---

<div class="post-metadata">

**Author:** ![Deluxe](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/deluxe/32/30016_2.png) [@Deluxe](https://community.thunkable.com/u/Deluxe)\
**Post date:** [March 6, 2021, 7:35am UTC](https://community.thunkable.com/t/universal-layout-for-android-ios/1146809/3 "2021-03-06T07:35:26Z")

</div>

Do the buttons have an absolute size?

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [March 6, 2021, 8:36am UTC](https://community.thunkable.com/t/universal-layout-for-android-ios/1146809/4 "2021-03-06T08:36:55Z")

</div>

Yes, they do. 120 x 120 pixels.

---

<div class="post-metadata">

**Author:** ![Deluxe](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/deluxe/32/30016_2.png) [@Deluxe](https://community.thunkable.com/u/Deluxe)\
**Post date:** [March 6, 2021, 10:25am UTC](https://community.thunkable.com/t/universal-layout-for-android-ios/1146809/5 "2021-03-06T10:25:09Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [March 6, 2021, 6:13pm UTC](https://community.thunkable.com/t/universal-layout-for-android-ios/1146809/6 "2021-03-06T18:13:29Z")

</div>

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

I’ll try changing their size property.

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [March 7, 2021, 4:22pm UTC](https://community.thunkable.com/t/universal-layout-for-android-ios/1146809/7 "2021-03-07T16:22:09Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Deluxe](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/deluxe/32/30016_2.png) [@Deluxe](https://community.thunkable.com/u/Deluxe)\
**Post date:** [March 7, 2021, 4:35pm UTC](https://community.thunkable.com/t/universal-layout-for-android-ios/1146809/8 "2021-03-07T16:35:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [March 7, 2021, 5:05pm UTC](https://community.thunkable.com/t/universal-layout-for-android-ios/1146809/9 "2021-03-07T17:05:54Z")

</div>

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](https://community.thunkable.com/t/drag-and-drop-running-list-of-issues-and-bugs/1007063/6).

---

<div class="post-metadata">

**Author:** ![Deluxe](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/deluxe/32/30016_2.png) [@Deluxe](https://community.thunkable.com/u/Deluxe)\
**Post date:** [March 7, 2021, 5:41pm UTC](https://community.thunkable.com/t/universal-layout-for-android-ios/1146809/10 "2021-03-07T17:41:10Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [March 7, 2021, 5:42pm UTC](https://community.thunkable.com/t/universal-layout-for-android-ios/1146809/11 "2021-03-07T17:42:50Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Deluxe](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/deluxe/32/30016_2.png) [@Deluxe](https://community.thunkable.com/u/Deluxe)\
**Post date:** [March 7, 2021, 6:01pm UTC](https://community.thunkable.com/t/universal-layout-for-android-ios/1146809/12 "2021-03-07T18:01:13Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [March 7, 2021, 6:17pm UTC](https://community.thunkable.com/t/universal-layout-for-android-ios/1146809/13 "2021-03-07T18:17:14Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![eko.devs.apploroceo](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/eko.devs.apploroceo/32/93147_2.png) [@eko.devs.apploroceo](https://community.thunkable.com/u/eko.devs.apploroceo)\
**Post date:** [March 8, 2021, 3:32am UTC](https://community.thunkable.com/t/universal-layout-for-android-ios/1146809/14 "2021-03-08T03:32:15Z")

</div>

maybe u did responsive sizing in place of fixed?

---

<div class="post-metadata">

**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\
**Post date:** [November 8, 2024, 1:29pm UTC](https://community.thunkable.com/t/universal-layout-for-android-ios/1146809/15 "2024-11-08T13:29:01Z")

</div>


