UI

When it comes to mobile UI design, there are several key design paradigms. I covered the different mobile UI design patterns in my recent C++ Mobile Day session.

App Home Screen Navigation Key Features

• Images arranged in a grid like layout
• Images can be annotated with text
• May span over multiple screens (you can use a TTabControl for that)

 

To create the user interface shown in the screenshot above, you will first need to create a new mobile application. Add a TToolbar, align it to the Top, and parent a TLabel to it. Next, drop a TGridPanelLayout component onto your form and align it to the client. By default, two columns (0,1) and two rows (0,1) are set up.

 

Note: Since you are going to set up event handlers for each graphic on the home screen, I would recommend adding a TTabControl (aligned to Client) with 11 invisible tabs (TabPosition = tpNone). Then add the Toolbar and GridPanelLayout components to Tab1, and link to each of the tabs when the user taps on one of the 10 home screen graphics by setting up on-click events for each graphic.

Define the width of each column, i.e. 50% to have even spacing across both columns.

 

 

For this sample application, we want to have a total of two columns with five rows. To add a row, right click on ‘RowCollection’ and add an item.

 

Each of the five rows should have a value of 20% to ensure even spacing across our grid.

 

Next, drop a total of 10 TImageControls onto your form. You could also use TImage if you want to load different images for different device resolutions (i.e. 1x resolution image, 2x resolution image etc.).Multi-select (shift select) all TImageControls in the Structure pane and change the width and height to 75 px. This ensures spacing between each of the graphics.

 

 

Select each TImageControl and select the row and column you want it to be displayed.

 

Last step is to add the images you want to display and setup on-click events for each graphic to navigate the user to the related content.

 

 

Recently, I covered key menu styles that are used in mobile applications today. Drawer menus are very popular, as they allow you to take advantage of more screen real estate when building your app. The main application menu is hidden by default, and invoked by tapping on a menu item or swiping left/right. This type of UI can be seen in many popular mobile applications, including Facebook, Youtube and Gmail.

In this tutorial, I will cover the steps needed to create a navigation drawer for your Appmethod mobile apps.

Many thanks to Malcolm Groves who created the drawer sample that I am using and expanding for this blog post. You can download the project source from his Github repository.

This application consists of 2 layouts. One layout containing the drawer content, and one containing the main application content. 

In this case, my left menu, the drawer menu, includes a top aligned toolbar with a parented label, and a client aligned Listbox with several menu items in it. The idea here is that the drawer menu contains all the main application navigation, including quick links to my account profile, app settings etc. 

For demo purposes, I dropped a TListView component onto my form, parented it to lytMain and set its alignment property to alClient. I also placed a TPrototypeBindsource component onto my form to fill my TListview with some sample data. Right-clicking on the PrototypeBindSource component provides you with sample data that you can then easily bind into your Listview using the LiveBindings Designer. I also parented a TLine to lytMain to make the division between the main layout and navigation drawer more visible. You could also apply a style or use a separate background color.

If you double click on the Actionlist component on the form, you can see that we setup a custom action. We are leveraging that action for opening/closing the drawer when the user clicks on the drawer menu (three line) button or when they swipe across the main menu layout.

procedure TfrmMain.actOpenDrawerExecute(Sender: TObject);
begin
  DrawerVisible := not DrawerVisible;
end;

procedure TfrmMain.actOpenDrawerUpdate(Sender: TObject);
begin
  actOpenDrawer.Visible := not (IsPad and IsLandscape);
end;

On the form, we also placed the Gesture Manager component since we want the user to be able to swipe across the screen to show/hide the navigation drawer. In the project source, you will see that the touch gestures are setup for the toolbar parented to lytMain. In my demo, I removed the gesture that was setup on the toolbar and instead assigned the touch gesture to lytMain. 

You can find the source code for this project in Malcolm Groves' Github repository. Below is a quick video that shows my running application.

Today, I thought I would show you a simple example of how to implement pull to refresh for TListView. This example doesn’t use a data source, but instead just adds 20 items to my list every time I try to refresh it. I am currently using one timer with this sample, but you could add another one for when the data is done loading to hide the animation at that time.

This sample uses the following 3 components:

    TListView
    TAniIndicator
    TTimer

For Timer1, I set the Interval design time property to 30. ListView1 is aligned to the client. AniIndicator1 is positioned at the top and centered on my form.

Below is the entire code of my application:

    unit PullToRefresh;

    interface

    uses
    System.SysUtils, System.Types, System.UITypes, System.Classes, System.Variants,
    FMX.Types, FMX.Controls, FMX.Forms, FMX.Graphics, FMX.Dialogs,
    FMX.ListView.Types, Data.Bind.GenData, Fmx.Bind.GenData, System.Rtti,
    System.Bindings.Outputs, Fmx.Bind.Editors, Data.Bind.EngExt,
    Fmx.Bind.DBEngExt, FMX.StdCtrls, Data.Bind.Components, Data.Bind.ObjectScope,
    FMX.ListView;

    type
    TForm36 = class(TForm)
    ListView1: TListView;
    Timer1: TTimer;
    AniIndicator1: TAniIndicator;
    procedure ListView1MouseMove(Sender: TObject; Shift: TShiftState; X,
    Y: Single);
    procedure Timer1Timer(Sender: TObject);
    procedure FormCreate(Sender: TObject);
    private
    { Private declarations }
    Myposition : Integer;
    Updating : Boolean;
    public
    { Public declarations }
    end;

    var
    Form36: TForm36;

    implementation

    {$R *.fmx}
    var
    LItem: TListViewItem;
    LList : TListView;
    I: Integer;

    procedure TForm36.FormCreate(Sender: TObject);
    begin
    Timer1.Enabled := true;
    begin
    LItem := ListView1.Items.Add;
    LItem.Text := ‘Pull to refresh list & add 20 items’;
    end;
    end;

    procedure TForm36.ListView1MouseMove(Sender: TObject; Shift: TShiftState; X,
    Y: Single);
    begin
    if not Updating and (ListView1.ScrollViewPos < -40) then
    begin
    Updating := true;
    AniIndicator1.Visible := True;
    AniIndicator1.Enabled := true;
    for
    I := Myposition + 1 to Myposition +20 do
    begin
    LItem := ListView1.Items.Add;
    LItem.Text := Format(’Text %d’, [I]);
    end;
    inc(myposition, 20);
    end;
    end;

    procedure TForm36.Timer1Timer(Sender: TObject);
    begin
    if ListView1.ScrollViewPos >-40 then
    begin
    AniIndicator1.Visible := false;
    Updating := false;
    end;
    end;
    end.

