How to create a responsive design in FireMonkey

There are a multitude of mobile devices on the market. Every year, manufacturers add new ones, change screen resolutions, or increase the number of pixels in one direction and remove them in another. It's difficult to navigate this jungle when you want to target specific users.

Fortunately, there are sites like Devices Specifications that provide a list of devices on the market and their specifications, including the resolution and pixel size of the screens used.

The graphical features of FireMonkey visual components allow them to be rotated while remaining functional. They have an angle and a center of rotation.

FireMonkey visual components have opacity, which allows them to be made fully or partially transparent.

A scale factor can be applied to visual components in FireMonkey. This allows you to zoom in and out on them without affecting their “real” sizes.

Of course, they remain fully functional even when completely distorted.

Animations should be viewed in a broad sense: they involve changing the value of a property from a start value to an end value.

These can be numbers, images, colors, or other types of properties.

This can of course be managed by code, but also directly from the form designer using non-visual animation components.

Embarcadero offers the ability to apply graphic effects to the visual elements of our user interfaces by simply placing non-visual components on top of them and activating them. Simple to set up and easy to manipulate in the code.

For example, we can visually highlight a mandatory input field or fields with input errors in our interfaces, keeping in mind, of course, that not everyone sees the same colors and therefore only doing so in addition to a clear text message.

To design our graphical interfaces, we have classic components such as text, input fields, buttons, lists, and grids, but we also have primary graphical shapes (or more complex ones by installing the Radiant Shapes suite from GetIt).

These shapes have an outline and content.

The component frameworks provided with Delphi have visual and non-visual components.

Visual components are drawn within a parent.

In VCL, the number of parent components is limited.

In FireMonkey, any visual component can be a parent of visual components. This makes the possibilities endless, but can also complicate interface design somewhat, as you have to think about what you want to do and the graphical implications.

The edges of components can be fixed relative to the edges of their parents. This allows us to manage the overall deformation of our elements according to the context in which we use them.

For example, we can use this to have buttons at the bottom right of our forms that move according to the size of the window.

Visual components can position themselves relative to their parent. This layout is defined by their alignment type.

Delphi visual components have a margin around them and an inner margin to define the drawing area for their children.

These margins are essentially applied when components are aligned with each other in the same parent.

To make screen design even more efficient in Delphi in a FireMonkey project, you can play around with a transparent container: the TLayout component. It's like a TPanel but non-visual.

The TFlowLayout component is a transparent container for visual components available in FireMonkey.

It works much like HTML <DIV> tags: the elements it contains stack up until there is no more room, then overflow into the next list or column.

When the screen size changes and the TFlowLayout is modified, code must be added to resize it according to its content. Otherwise, overlapping with other components that touch it is possible.

TGridLayout works in the same way as TFlowLayout, except that all the components it contains are in the form of grid cells. They all have the same dimensions.

Functioning like HTML's <TABLE>, FireMonkey's TGridPanelLayout component allows you to position visual elements in a grid format while giving you complete freedom to customize your layout.

Ideal for configuring positioning via code or directly from the form designer, especially when the final screen size needs to adapt to the device.

Normally, when designing mobile application screens, we try not to depend on pixel-perfect positioning. Sometimes we don't have much choice and have to do it anyway.

The TScaledLayout component is used in these cases.

It is a container for visual elements that displays them in a predefined size but applies a zoom factor depending on the ratio between their initial size and their actual display size.

GetIt is a catalog of downloadable elements for Delphi and C++Builder. It is integrated into the RAD Studio development environment.

In GetIt, you can find examples of classic screens used in mobile applications with different designs.

To better understand how to use the different layouts, anchors, shapes, and alignments, we strongly recommend downloading and studying them. This will give you a good overview of the basic functioning of FireMonkey visual components and allow you to more easily develop mobile applications for smartphones and tablets without worrying about the actual size of their screens.

Enable this option in the RAD Studio, Delphi, and C++Builder installer options to find a folder containing sample source code that demonstrates how components work and how to use the libraries provided with the languages.

These samples can be added after installation if you did not do so previously, or from Embarcadero's GitHub account.

Numerous examples of projects and tutorials are provided with Delphi, but there is a whole world to discover on open source project hosting platforms.

On GitHub, for example, you can find hundreds of code repositories full of demo projects, complete software programs, and even video games developed in Delphi.

All you need to do is use the right search terms to get started and then lose yourself in the sources of numerous developers.

The FireMonkey form designer allows you to see directly in the editor what your screens will look like as you create them.

Simply select the correct target platform and activate the style you want to test when you have several.

Designing user interfaces can quickly become a headache when developing for multiple platforms with different screen sizes and multiple operating systems at the same time. Fortunately, the RAD Studio development environment (Delphi and C++Builder) offers real-time previews directly on your workstation.

The multi-device preview is fully customizable and can be moved to a second screen if you want to see multiple previews at the same time.

Designing the interface for our mobile applications and classic software in Delphi is fairly simple to do in FireMonkey as well as in VCL, but it's still better to see what you'll actually get, especially when working with multiple styles and operating systems on devices with a multitude of screen sizes.

Included in the examples to be installed with the development environment is the FireUI App Preview application. This program connects to the form designer on the local network and allows you to view interface changes in real time on multiple devices at once without having to recompile your programs.

Not everything works, but it gives you a good idea of the placement of components, their appearance, and allows you to test the orientation of smartphones and tablets.