ToolBar Background Color And Scrolling Marquee Demo For Delphi XE7 Firemonkey On Android And IOS

I put together this demo for Delphi XE7 Firemonkey to demonstrate a few different Firemonkey features. In this demo I show how to make a scrolling marquee using the built in components and how to add colors to your application. There are two different methods shown for adding color to a TToolBar component and three different ways you can use gradients. This demo should compile and work on Android, IOS, Windows, and OSX. Additionally, it should compile in Appmethod as well.

At the top of the demo there is a dark blue TToolBar. You can do this by modifying the style. Drop the TToolBar on the form. Right click it and select Edit Custom Style…. You should see a toolbar1style1: TStyleObject in the Struction window. Find TRectangle in the Tool Palette. Drag and drop the TRectangle onto the toolbar1style1 line in the Structure window. It should add a TRectangle to your style. Set the Align to Contents. Set the Fill color to what you want. Set the Stroke.Kind to None. Apply and Close.

The next component at the top which contains the scrolling marque text is also a TToolBar component. However, the method for applying the color is different than the style method. In Firemonkey most components can be contained within most other components. Place a TRectangle inside of your TToolBar component. Align it to Contents. Change the Fill color to the color you want. Change the Stroke.Kind property to None. I believe the TRectangle method of coloring objects is more maintainable and forward compatible.

The scrolling marquee is achieved by dropping a TFloatAnimation on top of a TLabel component and setting some properties like Loop plus some code. The TFloatAnimation fires at an interval of one and changes the TLabel.Position.X property from TFloatAnimation.StartValue to TFloatAnimation.StopValue. StartValue is set to TToolBar.Width (the far right of the screen). StopValue is set to zero minus the TLabel.Width. This moves the TLabel from the far right all the way off the screen to the left. The TFloatAnimation.Loop proper causes the animation to start again from the beginning.

The last component which I set up is a TTabControl with three tabs. On each TTabItem I placed a TRectangle set to Align Client. In the first tab I setup a Gradient on TRectangle.Fill and it is a radial gradient as you can see in the screenshot. In the second tab I used a TRectangle.Fill with a TGradientAnimation object to make the gradient switch from one direct to another and back again. On the last TTabItem there is a TRectangle.Fill linear gradient from the top of the screen to the bottom.

Download the full source code for this TToolBar background color and scrolling text marquee demo for Delphi XE7 Firemonkey.