Mobile Tutorial: Using a Button Component with Different Styles (iOS and Android)

From Appmethod Topics
Jump to: navigation, search

Go Up to Mobile Tutorials: Mobile Application Development (iOS and Android)

Buttons in FireMonkey Mobile Applications

FireMonkey defines various types of buttons, and you can use these different types of buttons with the same steps described here. The FireMonkey buttons include TButton and TSpeedButton.

Following are some examples of different styles with Button components available for you to use in different parts of the user interface of your mobile application:

  • Buttons on the Form:
iOS 6 iOS 7 Android

Tint Buttons IOS6.png

Tint Buttons IOS7.png

Tint Buttons Android.png


IOS7 SegmentedControl.png

  • Buttons on the Navigation Bar (also known as Toolbar):
iOS 6 iOS 7 Android


IOS7 ToolBarAndBackButton.png



IOS7 ToolBarWithArrowButtons.png



IOS7 ToolBarCancelDoneButtons.png



IOS7 ToolBarWithPlusButton.png


IOS6 ToolBarWIthToolButtonIcons.png

IOS7 ToolBarWIthToolButtonIcons.png



IOS7 ScopeBar.png


Define the Look and Feel for a Button Component

After you place a new button on the FireMonkey Mobile Designer, you can specify some important properties for a selected component by using the Object Inspector.

Select a component (in this case, a button), and then browse and change the value of some properties as follows:

  • Change the text displayed on the button surface by updating the value of the Text property.
  • Change the value of the Position.X and Position.Y properties (or drag the component using your mouse.)
  • Change the value of the Height and/or Width properties (or drag the edge of the component using your mouse.)
  • Click the down-arrow in the StyleLookup property.
    In the StyleLookup drop-down list, you can select a predefined Style based on how your component is to be used:

  • To create a colored button, change the values of the Tint and IconTintColor properties. The latter property is available only for styled buttons with icons.

Using TintColor on Buttons

For TButton and TSpeedButton, FireMonkey provides two properties that determine how to tint or color the button:

  • TintColor specifies the button background color.
  • IconTintColor specifies the color of the icon on styled buttons.

For the Android target platform, you can apply a tint to buttons of any style.

For the iOS target platform, FireMonkey provides buttons that correspond to the Apple Style Guide, and some buttons might not support the tint feature. For example, on iOS 6, the segmented buttons do not support the tint feature, but on iOS 7, these buttons have the TintColor property.

When you change a button's StyleLookup property, the Object Inspector automatically displays or hides the TintColor and IconTintColor properties as appropriate. The following image shows three TSpeedButtons on an Android app:


Create a Segmented Control Using Button Components

FireMonkey uses a SpeedButton component to define the Segmented Control, which gives users the ability to select one value from several options.

iOS Android



To define a Segmented Control, use the following steps:

  1. Place three TSpeedButton components from the Tool Palette. Place the TSpeedButton components next to each other using your mouse:
iOS Android



  1. Select the first component, and change its StyleLookup property to segmentedbuttonleft:
iOS Android



  1. Select the second component, and change its StyleLookup property to segmentedbuttonmiddle.
  2. Select the third component, and change its StyleLookup property to segmentedbuttonright. Now all three buttons look like a Segmented Control:
iOS Android



  1. Select each component, and change the Text property as you like:
iOS Android



  1. Click and drag these three buttons to select these components:
iOS Android



  1. Set the GroupName property to a unique name such as LocationSegments:

  1. To specify that one of these components is to appear as Pressed by default, set the IsPressed property for one component to True:
iOS Android



Create a Scope Bar on a Toolbar Component

You can define a Segmented Control on a toolbar; this is also known as a Scope Bar, a segmented control that can be used to control the scope of a search.

Use the same TSpeedButton controls as in the previous steps, but with the following values for the StyleLookup property:

  • toolbuttonleft
  • toolbuttonmiddle
  • toolbuttonright
iOS Android



See Also