The world has changed. We are in the new digital age where, every day, more and more apps are available to the users. So, what really grabs attention, since we have so many options available? Features, user experience, rich design? We can say that, with Delphi, we have all the ability to develop rich applications, both graphically and in terms of functionality.

A major challenge for Delphi developers is the paradigm shift between desktop and mobile platforms. The way to develop and draw a form is different, of course; however, many developers program as if they were still working with a Delphi 7 IDE.

If you are this type of developer and want to learn more about responsive design and how to change your desktop mindset for mobile, then this isanideal chapter for you.

We have chosen an application already on the market—Instagram—to better elucidate these insights and this paradigm shift.

In this Delphi version of Instagram, you will be introduced to the following topics:

• Mindset between desktop and mobile
• Creating responsive layouts
• Creating buttons withScalable Vector Graphics (SVG) icons
• Interacting with the camera
• Sharing photos

The knowledge necessary for understanding this chapter is basic. Experience with Delphi is not necessary; minimal knowledge of the IDE and some components, such as buttons, edits, and listviews, is sufficient.

To get started, you must have a version of Delphi installed on your computer.For the examples, we will use Delphi Rio, but you can use your version of Delphi, provided it is from Seattle 10 or later.

The goal of this project is to enable you to better understand the use of visual components and the concept of responsive design, and introduce the concepts of actions and use them to take beautiful photos.

The estimated build time is two to five minutes.

It is necessary to have access to the internet to access sites that offer SVG.

No download is required.

When smartphones became essential and the emergence of the three major mobile OS competitors (iOS, Android, and Windows phone—this last one has been discontinued) took shape, developers were confused. After all, who was not accustomed to responsiveness or smaller screens? Before diving into this new world, you need to understand some important things.

Developing for the Windows desktop, we have some benefits—available memory, ease of interface design (usually in resolutions of at least 1,024 x 768), and others. Most of these features make the programmer's life much more focused on the logic of the application without worrying too much about available computer resources or the like.

