RAD Studio 10.4.1 is now available! Learn more. Looking for discounts? Visit our Special Offers page!
Delphi

Creating a profile screen for your mobile application

 

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!’]


Reduce development time and get to market faster with RAD Studio, Delphi, or C++Builder.
Design. Code. Compile. Deploy.
Start Free Trial   Learn More About Upgrading

About author

Director of Product Management, Developer Tools Idera, Inc.
Related posts
DelphiRAD Studio

Get Started Building Cross-Platform Games In Delphi FireMonkey With Alien Invasion Sample

C++Delphi

Ultimate Compression Toolkit For Delphi And C++ Builder Developers

DelphiNews

RAD Studio with Delphi - The Original Low Code!

DelphiShowcase

KisKis The Crazy Social Network For Android And iOS In Delphi

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

IN THE ARTICLES