User:Maria/Mobile Tutorial: Taking and Sharing a Picture, and Sharing Text (iOS and Android)

From RAD Studio
Jump to: navigation, search

Go Up to Mobile Tutorials: Mobile Application Development (iOS and Android)


Before starting this tutorial, you should read and perform the following tutorial:

This tutorial covers the following typical tasks for using pictures and sharing text with your applications in mobile platforms.

On iOS Devices:

Taking a picture with the device camera

Using a picture from the device Photo Library

TakePhotoFromCameraAction.PNG

TakePhotoFromLibraryAction.PNG


Sharing or printing a picture

Sharing text

ShowShareSheetAction.PNG

ShowShareSheetActioniOS7.PNG


On Android Devices:

Taking a picture with the device camera

Using a picture from the device Photo Library

Android TakeCameraPicture.png

Android SelectfromLibrary.png


Sharing or printing a picture

Sharing text

Android SendImage.png

ShowShareSheetActionAndroid.png


This functionality is provided as Actions, and you need to write only one line of code for each task.

An action corresponds to one or more elements of the user interface, such as menu commands, toolbar buttons, and controls.

Actions serve two purposes:

  • An action can represent properties common to the user interface elements—such as whether a control is enabled or whether a check box is selected.
  • An action can respond when a control fires—such as when the user clicks a button or chooses a menu item.

In this tutorial, you learn how to assign actions to user interface elements (such as a button) for each functionality that you want to support.

Building the User Interface for the Application

The user interface of this sample application is quite simple, as shown in the following picture:

CameraAppUIElements.png

Place the following components on the Form Designer:

  • TToolBar component
    • On the toolbar, put three TButton components. Each button uses different icons.
    • Set the StyleLookup property for the three buttons to cameratoolbuttonbordered, searchtoolbuttonbordered, and actiontoolbuttonbordered, respectively.
  • TImage component
    • Set the Align property to Client.
  • TActionList component

Taking a Picture with a Mobile Device Camera

You can define an action to take a photo using the camera on your mobile device. Perform the following steps:

  1. On the Form Designer, select the button (for taking a photo).
  2. In the Object Inspector, select the drop-down list for the Action property.
  3. Select New Standard Action | Media Library | TTakePhotoFromCameraAction:

    CreateTakePhotoFromCameraAction.png

  4. On the Events tab, expand the Action node, and then double-click the OnDidFinishTaking event.
    TakePhotoFromCameraAction1DidFinishTaking.png

  5. Add the following code to the OnDidFinishTaking event handler:

Delphi: 

procedure TForm1.TakePhotoFromCameraAction1DidFinishTaking(Image: TBitmap);
begin
  Image1.Bitmap.Assign(Image);
end;

C++: 

void __fastcall TForm2::TakePhotoFromCameraAction1DidFinishTaking(TBitmap *Image)
{
    Image1->Bitmap->Assign(Image);
}

This code assigns a picture taken from the mobile device camera to the Bitmap property of the TImage component.

Using a Picture from the Mobile Device Photo Library

You can define an action to use a photo from the Photo Library with the following steps:

  1. On the Form Designer, choose the button that you want to use (for picking up a photo).
  2. In the Object Inspector, click the drop-down list for the Action property and select New Standard Action | Media Library | TTakePhotoFromLibraryAction.
  3. In the Events tab, expand the Action node, and then double-click the OnDidFinishTaking event.
  4. Add the following code to the OnDidFinishTaking event handler:

Delphi: 

procedure TForm1.TakePhotoFromLibraryAction1DidFinishTaking(Image: TBitmap);
begin
  Image1.Bitmap.Assign(Image);
end;

C++: 

void __fastcall TForm2::TakePhotoFromLibraryAction1DidFinishTaking(TBitmap *Image)
{
   Image1->Bitmap->Assign(Image);
}

The code above assigns a picture taken from the Photo Library to the Bitmap property of the TImage component.

Enabling Image Editing

You can enable the Editable property of the actions TTakePhotoFromCameraAction and TTakePhotoFromLibraryAction to allow resizing and cropping the image after taking or loading it.

To use the Editable property follow the steps:

  1. On the Structure panel, go to the action:
    1. ActionList1 > Media Library > TakePhotoFromCameraAction1
    2. ActionList1 > Media Library > TakePhotoFromLibraryAction1
  2. On the Object Inspector set the Editable property to True.

