Creating a profile screen for your mobile application

by May 4, 2017

 

I am using the following components on my form:

  • TTabControl with 3 tab items
  •    TabItem3 consists of:
    • TCircle with the stroke color set to match the toolbar color and a profile photo as the fill
    • TToolbar with multiple Speedbuttons and the screen title
    • Multiple labels on the form
    • TListBox with several list items, each with a custom bitmap and a Listbox search header.
    • TStyleBook with a custom iOS style
    • TImage aligned to the client with a custom background graphic and the opacity set to 0.1

Style shown: Dark Copper iOS Style, part of the 10.2 Tokyo Premium Styles Bonus Pack

 

Style shown: Clear Gulf Stream iOS Style, available for sale at DelphiStyles.com

 

Style shown: Material Oxford Blue iOS Style, available for sale at DelphiStyles.com

 

 

Native iOS UI shown

 

For a nice UI touch, I used the tab item fill color as the stroke color on the circle, and as the icon fill color for each of the custom icons shown in the listbox. When selecting listbox icons, it's important to use pngs with some padding around the actual icon to ensure that the icon does not take up the entire height of the row. There are many great sites that offer free or paid icons. Some you can quickly customize online, others require a graphic design tool like Photoshop.

Example:

 

[DownloadButton Product=’RAD’ Caption=’Download a free trial and start building multi-device apps today!’]