Online Android and IPhone Application builder in English

Your profile
Log out
Online Android and IPhone Application builder in English
Online Android and IPhone Application builder in French
Online Android and IPhone Application builder in Chinese
Online Android and IPhone Application builder in Danish
Online Android and IPhone Application builder in Swedish
Make me Droid

Custom layout guide
Custom layout screen lets you position various items (the controls) the way you want on the screen.

Doing this kind of layout is not difficult, but some useful concepts are explained to you below to have a good start.
Custom layout concepts
Mobile devices have various sizes (and resolutions). Layout then has to adapt to this constraint. This is why the main concept for doing the layout of your custom screens consists in stacking items, horizontally and vertically. You do not position items at an accurate position of the screen.

Stacked items automatically adjust their size according to their content, but also depending on the available space for them (space is limited to the width/height of a screen, so you will never be able -for example- to stack 20 buttons horizontally next to each other because there is not enough space).

Some controls used during screen layout are called containers. This means that they are able to contain other items. For example, the vertical container lets you vertically stack multiple items, one after the other. This vertical container has no graphical representation, it is only used to manage layout of other items on screen. Then, you can combine multiple containers, vertical, horizontal, with scroller, in order to achieve the expected layout.
Control properties
Every control has properties, which are actually values that you can edit to change control's color, size, position, alignment...

To view control properties, simply click on it. Its properties appear on the side of the designer. Most of the properties are quite explicit, and changing them often has a visual result on screen.
Adding, removing and moving controls
When you start editing a custom layout screen, the screen is empty. You have to add a first container. Usually, adding a vertical scroller is a good way to start, in order to be able to stack other items vertically, while being able to scroll the screen down in case it's higher than screen height.

To add a new item on the screen, first select the container in which you want to add something. In case you are starting from an empty screen, click in the central area. Custom layout properties then appear. Click on the button, and a list of controls will appear. Select the control you want to add, and it will be integrated to your current layout.

To delete an item, select it, and click on the button in its properties.

To clone an item, first select it on the screen, then click on the button in its properties to copy it (similar to a basic copy/paste). Next, select a container in which you want to paste the item, and click on in its properties.

To move an item, click on it and keep it pressed, then move it where you want. Items on the screen will automatically reorganize. Release the mouse button when your item is at the expected place.
Layout example
Here is a detailed example on how to get the following layout, that will adapt to every screen size:
  • Create a custom layout screen.
  • Click on the center of the screen to display Free layout properties.
  • Add a vertical scroller.
  • Select the vertical scroller and add a horizontal container into it.
  • Select the horizontal container, and in its properties, set its width to 100%.
  • Then add a picture control in it. Select the picture control, and choose a source picture for it. Activate the button to force picture to not expand to the whole space available on screen. Define picture width to 20%. That will allow your picture to always have the same size, no matter what the size of the source picture you have chosen on your computer is.
  • Select the horizontal container again, then add a vertical container (not a scroller) into it.
  • Select the horizontal container again and add a button into it. Activate the button in button properties.
  • Select the vertical container then add 2 text controls into it. Edit properties of the first text control to increase its text size, and to get a white color. For every text control, edit its position to in order to make it left aligned within its container.

Your first page layout is over, now try it on the phone / simulator!