Creating responsive layouts

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.

1. Add a Toolbar component to your form.
2. Create two buttons inside Toolbar.
3. Select the two buttons and align to the left.
4. Modify the margins to 5 on each property.
5. Save your project and run the application for a Windows platform.
6. 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.
7. 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.
8. Finally, add a TLayout component to the center of your form so that it fills the empty area and align it when using Client.
9. 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.