Watch, Follow, &
Connect with Us

For forums, blogs and more please visit our
Developer Tools Community.


Welcome, Guest
Guest Settings
Help

Thread: How to stretch an image inside a Button to the whole area of imagebutton?


This question is answered. Helpful answers available: 2. Correct answers available: 1.


Permlink Replies: 1 - Last Post: Nov 12, 2015 8:32 AM Last Post By: Anupama Annambh...
Anupama Annambh...

Posts: 24
Registered: 1/16/15
How to stretch an image inside a Button to the whole area of imagebutton?  
Click to report abuse...   Click to reply to this thread Reply
  Posted: Nov 3, 2015 4:55 PM
I am trying to implement iOS style icons in the menu where the UI element is a
- a rounded square icon that is clickable.
- has an image that spans the whole button area. Not just a portion of it.
- the image changes when that UI element is tapped or clicked on taking it to enabled state.(and changes back again when it is in disabled state)
- most importantly, the button boundaries should not be visible when user taps on it.

Example is in this URL http://www.shutterstock.com/pic-139909057/stock-vector-set-of-blank-black-square-buttons-for-website-or-app-vector-eps.html
Except that there will be some icon also instead of plane solid background.

Exploring the FMX controls further narrows down to TSpeedButton / TButton/ TCornerButton.
All three have a property called HitTest = True which makes it clickable component.
All three have properties called Imagelist and Imageindex.

Implementation
I have dropped a ImagList1 component on to the form and added PNG images to it. Not sure if I am selecting height and width that is too small
And selected that as the value for the property Imagelist
Then I changed the ImageIndex value to 0, so that the default image is always on the button.
I am also able to programatically change the image on that button accordingly for enabled vs disabled states, by modifying the ImageIndex value

Issue
I am struggling to set the image to span the whole area of the button.

Searched through many Rad Studio Wiki documents for further insights. But I guess this is too in depth.
Any inputs on this is appreciated.

Thanks in advance
Anupama Annambh...

Posts: 24
Registered: 1/16/15
Re: How to stretch an image inside a Button to the whole area of imagebutton?  
Click to report abuse...   Click to reply to this thread Reply
  Posted: Nov 12, 2015 8:32 AM   in response to: Anupama Annambh... in response to: Anupama Annambh...
Applied Custom Style with Background TTintedButtonStyleObject
- Background aligned to 'Contents'
- Hit Test false
- Opacity 0

When the button is displayed, the image now spans all over the button.

In the form Design, the button's property Hit Test is still set to True.
When the button is tapped, the image changes/toggles automatically.
Legend
Helpful Answer (5 pts)
Correct Answer (10 pts)

Server Response from: ETNAJIVE02