Create a custom button in firemonkey, for use on IOS

Hi all,

I need to create a mobile application that is skinned according to a design from a customer. This means I cannot use the standard TButton look and feel.

I'm in need of a button that is created out of 2 bitmaps: 1 for the pressed state, 1 for the depressed state. My firemonkey knowledge is lacking here, so I'm at a loss. How would I start with this? Preferably a reuseable solution please.


Best regards,

Jan Jacobs
0
Jan
10/16/2013 3:56:21 PM
embarcadero.delphi.firemonkey 4901 articles. 4 followers. Follow

3 Replies
1205 Views

Similar Articles

[PageSpeed] 0

> {quote:title=Jan Jacobs wrote:}{quote}
> Hi all,
> 
> I need to create a mobile application that is skinned according to a design from a customer. This means I cannot use the standard TButton look and feel.
> 
> I'm in need of a button that is created out of 2 bitmaps: 1 for the pressed state, 1 for the depressed state. My firemonkey knowledge is lacking here, so I'm at a loss. How would I start with this? Preferably a reuseable solution please.
> 
> 
> Best regards,
> 
> Jan Jacobs

Hi Jan,
What you're looking to do is use what's known as a bitmap style. There's a few ways you can go about this, and I'll do my best to cover those here.

The first method is using a full bitmap that contains all the style elemnts you want to use. You'd then define 'subimages', which are basically areas on the image that you define for each element. For example, you'd have a subimage for each button state, a subimage for edits, a subimage for memos, etc. You'd basically be defining a bounding area for each element. If you load a stylebook into a blank firemonkey application, you should find an image, and if you click through each element in the stylebook, y
ou'd be able to see the 'coordinates' for each element. I believe there's a bitmap style editor shipped ever since Firemonkey was updated to support such styles in XE3 but I've never personally used it.

The second route is by creating individual images for each element. I personally prefer this method as it allows me to create only a small number of images instead of one large one (which is more difficult for me to keep track of -- personal opinion and choice). You create the images for each state. Then, add a button to your blank application, right-click it, and select 'Edit Default Style'. This should load up the stylebook editor. From here, select the ButtonStyle item in the list. You should see a few
 different subitems appear.

Basically, you can completely destroy the structure of that if you want, and then add your own layout with image children. Set all images hittest property to 'false', set your 'normal state' image opacity to 1.0, and your 'pressed state' image opacity to 0.0. Then, add a TFloatAnimation child to the 'pressed state' image, set it's Property value to 'opacity', it's trigger to 'IsPressed=True', and it's TriggerInverse to 'IsPressed=False' (or, if instead of a pressed state, you've got a MouseOver state, set
 the trigger to 'IsMouseOver=True' and the TriggerInverse to 'IsMouseOver=False'). Then, set the StartValue to 0.0, the StopValue to 1.0, AutoReverse to True, and AnimationType to atInOut. Set the duration to whatever is suitable for you (the default of 0.2 means that the animation will take 0.2 seconds to complete from start to finish). Now, repeat this step for the 'normal state' image, except switch the StartValue and StopValue.

The third route, which doesn't use images, is the same as the second route except you use the primitive shapes of firemonkey to create your image. You can create gradients and such with the fill property of the shapes.

As I said, I personally prefer the second route as it's the way things worked with XE2 and that's the time when I really settled into Delphi - I still dislike the bitmap design style mentioned in the first route, but again that's just personal preference. I understand there's a lot to take in there, but you should be able to see what I'm talking about once you get into the stylebook itself. Once you practice it a few times, you'll find it's pretty simple. 

