# Apk design looks way off than in the web preview

**URL:** <https://community.thunkable.com/t/apk-design-looks-way-off-than-in-the-web-preview/2999878>\
**Category:** Questions about Thunkable X\
**Created:** [May 13, 2024, 9:47am UTC](https://community.thunkable.com/t/apk-design-looks-way-off-than-in-the-web-preview/2999878 "2024-05-13T09:47:15Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![anxirileyrhsuqv](https://avatars.discourse-cdn.com/v4/letter/a/71e660/32.png) [@anxirileyrhsuqv](https://community.thunkable.com/u/anxirileyrhsuqv)\
**Post date:** [May 13, 2024, 9:47am UTC](https://community.thunkable.com/t/apk-design-looks-way-off-than-in-the-web-preview/2999878/1 "2024-05-13T09:47:15Z")

</div>

i downloaded the apk for my app, and i noticed there are a lot of things wrong with it. all of the buttons and label components have shadows under them, even though all of the shadows are set to transparent in thunkable, some pages don’t have a background image, even though all of them have a background image in thunkable, and the positioning for nearly everything is extremely off.

the main issue could be that i’m using an emulator to view the app (as i don’t have an android phone myself), but i’m really worried about how this will look on an actual android phone…

web preview:

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/d/e/de0a572d83ee3cba7e40156658896afaaff19d02.png)  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/c/1/c1705ad3738a6bed05d7bf402fe9f9743061456b.png)  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/e/e/ee39bdd5a513f5620b3d5ad8db94e9dcdd3c8941.png)

apk:

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/9/e/9e11378b12d118c6a397faa2f21dd6d82f551bfe.png)  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/a/e/aecf53dfbdbbd5f18e6c0d28e9e0a07ef75db855.png)  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/b/b/bb7662bbcfd9083567411fe5afd0d1c66347e76e.png)

and these are obviously not all of the pages, but i’m really worried about how the app will look once we can finally publish it to our school :[ i know that the downloaded app will not look exactly like the web preview, but i was hoping that i could at least fix the shadows/positioning issue.

---

<div class="post-metadata">

**Author:** ![anxirileyrhsuqv](https://avatars.discourse-cdn.com/v4/letter/a/71e660/32.png) [@anxirileyrhsuqv](https://community.thunkable.com/u/anxirileyrhsuqv)\
**Post date:** [May 14, 2024, 9:38am UTC](https://community.thunkable.com/t/apk-design-looks-way-off-than-in-the-web-preview/2999878/2 "2024-05-14T09:38:02Z")

</div>

anything to solve on this?

---

<div class="post-metadata">

**Author:** ![matt\_conroy](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/matt_conroy/32/150843_2.png) [@matt\_conroy](https://community.thunkable.com/u/matt_conroy)\
**Post date:** [May 14, 2024, 3:01pm UTC](https://community.thunkable.com/t/apk-design-looks-way-off-than-in-the-web-preview/2999878/3 "2024-05-14T15:01:22Z")

</div>

Hi @anxirileyrhsuqv, thanks for your patience.

Components in Thunkable by default should scale to the device screen size. Components by default in the resize properties section are set to [stretch](https://docs.thunkable.com/app-design/ui-components/basic-components/layout#layout). It is not required to calculate the screen size of the device and resize components, but you can. Layout and screen size in combination might currently work on some devices and not others.

If you’re not already trying it, our Layout component allows for more precise positioning of UI components on an app screen, by allowing you to position UI components dependent on other UI components on the screen. You can check our docs about Layouts here:

> **[Layout Component | Drag and Drop | Thunkable Docs](https://docs.thunkable.com/app-design/ui-components/basic-components/layout)**

For the shadows, can you show us the properties of the shadow for the component(s) where they are not looking as you want?  
 ![Screenshot 2024-05-14 at 11.00.55 AM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/1/5/158d3348ee21696686ed2d3fc8965d9667e48174.png)

---

<div class="post-metadata">

**Author:** ![anxirileyrhsuqv](https://avatars.discourse-cdn.com/v4/letter/a/71e660/32.png) [@anxirileyrhsuqv](https://community.thunkable.com/u/anxirileyrhsuqv)\
**Post date:** [May 14, 2024, 6:56pm UTC](https://community.thunkable.com/t/apk-design-looks-way-off-than-in-the-web-preview/2999878/4 "2024-05-14T18:56:38Z")

</div>

all of the components on each screen are set to “stretch”, so i hope it doesn’t create too many issues there.

i am currently putting all of the components in a layout component. i have noticed that the only labels throughout the app that do not have shadows are labels in a layout component.

these are the shadow properties of all of the labels (not in a layout component) throughout the app:

 ![Screenshot 2024-05-14 at 2.56.19 PM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/8/a/8a5f2f8e4259f568409e4a9e546315f99e195bb4.png)

---

<div class="post-metadata">

**Author:** ![tiny\_apps](https://avatars.discourse-cdn.com/v4/letter/t/3d9bf3/32.png) [@tiny\_apps](https://community.thunkable.com/u/tiny_apps)\
**Post date:** [May 14, 2024, 7:08pm UTC](https://community.thunkable.com/t/apk-design-looks-way-off-than-in-the-web-preview/2999878/5 "2024-05-14T19:08:34Z")

</div>

Have you used “raised” in buttons that will show Shadow…

---

<div class="post-metadata">

**Author:** ![anxirileyrhsuqv](https://avatars.discourse-cdn.com/v4/letter/a/71e660/32.png) [@anxirileyrhsuqv](https://community.thunkable.com/u/anxirileyrhsuqv)\
**Post date:** [May 14, 2024, 11:18pm UTC](https://community.thunkable.com/t/apk-design-looks-way-off-than-in-the-web-preview/2999878/6 "2024-05-14T23:18:49Z")

</div>

what is the “raised” option?

---

<div class="post-metadata">

**Author:** ![tiny\_apps](https://avatars.discourse-cdn.com/v4/letter/t/3d9bf3/32.png) [@tiny\_apps](https://community.thunkable.com/u/tiny_apps)\
**Post date:** [May 14, 2024, 11:46pm UTC](https://community.thunkable.com/t/apk-design-looks-way-off-than-in-the-web-preview/2999878/7 "2024-05-14T23:46:33Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![anxirileyrhsuqv](https://avatars.discourse-cdn.com/v4/letter/a/71e660/32.png) [@anxirileyrhsuqv](https://community.thunkable.com/u/anxirileyrhsuqv)\
**Post date:** [May 16, 2024, 9:39am UTC](https://community.thunkable.com/t/apk-design-looks-way-off-than-in-the-web-preview/2999878/8 "2024-05-16T09:39:06Z")

</div>

i’m not understanding what this will do. i feel like the buttons will be given a shadow, but i don’t want a shadow on anything.

---

<div class="post-metadata">

**Author:** ![anxirileyrhsuqv](https://avatars.discourse-cdn.com/v4/letter/a/71e660/32.png) [@anxirileyrhsuqv](https://community.thunkable.com/u/anxirileyrhsuqv)\
**Post date:** [May 17, 2024, 3:24pm UTC](https://community.thunkable.com/t/apk-design-looks-way-off-than-in-the-web-preview/2999878/9 "2024-05-17T15:24:12Z")

</div>

anything else i can do?

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/f/0f59f292712368bce16ff80133ae10de8a6f27e8.png) [@system](https://community.thunkable.com/u/system)\
**Post date:** [August 15, 2024, 3:25pm UTC](https://community.thunkable.com/t/apk-design-looks-way-off-than-in-the-web-preview/2999878/10 "2024-08-15T15:25:09Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.
