In Delphi XE2 FireMonkey - How do i change the color of a button after pressing it

Question

I just want to change the color of a button after I press it.

Do I have to use "styles" to do this or....?

Solution 1

You can change the button.StyleLookup property to change the style (color).

You need to add a new style to the Stylebook.

1. Select 'Edit custom style ...' in the Right mouse button menu from a button.
2. Change the Fill.Color property from the TRectangle items under the background:TRectangle
3. Apply and Close Stylebook
4. Clear button.stylelookup
5. Change the button.stylelookup in your buttonclick to the new create style, when you didn't change the name its Button1Style1

Solution 2

Using Styles

An alternative to creating a different style and switching to that new style would be creating a custom style for the button and changing the color in that style at run time.

1. Right-click the button and select 'Edit custom style...' from the main menu.
2. Click Apply and Close in the style editor.

You've just created a custom style for the button. So when you edit it at run time, it will only affect that button.

Now, enter the following in your OnClick event to change the color at run time:

  var
    r: TRectangle;
  begin
    // Find the background TRectangle style element for the button
    r := (Button1.FindStyleResource('background') as TRectangle);
    if Assigned(r) then
    begin
      r.Fill.Color := claBlue;
    end;
  end;

Note: Add FMX.Objects to your uses clause if you don't already have it. That's where TRectangle is.

But wait...

You'll notice that the button's color changes back to the default when the mouse leave or enters the button. That's due to the animations. If you set the stylename properties for both of the TColorAnimation style elements in the style editor for the custom style, you can also set the color on those. For my example, I've named the TColorAnimations coloranimation1 and coloranimation2.

Here's the revised code:

var
  r: TRectangle;
  ca: TColorAnimation;
begin
  // Find the background TRectangle style element for the button
  r := (Button1.FindStyleResource('background') as TRectangle);
  if Assigned(r) then
  begin
    r.Fill.Color := claBlue;
  end;
  ca := (Button1.FindStyleResource('coloranimation1') as TColorAnimation);
  if Assigned(ca) then
  begin
    ca.StartValue := claBlue;
  end;
  ca := (Button1.FindStyleResource('coloranimation2') as TColorAnimation);
  if Assigned(ca) then
  begin
    ca.StopValue := claBlue;
  end;

Note: Add FMX.Ani to your uses clause for TColorAnimation.

Comments

[Mike Sutton]

To clarify: do you want the button to change colour while pressed, and revert afterwards, or change colour permanently after it has been pressed (like a speedbutton which is 'down') - and if so when does it reset to the original colour?

[Arjen van der Spek]

This is working as long as the mouse cursor is above the button. Moving the cursor away changed the color to the original one. But maybe I misunderstood the question.

[Marcus Adams]

@Arjen, you're right. This works for most style elements, but the focus animations are restoring the default color after the mouse leaves.

[Marcus Adams]

I've updated my answer to include updating the animations also.

[Arjen van der Spek]

Nooo, don't do that this way. Sorry Marcus, but this code is not working on the default style. There are many different button-styles. For example: MacBlue, only GradientAnimation or Ruby, FloatAnimation and 2 rectangle. Both styles don't have coloranimation. Don't hardcode style changes in your code but use the Stylebook for that.

[Marcus Adams]

@tondog, if you don't need the flexibility of being able to choose the color at run time, do it the way Arjen suggests, it's easier. I just posted my answer so that you could see another approach that might suit you. In my application, the user chooses the colors.

[Jerry Dodge]

In Delphi XE8 this doesn't exist - there is no TRectangle in the button styles, just TStyleContainer , TButtonStyleObject, TGlyph, TButtonStyleTextObject, and a TImage.

[Soon Santos]

In Delphi 10.3 I needed to add the TRectangle, since it does not exist by default.