Moving away a little, there's a LOT of power behind the style element of Firemonkey itself. I say this as someone who puts UI and UX above all else -- if the UI looks impressive, and the UX is fluid, then even an otherwise bad application will be a little more favourable to end users. I've personally never used a completely custom style for the basic elements, but I have created custom 'hybrid components' by simply taking different basic elements and combining them into a single stylebook element. I then 
used the 'FindStyleElement' (Or 'FindBinding' if you're using XE2) routine along with some basic typecasting - for example, changing the opacity of a button within one of these 'hybrids';
{code}
MyMinimizeButton := (MyObject.FindStyleElement('MinimizeButton') as TButton);
MyMinimizeButton.Opacity := 0.5;
{code}
....in order to change the various properties of one of the child elements within the hybrid. By all means, you can do the same by simply dragging and dropping them on the form themselves and setting parent as appropriate, but by using a stylebook, I can change a large number of hybrids at the same time. This method meant I was able to build a bar graph styled to fit with my application (by simply using TRectangles, TLines, and changing the height of each rectangle as appropriate).
0
Scott
10/16/2013 6:55:32 PM
Hi Scott,

does this work in an iOS firemonkey app under XE5?


Best regards;

Jan


> {quote:title=Scott Pritchard wrote:}{quote}
> > {quote:title=Jan Jacobs wrote:}{quote}
> > Hi all,
> > 
> > I need to create a mobile application that is skinned according to a design from a customer. This means I cannot use the standard TButton look and feel.
> > 
> > I'm in need of a button that is created out of 2 bitmaps: 1 for the pressed state, 1 for the depressed state. My firemonkey knowledge is lacking here, so I'm at a loss. How would I start with this? Preferably a reuseable solution please.
> > 
> > 
> > Best regards,
> > 
> > Jan Jacobs
> 
> Hi Jan,
> What you're looking to do is use what's known as a bitmap style. There's a few ways you can go about this, and I'll do my best to cover those here.
> 
> The first method is using a full bitmap that contains all the style elemnts you want to use. You'd then define 'subimages', which are basically areas on the image that you define for each element. For example, you'd have a subimage for each button state, a subimage for edits, a subimage for memos, etc. You'd basically be defining a bounding area for each element. If you load a stylebook into a blank firemonkey application, you should find an image, and if you click through each element in the stylebook,
 you'd be able to see the 'coordinates' for each element. I believe there's a bitmap style editor shipped ever since Firemonkey was updated to support such styles in XE3 but I've never personally used it.
> 
> The second route is by creating individual images for each element. I personally prefer this method as it allows me to create only a small number of images instead of one large one (which is more difficult for me to keep track of -- personal opinion and choice). You create the images for each state. Then, add a button to your blank application, right-click it, and select 'Edit Default Style'. This should load up the stylebook editor. From here, select the ButtonStyle item in the list. You should see a f
ew different subitems appear.
> 
> Basically, you can completely destroy the structure of that if you want, and then add your own layout with image children. Set all images hittest property to 'false', set your 'normal state' image opacity to 1.0, and your 'pressed state' image opacity to 0.0. Then, add a TFloatAnimation child to the 'pressed state' image, set it's Property value to 'opacity', it's trigger to 'IsPressed=True', and it's TriggerInverse to 'IsPressed=False' (or, if instead of a pressed state, you've got a MouseOver state, s
et the trigger to 'IsMouseOver=True' and the TriggerInverse to 'IsMouseOver=False'). Then, set the StartValue to 0.0, the StopValue to 1.0, AutoReverse to True, and AnimationType to atInOut. Set the duration to whatever is suitable for you (the default of 0.2 means that the animation will take 0.2 seconds to complete from start to finish). Now, repeat this step for the 'normal state' image, except switch the StartValue and StopValue.
> 
> The third route, which doesn't use images, is the same as the second route except you use the primitive shapes of firemonkey to create your image. You can create gradients and such with the fill property of the shapes.
> 
> As I said, I personally prefer the second route as it's the way things worked with XE2 and that's the time when I really settled into Delphi - I still dislike the bitmap design style mentioned in the first route, but again that's just personal preference. I understand there's a lot to take in there, but you should be able to see what I'm talking about once you get into the stylebook itself. Once you practice it a few times, you'll find it's pretty simple. 
> 
> Moving away a little, there's a LOT of power behind the style element of Firemonkey itself. I say this as someone who puts UI and UX above all else -- if the UI looks impressive, and the UX is fluid, then even an otherwise bad application will be a little more favourable to end users. I've personally never used a completely custom style for the basic elements, but I have created custom 'hybrid components' by simply taking different basic elements and combining them into a single stylebook element. I the
n used the 'FindStyleElement' (Or 'FindBinding' if you're using XE2) routine along with some basic typecasting - for example, changing the opacity of a button within one of these 'hybrids';
> {code}
> MyMinimizeButton := (MyObject.FindStyleElement('MinimizeButton') as TButton);
> MyMinimizeButton.Opacity := 0.5;
> {code}
> ...in order to change the various properties of one of the child elements within the hybrid. By all means, you can do the same by simply dragging and dropping them on the form themselves and setting parent as appropriate, but by using a stylebook, I can change a large number of hybrids at the same time. This method meant I was able to build a bar graph styled to fit with my application (by simply using TRectangles, TLines, and changing the height of each rectangle as appropriate).
0
Jan
10/18/2013 2:29:29 PM
Anyone else who would know a solution for IOS?


> {quote:title=Jan Jacobs wrote:}{quote}
> Hi Scott,
> 
> does this work in an iOS firemonkey app under XE5?
> 
> 
> Best regards;
> 
> Jan
> 
> 
> > {quote:title=Scott Pritchard wrote:}{quote}
> > > {quote:title=Jan Jacobs wrote:}{quote}
> > > Hi all,
> > > 
> > > I need to create a mobile application that is skinned according to a design from a customer. This means I cannot use the standard TButton look and feel.
> > > 
> > > I'm in need of a button that is created out of 2 bitmaps: 1 for the pressed state, 1 for the depressed state. My firemonkey knowledge is lacking here, so I'm at a loss. How would I start with this? Preferably a reuseable solution please.
> > > 
> > > 
> > > Best regards,
> > > 
> > > Jan Jacobs
> > 
> > Hi Jan,
> > What you're looking to do is use what's known as a bitmap style. There's a few ways you can go about this, and I'll do my best to cover those here.
> > 
> > The first method is using a full bitmap that contains all the style elemnts you want to use. You'd then define 'subimages', which are basically areas on the image that you define for each element. For example, you'd have a subimage for each button state, a subimage for edits, a subimage for memos, etc. You'd basically be defining a bounding area for each element. If you load a stylebook into a blank firemonkey application, you should find an image, and if you click through each element in the styleboo
k, you'd be able to see the 'coordinates' for each element. I believe there's a bitmap style editor shipped ever since Firemonkey was updated to support such styles in XE3 but I've never personally used it.
> > 
> > The second route is by creating individual images for each element. I personally prefer this method as it allows me to create only a small number of images instead of one large one (which is more difficult for me to keep track of -- personal opinion and choice). You create the images for each state. Then, add a button to your blank application, right-click it, and select 'Edit Default Style'. This should load up the stylebook editor. From here, select the ButtonStyle item in the list. You should see a
 few different subitems appear.
> > 
> > Basically, you can completely destroy the structure of that if you want, and then add your own layout with image children. Set all images hittest property to 'false', set your 'normal state' image opacity to 1.0, and your 'pressed state' image opacity to 0.0. Then, add a TFloatAnimation child to the 'pressed state' image, set it's Property value to 'opacity', it's trigger to 'IsPressed=True', and it's TriggerInverse to 'IsPressed=False' (or, if instead of a pressed state, you've got a MouseOver state,
 set the trigger to 'IsMouseOver=True' and the TriggerInverse to 'IsMouseOver=False'). Then, set the StartValue to 0.0, the StopValue to 1.0, AutoReverse to True, and AnimationType to atInOut. Set the duration to whatever is suitable for you (the default of 0.2 means that the animation will take 0.2 seconds to complete from start to finish). Now, repeat this step for the 'normal state' image, except switch the StartValue and StopValue.
