ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

New WINDEV Mobile 2024 feature!
Help / WINDEV Mobile Tutorial / Tutorial - My first Android/iOS application
  • Lesson 3 - Adapting the UI using anchors
  • Adapting the interface
  • Device selection
  • Window orientation
  • Practical example
  • Testing the orientation in the simulator
  • Using anchors
  • To sum up

My first Android/iOS application

Lesson 3 - Adapting the UI using anchors
We will cover the following topics:
  • Adapting the interface:
    • Choosing a screen resolution depending on the device.
    • Window orientation.
  • Using anchors.
Durée de la leçon 30 min
Adapting the interface
WINDEV Mobile allows you to easily create interfaces that adapt to the device used:
  • For Android, applications can be used both on phones and tablets.
  • For iOS, applications can be used on phones (iPhone) and tablets (iPad).
These interfaces can also be adapted to the orientation of the device (portrait or landscape).

Device selection

When you create the project, you can specify the type of device on which the application will run: phone and/or tablet.
There are several cases:
  • You are using a single target device: in this case, simply create a specific iOS or Android project for the target device (phone or tablet). You will be able to select the desired target device in the project creation wizard. The window creation wizard will propose windows for this device only.
  • You don't know the target device: in this case, select "Generate an application for phones and tablets" in the project creation wizard. When creating the windows, you can:
    • develop your windows for phones. The content will adapt to tablets thanks to the anchors set on the controls in the window (recommended).
    • use layouts to create different interfaces depending on the runtime platform and its resolution.

Window orientation

In Android or iOS, windows can have one of the following orientations:
  • Free: the window follows the orientation of the device,
  • Locked in portrait mode,
  • Locked in landscape mode.
For a window that stays in portrait or landscape mode (rare case), there are no specific actions required.
For a free window, the layout and size of the controls must adapt to the orientation. It is recommended to use anchors to get the desired result.
Practical example
Let's use the example we developed in the previous lessons.
In this example, the project was created for a phone and was tested in portrait mode in the simulator.
We will test it in landscape mode in the simulator.

Testing the orientation in the simulator

Test the project in the simulator:
  1. Select the Android or iOS configuration (the images in this lesson were taken in an Android configuration).
  2. In the quick access button area, expand "GO" if necessary and select "Test in the simulator Debug on XXX simulator".
    Test in the simulator

    By default, the project test on a mobile device is available in the quick access buttons. After selecting "Debug on simulator Debug on simulator" for the first time, the corresponding icon (Debug on simulator) will automatically appear in the quick access buttons.
  3. If necessary, validate the window that appears.
  4. The window is displayed in portrait mode.
  5. The simulator shows an icon-based menu: Simulator menu.
  6. Change the window orientation with the Rotate icon (Change window orientation).
  7. The window orientation changes on the screen.
    Window in portrait mode
    Window in landscape mode
In our example, the button location does not change: it doesn't adapt to the screen orientation.
Stop the test and go back to the editor.

Using anchors

We will make changes to our window to center the "Display" Button control and keep it centered regardless of the device orientation.
To center the Button control in the window:
  1. Select the control (click on the Button control).
  2. On the "Alignment" tab, in the "Centering and distribution" group, click "Center in the parent (Horz.)".
To keep the Button control centered in the window, we will set anchors:
  1. Select the control if necessary.
  2. Right-click to open the context menu.
  3. Select "Anchor": the anchor selection window appears:
    Anchors
  4. Select "Horizontally centered" and validate ("OK" button).
    In the window displayed in the editor, you will notice the little red arrows in the control. These arrows indicate that the control is anchored.
Test the project in the simulator (click Test project in the quick access buttons):
  • The button is centered in portrait mode.
  • Change the orientation of the simulator.
  • The button remains centered in landscape mode.
Close the simulator.
To sum up
In this tutorial, we discovered how to:
  • create a project, a window and a control.
  • write WLanguage code.
  • test a window.
  • adapt the interface to the orientation using anchors.
To learn how to create and develop an application with a database, see Developing a management application for mobile devices.
Completed project:
If you want to check the end result of the steps described here, you can open a completed version of the project. This project contains the window we created in this lesson. To open the completed project, go to the home page and click "Tutorial", then in "Tutorial - My first Android/iOS application", double-click "My Android/iOS project - Answers".
Previous LessonTable of contents
Minimum version required
  • Version 2024
Comments
Click [Add] to post a comment

Last update: 12/04/2023

Send a report | Local help