In this topic, you will learn how to work with responsive layouts in Delphi using FireMonkey (FMX). For the examples, we will use Delphi Tokyo. Let's have a look at the required steps:

1. To start, open Delphi and create a new project by navigating to File | New | Multi-Device Application-Delphi and select Blank Application:

Adjust the style for Android; for example, for the view, we will continue in the Master view.

2. Add a Toolbar component to your form.
3. Create two buttons inside Toolbar.
4. Select the two buttons and align to the left.
5. Modify the margins to 5 on each property.
6. Save your project and run the application for a Windows platform.
7. Then, select the first button that is already configured and modify the StyleLookup property by selecting the cameratoolbutton option. Notice that the button icon is then changed to a specific camera icon.
8. Add another Toolbar component, but leave it with bottom alignment. In this toolbar, add a button, align it to the right, and change its margins to 5, as in the top buttons. This button will exit the application.
9. Finally, add a TLayout component to the center of your form so that it fills the empty area and align it when using Client.
10. Also, modify StyleLookup for the missing buttons. For the button next to the camera, select searchtoolbutton, because, through this, we will search the already-saved images in the device. For the last button, select escapetoolbutton in the StyleLookup property, because, with this button, we will leave the application.

The FireMonkey components have an owner, parent, and children. If you put any component on a form, it becomes the owner and parent of the component.

Using properties such as Position, Align, Margins, and Padding with anchors, you will turn your app in to a responsive application.

To achieve rich interfaces using TLayout, use more than one layout and the organization properties of the child controls in the layouts.

If everything went well here, you will have a form as shown in the following screenshot:

Try creating new views and see the resulting alignment. This is the basic principle for developing a responsive application in FireMonkey.

If you want to view the format with the screen rotated, there is a button to rotate the screen. With this, you can view the layout on the screen in a different format as shown in the following screenshot:

Look at the different types of layouts and their characteristics. For project types where you need to insert many components, use the ScrollBox so you can have a scrolling effect on your form.