> > 
> > The third route, which doesn't use images, is the same as the second route except you use the primitive shapes of firemonkey to create your image. You can create gradients and such with the fill property of the shapes.
> > 
> > As I said, I personally prefer the second route as it's the way things worked with XE2 and that's the time when I really settled into Delphi - I still dislike the bitmap design style mentioned in the first route, but again that's just personal preference. I understand there's a lot to take in there, but you should be able to see what I'm talking about once you get into the stylebook itself. Once you practice it a few times, you'll find it's pretty simple. 
> > 
> > Moving away a little, there's a LOT of power behind the style element of Firemonkey itself. I say this as someone who puts UI and UX above all else -- if the UI looks impressive, and the UX is fluid, then even an otherwise bad application will be a little more favourable to end users. I've personally never used a completely custom style for the basic elements, but I have created custom 'hybrid components' by simply taking different basic elements and combining them into a single stylebook element. I t
hen used the 'FindStyleElement' (Or 'FindBinding' if you're using XE2) routine along with some basic typecasting - for example, changing the opacity of a button within one of these 'hybrids';
> > {code}
> > MyMinimizeButton := (MyObject.FindStyleElement('MinimizeButton') as TButton);
> > MyMinimizeButton.Opacity := 0.5;
> > {code}
> > ...in order to change the various properties of one of the child elements within the hybrid. By all means, you can do the same by simply dragging and dropping them on the form themselves and setting parent as appropriate, but by using a stylebook, I can change a large number of hybrids at the same time. This method meant I was able to build a bar graph styled to fit with my application (by simply using TRectangles, TLines, and changing the height of each rectangle as appropriate).
0
Jan
10/25/2013 6:57:41 AM
Reply:

Similar Artilces:

How to create a custom ApplicationDelegate in iOS FireMonkey app?
In my quest to implement Apple Push Notifications (APNS), I have succeeded in getting the UIApplication and default ApplicationDelegate. UIApplication allows me to register and unregister the app for receiving RemoteNotifications. However, to implement APNS, I need to additional callbacks that are missing from the current UIApplicationDelegate class (from my xcode project, I have the following methods defined in my appdelegate.m file) - (void)application:(UIApplication*)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData*)deviceToken - (void)application:(UIApplica...

Delphi XE8 FireMonkey iOS Style problem with segmented buttons
Hi, Going through some tutorials to get used to mobile development using FireMonkey and Delphi XE8. One of the most basic layouts tend to use the toolbar component with segmented speed buttons, and then applying the correct segmented style to each button. However, there seems to be an issue with the iOS style. ...

Delphi XE8 FireMonkey iOS Style problem with segmented buttons [Edit]
Hi, Going through some tutorials to get used to mobile development using FireMonkey and Delphi XE8. One of the most basic layouts tend to use the toolbar component with segmented speed buttons, and then applying the correct segmented style to each button. However, there seems to be an issue with the iOS style. [Screenshot.|https://drive.google.com/file/d/0B68Ju-patBf-RVVEMmI5UDd2cG8/view?usp=sharing] Using the "segmentedbuttonleft", "segmentedbuttonmiddle", and "segmentedbuttonright" styles is producing an extra border on the right button in iOS. It seems...

Installing components for FireMonkey HD and FireMonkey iOS
Hi, How do I install components for both FireMonkey HD and FireMonkey iOS? I have one package 'FMXMyFireMonkeyControl' and 'FMIFireMonkeyControl' which both point to the same file with the same registration 'TFireMonkeyControl'. If I compile one package (FMXMyFireMonkeyControl) it installs correctly, then change the include file (FMCompile.INC) to compile for IOS (FMIFireMonkeyControl) which is included in the FMX.FireMonkeyControl.pas file: {$I FMCOMPILE.INC} uses {$IFDEF COMPILEIOS} FMX_Types, FMX_Objects, FMX_Forms, FMX_Dialogs, FMX_Effe...

Delphi XE4 - Firemonkey
I have an application that runs fine on windows, however when running on iOS simulator the onKeyUp event for a TEdit control is not being fired? Please advise if this event should get fired when running on iOS? This problem occurs onKeyUp events created directly on the control and by assigning the event programatically. Running XE4 update 1 iPhoneOS6.1.sdk Minimac: OS X 10.9 XCode 5 iOS Simulator Version 7.0 - iPad Retina / iOS 7.0.3(11B508) ...

Delphi, Firemonkey, IOS, and TCP howto?
I was really excited about the new ability to compile IOS apps written in Delphi, but I'm starting to find some major limitations, unless I'm really overlooking something. I want to write an iphone/pad app that needs to retrieve data from a socket connection, or from a webpage (http, webservice, anything). It seems that all of the Firemonkey internet and indy components are not supported within xcode. Am I overlooking something here, or is this a feature that will not be implemented, or is it planned to be implemented? If this kind of communication is not supported, this is a hu...

Is It possible to use UIImagePickerController (iOS) in FireMonkey ?
Is It possible to use UIImagePickerController (iOS) in FireMonkey ? // Here is the sample code in wrong way ---------------------------------- // Woule you teach me in right direction ? Uses .... , iPhoneAll; .... procedure TForm1.Button2Click(Sender: TObject); var ipc : UIImagePickerController; begin // Here is the sample code in wrong way // ipc := UIImagePickerController.alloc.init; ipc.setDelegate(0); ipc.setAllowsEditing(True); ipc.setsourceType(UIImagePickerControllerSourceTypeCamera); //ipc.showmodal; //showmodal(ipc); //presentModalViewController_...

Using CoreLocation Framework on Firemonkey for ios
How can I use CoreLocation Framework ? I could not do this , can somebody help me please ? *Bunyamin Atak* On 10/13/2011 1:25 AM, bünyamin atak wrote: > How can I use CoreLocation Framework ? > > I could not do this , can somebody help me please ? Download the FPC header parser (top link on this page): http://web.me.com/macpgmr/ObjP/Xcode4/iOS_Parsing_Status.html Use the appropriate "parse-*" to parse CoreLocation. Then either follow the directions to compile and link, or simply add the CoreLocation.pas and "corelocation" directory...

Ann: FastReport FMX for Delphi XE3 (FireMonkey 2) and XE2 (FireMonkey) released
Dear friends, Visual report designer is available now on both MS Windows and MAC OS X! Full sources. We can write here full list of possibilities, but it will so long. Let see FastReport VCL and FastReport FMX comparison table: http://www.fast-report.com/en/products/comparison-fast-report-firemonkey-vcl.html And all of this - just now in your hands for business-applications for Mac. Report generator FastReport FMX is the first multiplatform solution for including Business Intelligence into software based on Embarcadero FireMonkey IDE (Delphi for MS Windows and Apple Mac OS X)...

Create Custom Button using View Designer
I am using view designer to design a Mail Item View that will include a custom button that when clicked will send mail as confidential. Essentially by clicking the button the classification "confidential" under Send opens is selected and the mail is then sent. Does anyone know how this can be done? Can a macro be used for this? Thanks -- johnefleming ------------------------------------------------------------------------ johnefleming, It appears that in the past few days you have not received a response to your posting. That concerns us, and has tri...

How do I best use forms in iOS firemonkey apps?
Sorry for asking a daft question, but the demos I have seen seem to have a kind of tab/page control with invisible tabs. Hence the form never actually changes. (Just the active tabitem) Should I do like that? Or should I create a separate form for each window/form/activity? (e.g. for memory usage?) Can anyone recommend any demo apps I cam use as a starting point for a simple info app? The choice is really yours as to whether you want to use tab controls or forms for subsequent pages. Tab controls can be set to give the users the additional tabs to navigate through. Thomas Schulz ...

CalendarEdit in XE5 Firemonkey
I'm saving and loading data from a TCalendarEdit. I've noticed that if I use a date before 1960 (I haven't narrowed it down more than that) I can end up in the wrong century when I load the data. Here's how I'm saving: {code} lINI := TMemINIFile.Create(TPath.GetDocumentsPath + PathDelim + 'Settings.ini'); lINI.WriteDate('Test', 'DOB', CalendarEdit1.Date); lINI.UpdateFile; {code} Here's how I'm loading: {code} lINI := TMemINIFile.Create(TPath.GetDocumentsPath + PathDelim + 'Settings.ini'); lDate := lINI.ReadDa...

how use custom font in firemonkey app for Android?
Hi everyone, i couldn't found any data about this question. If someone have it, please share it. ...

Use Firemonkey with iOS 6.0.1
My iPad was accidentally updated to iOS 6.0.1. So, Is it possible to use the latest xcode/iOS 6.0.1 with Firemonkey? My Mac is 10.7.5 Lion. Thanks Jose Carlos. Hi Jose, I had the same "problem", see http://www.bobswart.nl/Weblog/Blog.aspx?RootId=5:5536 Cheers! > {quote:title=Michiel van Ingen wrote:}{quote} > Hi Jose, > > I had the same "problem", see http://www.bobswart.nl/Weblog/Blog.aspx?RootId=5:5536 > > Cheers! Hi Michiel, I followed this blog, and now iOS 6.0 is available on Xcode but I have two issues: When I ...

Web resources about - Create a custom button in firemonkey, for use on IOS - embarcadero.delphi.firemonkey

Firemonkeys - GamesIndustry International
The world's leading games industry website. Get insight from todays industry leaders with news, interviews and analysis of global gaming trends. ...

Firemonkey’s Real Racing 3 To Launch At The End Of February
In September, Apple demoed Firemonkey’s Real Racing 3 at the iPhone 5 event . Three months later and the game has yet to show up in the App Store. ...

EA Games and Firemonkey Bringing Real Racing 3 to Android, Fasten your Seat Belts
Start up your engines race fans, EA Games is teaming up with Firemonkey to bring Real Racing 3 to mobile devices. If you’re a fan of more realistic ...

EA's Firemint and IronMonkey Studios Merge to Become FireMonkeys
... game development studios into one mega-studio in Australia. Firemint and IronMonkeys will be merged into a single studio now known as Firemonkeys ...

News: Firemonkeys announces Real Racing 3
Firemonkeys, a new gaming subsidiary of Electronic Arts born from the merger of FireMint and IronMonkey, has announced the coming release of ...

firemonkeys - iMore
EA has pushed out another impressive update to its equally impressive iOS racer, Real Racing 3, that for the first time brings cars from Ferrari ...

Firemonkeys on Real Racing 3 going free-to-play
... got a hands-on preview of Real Racing 3. We also spoke with Ptolemy Oberin, one of the game’s programmers and project lead at developer Firemonkeys, ...

Real Racing 3 coming in 2012 from Firemonkeys
The first game from recently merged developer Firemonkeys is Real Racing 3 , the developer revealed moments ago during EA's Summer Showcase event ...

Firemonkeys Previews Real Racing 3 for iPhone and iPad
Firemonkeys, the new combined studio from EA combining the IronMonkey and Firemint gaming studios, has announced the development of Real Racing ...

EA Mobile Moves: IronMonkey & Firemint Merge Into “Firemonkeys,” Now Have 50M Players Between
... that it is merging two top mobile game studios, IronMonkey and Firemint , which will fittingly combine to create a new company, called Firemonkeys. ...

Resources last updated: 1/13/2016 5:44:51 PM