EditablePropertyTActionList.png

After enabling the Editable property you have the resize and crop options available for the photos on iOS and Android.

On iOS Devices:

Loading the Picture

Resizing the Picture

Cropping the Picture

LoadingPictureiOS.PNG

ResizePictureiOS.PNG

CropPictureiOS.PNG

On Android Devices:

Loading the Picture

Resizing the Picture

Cropping the Picture

LoadingPictureAndroid.png

ResizePictureAndroid.png

CropPictureAndroid.png

Sharing or Printing a Picture

From your application, you can share a photo on social networking sites (such as Facebook and Twitter), you can send the picture to a printer, use the picture as an attachment to e-mail, assign it to Contacts, and so on.

ShowShareSheetAction.PNG

This multi-share service is called Share Sheet Functionality, and you can implement this functionality using the following steps:

  1. On the Form Designer, select the button (for sharing a photo).
  2. In the Object Inspector, click the drop-down list for the Action property, and select New Standard Action | Media Library | TShowShareSheetAction.
  3. On the Events tab, expand the Action node, and then double-click the OnBeforeExecute event.
  4. Add the following code to the OnBeforeExecute event handler:

Delphi: 

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

C++: 

void __fastcall TForm2::ShowShareSheetAction1BeforeExecute(TObject *Sender)
{
    ShowShareSheetAction1->Bitmap->Assign(Image1->Bitmap);
}

The code above assigns a picture on the TImage component to "Share Sheet Functionality".

After you select Facebook from the list of services, you can post the picture on Facebook with your comment:

IOSCamera.PNG

Note: In this subsection, screenshots of iOS devices are used as an example.

For a sample application that uses share sheet functionality, see the FMX.Mobile.PhotoEditorDemo Sample (Delphi).

Sharing Text

From your application, you can share text using the mobile device's share sheet. The applications that appear in the share sheet depend on the device:

  • On an iOS device, a list of suitable sharing options is shown depending on the content that your app wants to share, but there is not a full app-sharing mechanism.
  • On an Android device, the choices are dependent on sharing options and installed apps.

From your application, you can share text on social networking sites (such as Facebook and Twitter), you can send it by email, SMS (Short Message Service), and other available methods.

You can implement this functionality with the multi-share service called Share Sheet Functionality. The TShowShareSheetAction is the standard action for sharing images and text. TShowShareSheetAction shows the available sharing options depending on the type of content you are sharing. That is, the options shown for Text are different than for a Bitmap.

This example shows a simple implementation of this functionality. We share the text that the user has typed into a Memo.

  1. Create a multi-device application.
  2. Place the following components on the Form Designer:
    • TToolBar component
      • On the toolbar, add a TButton component.
      • Set the StyleLookup property for the button as follows:
        • actiontoolbuttonbordered or actiontoolbutton for iOS
        • actiontoolbutton for Android
    Note: The actiontoolbuttonbordered property includes the button with a border, while actiontoolbutton shows the button without a border.

After you have added the components to the sample application:

  1. On the Form Designer, select the button (for sharing the text).
  2. In the Object Inspector, click the drop-down list for the Action property, and select New Standard Action | Media Library | TShowShareSheetAction.
    TShowShareSheetOption.png
  3. On the Events tab, expand the Action node, and then double-click the OnBeforeExecute event.
  4. Add the following code to the OnBeforeExecute event handler:

Delphi: 

procedure TDemonstration.ShowShareSheetAction1BeforeExecute(Sender: TObject);
begin
    ShowShareSheetAction1.TextMessage:= Memo1.Lines.Text;
end;

C++: 

void __fastcall TDemonstration::ShowShareSheetAction1BeforeExecute(TObject *Sender)
{
        ShowShareSheetAction1->TextMessage = Memo1->Lines->Text;
}

ShowShareSheetActioncode.png

The code above uses the TextMessage property to assign the text to be shared, as previously typed in a TMemo.

See Also

Retrieved from "http://docwiki.embarcadero.com/RADStudio/Berlin/e/index.php?title=User:Maria/Mobile_Tutorial:_Taking_and_Sharing_a_Picture,_and_Sharing_Text_(iOS_and_Android)&oldid=232976"