-1

In Firemonkey, what's the "MAGIC" to make the buttons looks like below?

enter image description here

For me, most important is the size of the image and the layout of the text inside the button, but how to do this in firemonkey? What properties i have to confuigure? This was so easy in VCL.

I´m using speedbutton and imagelist, both in VCL and Firemonkey.

I'm having trouble with simple things like that :(

I do not even think when i have to do something more complex in firemonkey, almost returning to VCL, Sad.

Thanks.

Linces Marques
  • 644
  • 1
  • 10
  • 24
  • 1
    I struggled with this as well when moving from VCL to FMX. I also wanted a very specific look for my buttons. So I ended up putting a TImage as a child of the speedbutton and using the specific image I wanted for the button. If however you are picking standard actions you can use the in built styles. For mobile apps this is certainly the recommended way to go. – Rohit Apr 22 '17 at 10:37

3 Answers3

4

As Rohit says the best way is to use drop a TImage near your button, then use the Structure tree view to drag the TImage under your button. Set the HitTest of the TImage to false, and align to Client. Your button will invariably be 48x48 so you can load your image (let's say it's 512x512) using the Bitmap button once you click Add Item under MultiResBitmap of the TImage.

Structure View

Note if you want to make your image transparent, I found a wonderful online editor called Lunapic at http://www166.lunapic.com.

sandman
  • 2,050
  • 9
  • 17
3

Firemonkey has a great built-in styling system and even a styling system which works exactly as the regular Firemonkey or VCL Form-Designer.

Every Component has its own styling, which is defined in a TStyleBook Component. I recommend you, just adding a TStyleBook from the Component List to your Form and double clicking it. Delphi/RAD Studio will open the "Style Designer" where you can set default styles for every component you want. You can also define custom styles for the same component, so you can have use the regular TSpeedButton with your custom style which includes an extra TImage. To create a custom style for a TSpeedButton, just put a TSpeedButton on to your Form and press the right mouse button on it and then press something like "Edit Custom Style". (My RAD Studio is not on english)

To learn how you can make great visual and custom styles, you should read about it on Emba's Documentations. You can find them here: http://docwiki.embarcadero.com/RADStudio/Tokyo/en/Customizing_FireMonkey_Applications_with_Styles (Also take a look at the following links)

And of course, the best way to learn it, is just diving into it. It is not hard at all. ;)

Milos
  • 330
  • 1
  • 9
1

In addition to other answers, I suggest you to use TRectangle for each kind of visual components. You can create a new custom component using TRectangle, TImage and TLabel together. Or you can just use them together in each component for everytime.

With TRectangle, you can manage radius, corners, stroke, background colors etc. The only thing you have to know that be sure your TRectangle components' HitTest parameters are active and inner components' (TImage and TLabel) parameters are not active.

Abdullah Ilgaz
  • 719
  • 1
  • 17
  • 39
  • Using a TRectangle isn't preventing to use, for instance, a TAction connected to the control? This would lead to have to manage a range of controls which Delphi does natively. – Marco Carboni Oct 23 '18 at 08:05