RAD Studio is the fastest, easiest, most powerful way to create cross-platform apps and it can do anything any other framework can do. To prove how good RAD Studio with Delphi is I recreated the user interface of an award-winning social media platform, in four hours from start to finish. Oh, and the app runs on Windows, macOS, iOS, and Android, from the same code base. When the app is running it is hard to tell the visual difference from the original. It’s actually a tutorial in user interface design but also a superb endorsement of why I believe using anything other than RAD Studio is simply doing it the hard way.
Table of Contents
Why did I choose a social media app as a learning tool?
Social media is very much part of many people’s lives. Meta does a fabulous job with their apps and, arguably, lead the pack in many areas. Facebook, Telegram, Threads, Instagram are used by billions of people around the world. The user interfaces created by Meta’s meticulous design team are intuitive and make sharing and communicating with others really straight-forward. Whether you are a fan or not, Meta does fulfil Marc Zuckerburg’s assertions that their primary mission is to connect the world together.
When you create apps at the scale Meta does, they absolutely must be intuitive so that using them has almost no ‘learning curve’ at all, and they need to work the same on every device. We can learn a lot about UI and UX design by taking a look at how their apps work – and it’s actually pretty easy to create a similar user interface using RAD Studio.
Before we get started, I want to make it absolutely clear that this is a tutorial which is an examination of how to create an interface similar in appearance to Instagram. Meta has nothing to do with this tutorial and we don’t claim any ownership and fully recognize their various trademarks. This is not a “how to create a fake clone of Instagram” lesson.
First, let’s use AI to create a cool, professional-looking logo for our Delphi app
One of the particular strengths of AI I find is the ability to create really professional-looking graphic assets for your apps. I personally use the Copilot AI feature in Microsoft Edge quite often now. So, I asked it “create an icon for a social media app”. The Copilot AI absolutely delivered!
With a couple of clicks I was able to save the icon. If this was an actual commercial app, I would probably have asked Copilot to generate a new social media AI image because, to me, the “thumbs up” symbols appeared a little too close to Facebook’s ‘like’ symbol. For a tutorial like this I think it’s ok.
How to quickly create the basic outline of a mobile app in seconds using RAD Studio with Delphi?
RAD Studio has dozens of ready-made quick start things built in. Let’s make use of that and select file–>new–>multi-device application from the main RAD Studio menu.
This will offer you a selection of templates – skeleton apps which you can use as the basis of your own apps. Choose ‘Tabbed with navigation’ from that selection. I think it offers the kind of layout we are looking for.
How to tweak the mobile app template to make it more like our desired UI
The template is great, but in order to get the look we are seeking we need to change a few settings. First, save the project in a new folder. Give it an appropriate name. In the tutorial webinar I chose ‘Instantgran‘ which I thought was a clever play on words until MVP Dave Nottage pointed out I should have called it ‘Ianstagram‘, which is SO much better!
With the project saved, let’s change a few component properties. In the final app we want to have our navigation buttons always at the bottom. Not only that we also want to do some cool things with them that do not exist in the original Instagram app, including an animated profile picture! I recommend that when you’re designing user interfaces, especially mobile apps using Firemonkey FMX, you display the Structure window and dock it somewhere (I put it on the left). It makes it much easier to select the components correctly and allows you to drag elements around when you want them to be the parent or child of another control.
Now, in the structure pane, select “TabControl1“. In the object inspector, select the TabPosition property and change it to say None. This will have the effect of turning off the tabs but keeping the tabcontrol as a container for our content and the vessel for the navigation.
We’re removing the automatic tab buttons so we can replace them with our own custom buttons which have some more flexible properties.
How to create an automatically scaling row of custom buttons in the Delphi mobile app?
Now that we have turned off the tabs we’re actually going to need to put some buttons on the bottom of the app to replace the automatic tab buttons. From the tool palette select the Layouts section and then choose a TGridPanelLayout control. This is going to hold out buttons and replace the automatic tab buttons of the TTabControl.
This control works by having an invisible grid with rows and columns. You can set the number of rows and columns and then assign controls to the ‘cells’ formed by the rows and columns. We want one row of five columns.
Drop the TGridPanelLayout control on the form, and set the Align property to Bottom. This should make the control stick to the bottom of the form. You also need to double-click on the ColumnCollection property. This will display a small editor. Use the ‘add’ and ‘delete’ buttons to create or remove column items until you have five columns. Try to set each of the column sizes to as near as 20% as you can get (this editor is a little suboptimal so you might not get it exactly 20%). Make sure the Size Type property is set to Percent.
Now close that editor and double-click on the RowCollection property and make it only have one row with the Percent value set to 100%. This has the effect of creating a single row of controls with five spaces for controls, each evenly spaced. If the app’s screen is resized in any way the row of buttons will scale and resize with it in a pleasingly aesthetic way.
How to create the compound buttons in the Delphi social media app?
We could use a FireMonkey style to very quickly enhance the look and feel of the user interface which is one of RAD Studio’s great strengths. In fact, this is definitely the preferred way, it saves a ton of time and instantly gives your app a really polished, professional look to it. However, in order to get the greatest control over the look and feel of the buttons and add some additional functionality I chose not to use a style. I could have still stuck with using a FireMonkey style and maybe used the style editor to create a custom style of my own but I wanted to take the ‘quick and dirty‘ route by taking advantage of the fact any FireMonkey control can be the parent of other FireMonkey controls.
From the control palette select a TButton and drop it onto the TGridPanelLayout. Now the magic part. From the control palette select a TRectangle shape control. In the structure panel, click on the new rectangle control and drag it until it is on top of the button control you just created. When you drop it the rectangle should appear as a child control of the button. Now select and drop TskSVG control from the Skia section of the control palette onto the same button. Drag and move the controls around until the button is the parent and the rectangle and SVG controls are the children of the button (not each other). Double click on the SVG control’s SVG–>SVG Source property and select an appropriate SVG graphic for it. In the webinar I got my example graphics from svgrepo.com where I found lots of suitable graphics.
Click on the rectangle in the structure pane, and press F11 to show the object inspector. Change the Fill property of the rectangle to be Black. Change the Hit Test property to be false for the rectangle. Then set the SVG control’s Hit Test property to false too. We do this so that the only control that will respond to clicks is the button, not the child rectangle and SVG control. As a finishing touch, right click on the rectangle in the structure pane and select Control–>Send To Back. Right-click on the SVG control and select Control–>Bring To Front. Change the Align property of the rectangle to Client and the Margins property to all zeroes. Change the Fill and Stroke properties so the Color of both is Black.
For the SVG control change the Align property of the rectangle to Client and the Margins property to Bottom 5, Left 5, Right 5, top 10. This has the effect of constraining the SVG inside the black region of the rectangle and the whole button + rectangle + SVG has a black background.
Here’s a graphical summary of all that:
How did I create an animated profile button using RAD Studio with Delphi?
One nice little trick I added was a moving profile picture of me in the bottom right of the row of the buttons.
I thought this would add a little extra finesse to the app. It also goes a step further than the actual social media apps do too, which is nice. I made a short video of myself and then used the fantastic ScreenToGif tool to convert that to an animated GIF. This time, instead of a TskSVG image control I used another Skia control, an TskAnimatedImage. The incorporation of Skia directly into RAD Studio 12 adds some amazing features and the TskAnimatedImage is definitely one of my favorites. It makes adding powerful yet lightweight animations to your desktop and mobile apps really easy. The steps to do it are essentially the same as before, create a button, add a black rectangle to the button, add the animated image to the button too and set the properties. It’s really easy to do this kind of thing with RAD Studio and FireMonkey without even a single line of code – and it will work cross-platform too on Windows, macOS, Linux, iOS, and Android. The only other thing I did was drop a rounded rectangle on top of the animated image so that it had a rounded bokeh type effect to it (although it doesn’t show up that well with my particular image).
What about the rest of the Delphi app user interface?
The rest of the app is pretty much more of the same. You can copy and paste the first button to save time. Once they the toolbar row is created you need to assign the created buttons to the rows and grids of the TGridPanelLayout control’s ControlCollection property.
This will make the buttons ‘belong’ to the gridpanellayout control. Now when the app resizes to fit the screen everything will scale nicely. The rest is easy!
Where can I find out about the functionality of the server-side of the social media app?
I am going to create the actual functionality of the app in an upcoming webinar. We’re going to use Appercept’s AWS SDK and controls for Delphi in a coding session with Richard Hatherall from Appercept. If you haven’t taken a look at Appercept’s controls you really should. There is a free Embarcadero version which comes included with RAD Studio 12 Enterprise and Architect. We’re going to have a few sessions with Richard.
Where can I find the replay of the How To Recreate A Social Media App Using RAD Studio webinar?
Here is the full replay of the webinar:
Where can I find the slides for the How To Recreate A Social Media App Using RAD Studio webinar?
Here are the slides.