When web applications began to emerge with their HTTP protocol in the best request-response style, a new concept of development was created. The programmer had to adapt to the new markup languages (HTML and CSS) and had to separate their application in what we call the server/client side. So, anyone who previously programmed into a single programming language (such as Java or C#) had to adapt to learn markup languages. And, with a need for insertion in the web world, the programmer needed to deal with screen sizes. On the other hand, the applications should be more and more responsive to work more in the varied sizes of screen, from tiny phones to tablets and desktops; not to mention the limitations of the hardware, since they have less processing power and memory than desktop computers.

Mobile has combined the advantages of the previous twoalong with their disadvantages. If it was said in the web application that everything was on the web, that is to say, for any user access just entering the site, the mobile brought back the desktop concept. The application is installed in the device, and, if you have to upgrade the application, you have to do so for each device. We return to the same situation as desktop applications.

Having limited hardware, including reduced screen size and the absence of peripherals means that the challenge for the mobile developer is more complex

Before you start reading into this topic, you must abandon certain preconceptions, such as the idea that developing for mobile is the same as doing so for web or desktop. No, it's not! Remember that your user is on a limited device and does not have any peripherals for assistance, such as a mouse or keyboard.

Follow these steps to learn about viewing for different screen types:

1. Open the Delphi IDE and create aMulti-Device Application. Note that different screen types will have different viewing characteristics:

2. Select one Android or iPhone view.

When you work with a different view of the master, Delphi will create a new.FMX file in your project folder. This file will contain the positions of the components for that particular screen format. The paradigm shift is not just about the size or the screen format, but the Delphi IDE helps us identify those nuances.

There are a range of sizes used to determine the view that is used in Android apps. Note that the runtime does not require an exact match to select a view. The runtime chooses the closest match.The following table shows the ranges for each view, specified in landscape coordinates:

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

1. To start, open Delphi and create a new project by navigating toFile|New|Multi-Device Application-Delphi and selectBlank Application:

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

2. Add aToolbar component to your form.
3. Create two buttons insideToolbar.
4. Select the two buttons and align to the left.
5. Modify the margins to5 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 theStyleLookup property by selecting thecameratoolbuttonoption. Notice that the button icon is then changed to a specific camera icon.
8. Add anotherToolbar component, but leave it with bottom alignment. In this toolbar, add a button, align it to the right, and change its margins to5, as in the top buttons. This button will exit the application.
9. Finally, add aTLayout component to the center of your form so that it fills the empty area and align it when usingClient.
10. Also, modifyStyleLookup for the missing buttons. For the button next to the camera, selectsearchtoolbutton, because, through this, we will search the already-saved images in the device. For the last button,selectescapetoolbutton in theStyleLookup 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 asPosition,Align,Margins, andPadding with anchors, you will turn your app in to a responsive application.

To achieve rich interfaces usingTLayout, 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 theScrollBox so you can have a scrolling effect on your form.

In the previous project, we created the main basic layout. Later on, we created photo and sharing events. In this project, we will work with the use of SVG icons, which are infinitely smaller in size in relation to the allocation of space.

SVG is an XML-based vector graphics format that can scale to any size without losing clarity. SVG images and their characteristics are defined in XML text files. That is, they can be searched, indexed, scripted, and compressed. Like XML files, SVG images can be produced and modified with any editing software.

We will use 100% native components in order to use an SVG image. To do this, follow this step by step:

1. From theTool Pallet, selectTRectangle. Add in the toolbar created previously, use the property, and align the rectangle by setting it to the center. You will now have a rectangle centered in the toolbar.
2. Add a speed button inside this same rectangle. Note that in theStructure pane, the button is contained within the shape. Do the same with theTPath component, but leave it as the child of the speed button. Align both toCenter.
3. Clear theText property of the new speed button:

The structure of your application should be like this, with the components nested.

There are at least two ways to take a picture with FireMonkey—the first, for the lazy, is to use anActionList, linking the action of taking a photo to a visual component, such as a button. In this case, your application will request access to the device's camera application.

The second form, however, gives us more freedom in terms of functionality, usingTCameraComponent. With it, you can set the resolution, specify the type of camera (front or back) that can be used, choose to use the flash, and you can even create your own flashlight application.

Now that we have the main screen properly built with its main components anchored, we can work on the main functionality—recording moments! Using the same project as the previous recipes, we will finally develop the code to capture images:

1. First, add aTImage component to your form and set its alignment toalClient, filling all layout content. We will use thisTImage to display the photo. Now, do the same for a non-visual component, calledActionList. Enter this into the form. Change theTImage property and name it asImgInsta.
2. With the right-click onActionList, open theActionList Editor option.
   With the keyboard, clickCtrl +Insertto open the dialog containing the options; you can also go with the mouse on theNew button and insert the new action. The action we want isTTakePhotoFromCameraAction:

In this project, we will capture the image in two ways, the first with a standard action and the other using theIFMXCameraService interface.

3. Let's create theDoDidFinish procedure:

procedureTForm1.DoDidFinish(Image:TBitmap);beginImgInsta.Bitmap.Assign(Image);end;

4. In this procedure, the image parameter, which will come from the camera, will be assigned to theTImage component in our form. Remember to assign this procedure to theOnDidFinishTaking event ofTTakePhotoFromCameraAction:

procedure TForm1.TakePhotoFromCameraAction1DidFinishTaking(Image: TBitmap);
begin
  DoDidFinish(Image);
end;

In the next few steps, you will understand why this is redundant.

5. We can create a new default action, which will fetch images already saved in the device library. Repeat the process to add a new action to yourActionList; however, this time select theTTakeFromLibrary action.

6. When selecting the event of this new action, the code is exactly the same code that was made inTTakePhotoFromCameraAction:

procedure TForm1.TakePhotoFromLibraryAction1DidFinishTaking(Image: TBitmap);
begin
  DoDidFinish(Image);
end;

7. Bind the respective actions to their execution buttons:

8. Let's increase the project a bit more, including an extra button added to the top in the first toolbar, only this time, right-aligned. This button will also take a picture, but, using theIFMXCameraService interface. To perform such an act, include the following unitsin theuses clause of your form:

usesFMX.MediaLibrary,FMX.Platform,System.Messaging;

9. Add another procedure to capture the message coming from the device and thus identify an action to take photos:

procedureDoMessageListener(constSender:TObject;constM:TMessage);

Its implementation is shown in the following code snippet:

procedure TForm1.DoMessageListener(const Sender: TObject; const M: TMessage);
begin
  if M is TMessageDidFinishTakingImageFromLibrary then
    ImgInsta.Bitmap.Assign(TMessageDidFinishTakingImageFromLibrary(M).Value);
end;

10. Encode theFormCreate procedure:

procedure TForm1.FormCreate(Sender: TObject);
begin
  TMessageManager.DefaultManager.SubscribeToMessage(
    TMessageDidFinishTakingImageFromLibrary, DoMessageListener);
end;

11. To conclude, let's encode theonClick event of the newly added button:

procedure TForm1.Button3Click(Sender: TObject);
var
  Service: IFMXCameraService;
  Params: TParamsPhotoQuery;
begin
  if TPlatformServices.Current.SupportsPlatformService(IFMXCameraService,
    Service) then
  begin
    Params.Editable := True;
    // Specifies whether to save a picture to device Photo Library
    Params.NeedSaveToAlbum := True;
    Params.RequiredResolution := TSize.Create(640, 640);
   Params.OnDidFinishTaking := DoDidFinish;
    Service.TakePhoto(Button3, Params);
  end
  else
    ShowMessage('This device does not support the camera service');
end;

We divide this project into two parts, where, in the first part, we use anActionList to take a picture. These actions require very little programming; however, they will not work on Windows platforms. In the second part, when using theIFMXCameraService interface, we have the freedom to implement our codes with a few more lines but greater freedom. We can also include parameters that allow us to, for example, set the minimum resolution and define whether we will save the image to the device as well.

You should also check theTCameraComponent component. You can take your photos without even directing them to your device's camera, including video recordings.

FireMonkey's basic sharing service does not differ from the way we interact to take a photo; that is, we can use a standard action in ourActionList1 to create a new event where we share the photo you just took.

Now that our application is responsive and is properly recording the most important moments through photographs, let's share! Using the same example from previous recipes, we will now develop the button event we created with the SVG icon.

The following steps will show you how to share the photos using FireMonkey:

1. Create a new action in theActionList1, in theMedia Library category, to display the share center. Select theShowShareSheetAction1action:

2. The event is now different; in order to share, it is necessary to assign what you want to share. In our project, we will share a photo. For this, we must program theOnBeforeExecute event of this action:

The following is the code for theOnBeforeExecute event:

procedure TForm1.ShowShareSheetAction1BeforeExecute(Sender: TObject);
begin
  ShowShareSheetAction1.Bitmap.Assign(ImgInsta.Bitmap);
end;

3. Now, to finish, just assign the newly coded action theAction property of our button. You can useStructure pane and select theTSpeedButton (which has theTPath component is inside it) component with the Instagram logo. With everything ready, when taking a photo it will be filled through theTImage component that can be shared.

The following screenshot shows the form view at development time:

The following screenshot shows the form viewrunning on an Android mobile:

Finally, the application images are still at design time in Delphi and are already running on an Android device.

We have introduced through this mini Instagram clone how to work with basic responsive design, making sure that, regardless of the size of the screen, our controls adjust according to the screen. Then, through theTPath component, we included icons in SVG format, drastically reducing the size of the images and icons thanks to vectorization.

Our code was simple and consisted of only three lines. At a minimum, we can take a photo, choose a photo from the library, and share with friends. All this is done usingActionList and interfaces already done in the FireMonkey library.

In the next chapter, you'll be introduced to the wonderful world of APIs. Not only is it possible to consume Facebook API services, but you can develop your application on the platform by interacting with Delphi.

Delphi is this simple, RAD, and practical!