Apk design looks way off than in the web preview

[anxirileyrhsuqv]

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:

apk:

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.

[anxirileyrhsuqv]

anything to solve on this?

[matt_conroy]

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. 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

For the shadows, can you show us the properties of the shadow for the component(s) where they are not looking as you want?

[anxirileyrhsuqv]

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:

[tiny_apps]

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

[anxirileyrhsuqv]

what is the “raised” option?

[tiny_apps]

[anxirileyrhsuqv]

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.

[anxirileyrhsuqv]

anything else i can do?