Mobile Tutorial: Using a Button Component with Different Styles (iOS and Android)
Buttons in Mobile Platforms
Following are some examples of different styles with Button components available for you to use in different parts of the user interface of your application:
- Buttons on the Form:
- Buttons on the Navigation Bar (also known as Toolbar):
Define the Look and Feel for a Button Component
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.
- To create a colored button, change the values of the TintColor and IconTintColor properties. The latter property is available only for styled buttons with icons.
Using TintColor on Buttons
- TintColor specifies the button background color.
- IconTintColor specifies the color of the icon on styled buttons.
The TintColor and IconTintColor properties are only available in the Object Inspector if you select a proper Style for the button and select a proper View in the Form Designer (these properties are not visible in all Views).
For the Android target platform:
You can apply a tint to most buttons of any style:
- For speed buttons, you need to select a proper StyleLookup value in order to change the TintColor value in the Object Inspector.
- To modify TintColor and IconTintColor, choose an Android device from the Views list in the upper right.
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 7, segmented buttons have the TintColor property. (On iOS 6, the segmented buttons do not support the tint feature.)
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:
Placing an Image over a Button
Appmethod allows you to easily put custom images on button components at design time.
To place an image over a button:
- With a TButton and TImage component on the Form Designer, make TImage a child component of TButton. (Use the Structure View.)
- In the Object Inspector, select TImage and set its Align property to
- In the Structure View, select the button, expand the Image node, and then click 0 - Empty (1.000).
- In the Object Inspector, click the ellipsis button (...) next to Bitmap.
- Add your custom image in the MultiResBitmap Editor.
- In the Object Inspector, select TButton, and do the following:
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.
To define a Segmented Control, use the following steps:
- Place three TSpeedButton components from the Tool Palette. Place the TSpeedButton components next to each other using your mouse:
- Select the first component, and change its StyleLookup property to segmentedbuttonleft:
- Select the second component, and change its StyleLookup property to segmentedbuttonmiddle.
- Select the third component, and change its StyleLookup property to segmentedbuttonright. Now all three buttons look like a Segmented Control:
- Select each component, and change the Text property as you like:
- Use the mouse to select these three buttons:
- Set the GroupName property to a unique name such as LocationSegments:
- To specify that one of these components is to appear as Pressed by default, set the IsPressed property for one component to True:
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:
- Mobile Tutorial: Creating an Application for Mobile Platforms (iOS and Android)
- Mobile Tutorial: Using a Calendar Component to Pick a Date (iOS and Android)
- Android Mobile Application Development
- FMX.Mobile.Controls Sample (Object Pascal)