In Appmethod, it is very easy to set the supported device orientations for the application you are building. Some applications are designed to support all 4 orientations (landscape, portrait, upside down landscape, upside down portrait), while others are designed for only a single orientation, i.e. portrait.

To define and lock your supported orientations, do the following:

1) With your mobile project open, go to Project->Options

2) Select Application

3) Select the Orientation tab

4) Check 'Custom Orientation' and then check the orientations you want to support

5) Click OK and save your project

Appmethod's Online Documentation covers a wide variety of application development topics and also includes many step-by-step tutorials.

Appmethod includes a style engine that allows you to quickly change the look of your user interface elements.

For a detailed step-by-step walkthrough on how to change button styles or to build you first database connected application, visit our docwiki.

This tutorial shows you how to deploy and access files and/or folders containing files in your iOS and Android apps. To accomplish this, you create a new mobile app, a few lines of Object Pascal code, use the Project | Deployment menu item and use the System.IOUtils unit's TPath.GetDocumentsPath method and PathDelim in your code.

The steps to create the mobile app

1) use the File->New ->Mobile Application main menu item and select  the "Blank Application" project template.

2) On the form, add 1 TButton, 2 TLabel and 1 TImage components.

3) Double click on the TButton component to create the Button's OnClick event handler.

4) Add a "uses System.IOUtils;" just below the {$R *.fmx} in the implementation section.

5) Add the following Object Pascal code in the event handler to display the documents path and to load the bitmap from the documents folder:

procedure TForm1.Button1Click(Sender: TObject);
begin
  DocPathLabel.Text := TPath.GetDocumentsPath;
  Image1.Bitmap.LoadFromFile(TPath.GetDocumentsPath + PathDelim + 'davidi_tiedye.jpg');
end;

6) In the Project Manager, select each of the Android and iOS Target Platforms to active each one to build an application for each one.

7) Use the Project | Deployment menu item and select the Android and the iOS Device platforms and for each one click the "Add Files" button in the local toolbar to select the bitmap file to deploy with the app and set the Remote Path column value for each platform.

• For Android, set the Remote Path to .\assets\internal
• For iOS, set the Remote Path to StartUp\Documents

Here are screen shots of each of the resulting Deployment settings:

8) Compile, Deploy and Run the app for Android (I used my Samsung Galaxy S4) and iOS (I used my iPhone 4s)

You can read additional information about mobile application development and deployment on the Appmethod DocWiki using the following URLs:

• http://docwiki.appmethod.com/appmethod/1.13/topics/en/Preparing_an_Android_Application_for_Deployment
• http://docwiki.appmethod.com/appmethod/1.13/topics/en/Preparing_an_iOS_Application_for_Deployment
• http://docwiki.appmethod.com/appmethod/1.13/topics/en/Deployment_Manager
• http://docwiki.appmethod.com/appmethod/1.13/topics/en/Deployment_Manager_-_Adding_files

On Android, an Action Bar is a top (or top and bottom aligned) toolbar that is segmented into 4 key functional areas. One of those functional areas is an Overflow menu. The ‘Overflow’ popup menu is commonly used for additional menu items on Android and accessed via the Action Bar. An Overflow menu is designed to give the application user quick access to additional/less often used features that are otherwise not accessible via more prominent menu items. Using Appmethod, you can easily implement an Overflow menu through the use of TListBox.

Here are the step-by-step instructions.

In this example we using the following 4 components:

• TToolbar
  • Alignment: alTop
• TSpeedButton
  • Alignment: alRight
  • StyleLookUp: detailstoolbutton
  • Margin, Right: 5 (this is set in case you want to carry this UI over to iOS as well, to account for both bordered (iOS6) and non-bordered (iOS7) button sizes
• TListBox with several items
  • Each of the four listboxitems has a bitmap and text defined via the ItemData property
  • Visibility has been set to False
  • Height has been set to 176px (to show the listbox border right below the last listbox item)
  • Anchors: akTop, akRight
• TShadowEffect
• Parented to TListBox

ListBox Item Properties:

Note: For the Overflow menu (TListBox), set alignment to alNone. Since you are setting anchors, you don’t want to set any alignment. Position the listbox where you want it to appear on the form (make sure it is not parented to another component), and then set the following Anchors: akTop, akRight. If you rotate the devices, you will see that that the listbox will remain where you had positioned it.

TSpeedButton properties:

I used a larger (80×80px) icon for each listbox item bitmap so that the icons look nice on both lower resolution and high resolution displays. I also created the following on-click Event for my OverflowButton:

procedure TForm10.OverflowButtonClick(Sender: TObject);
begin
  OverflowMenu.Visible := not OverflowMenu.Visible;
  if OverflowMenu.Visible then
  begin
    OverflowMenu.ApplyStyleLookup;
    OverflowMenu.RealignContent;
  end;
end;

Below is a quick GIF recording of the Overflow menu in action.