Have an amazing solution built in RAD Studio? Let us know. Looking for discounts? Visit our Special Offers page!

Creating a profile screen for your mobile application

the future of starts demands massive productivity


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.



[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   Upgrade Today

   Free Delphi Community Edition   Free C++Builder Community Edition

About author

Director of Product Management, Developer Tools Idera, Inc.

Leave a Reply

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