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