androiddelphifiremonkey

Components randomly resize and move when I run my app on Android

I inherited an FMX Android project from a coworker. My job is to redesign the forms. I haven't worked on an Android app yet, but so far trying to lay out my forms has been frustrating. Everything looks perfect in the IDE, but when I run the app on my tablet, everything moves or resizes to crazy proportions.

For example, I want to have a Title bar on the top of every page in the app that tells the user which form they are viewing. So I:

  1. Place a panel on my form
  2. Set align to Top
  3. Set the height to 60
  4. Set anchors to top, left, and right
  5. Add a label to the panel with a page name
  6. Set the label's align property to Contents

In the IDE, it now looks perfect. I run the app and that top panel expands WAY down the page, covering up literally 75% of the screen. Instead of the height being 60px like I set it to, it's more like 700px now!

I've had many other instances where things were lined up nicely in the IDE but after running the app it seems like their positions jump all over the place.

What could be happening to cause this and how do I fix it?

Solution

  • When designing FMX user interface always make sure you are working with correct Design View selected.

    Then when your application is executed it tries to load the design view that is most suitable for your target device.

    Design View