Recap of what we have so far..

So, we have created some controls and a basic layout for our app's screen. We even applied a little bit of color to the rectangles.

But if we look at my version of the app's screen you can see that some of my controls have a cool drop shadow effect on them.

The power of FireMonkey FMX effects

The power of FireMonkey FMX (and, in fact, RAD Studio in general), is that you can achieve some wonderful things in your cross-platform apps with almost no code whatsoever.

For those drop shadows, we do not need to write a single line of code. We can use the built-in FireMonkey FMX effects.

FireMonkey FMX graphical effects

If you take a look at the tool palette you should see a section entitled "Effects". There are a lot there!

The effects change the appearance of its parent control. To use them you select one of the effects and drop it onto a control in the structure window.

Here's an example:

Adding shadows to some of our controls

Let's add a cool drop shadow effect to some of our controls.

Expand the structure window tree so that you can see all of the child elements like Label2 and so on.

Hit CTRL + ALT + P to select the tool palette. Now type in "shadow" to narrow down the list of controls so that only the shadow effect is displayed.

Click and hold the TShadowEffect and then drag and drop it onto the RoundRect1 component in the structure window.

The label control should show the shadow effect in the form designer.

Let's make the shadow look prettier

Let's tweak some of the settings so the shadow is more aesthetically pleasing.

In the structure view, click on the ShadowEffect1 entry - you can't actually click on the shadow in the form designer because effects do not have a physical control themselves.

The default shadow is ok, but let's make it take on more of a neumorphic look. In the object inspector, change the settings of the shadow so they match mine, like so:

When you're done, the label control should look like this:

(It looks much better in the form designer, and on your mobile device than it does in this tutorial!)

Applying shadows to other controls in our "doing it the hard way" app

Ok, let's apply the same shadow effect to a few other controls. We don't want it to apply to everything (if we did, we could have dropped the shadow effect on the outermost parent control Layout1).

Right click on the ShadowEffect1 shadow effect in the structure view. A menu should appear. One of the entries is Edit. Click on that and then select Copy.

You have now got a copy of the shadow effect in your Windows clipboard.

To apply it to other controls we just need to right click on them in structure view and select Edit and then Paste. RAD Studio will create a copy of our cool neumorphic shadow and apply to the control we selected.

Let's try that now - one by one, select Edit1, Switch1, and Image1 controls and paste a copy of the shadow effect onto them.