How to make a centered fixed image button (no text) - tried various approaches.

[eos]

Attempt 1 - button background

I tried making a button style and setting the border to empty and the background to the image. 

Problem - in simulator no image or button shows. If you add text, you get part of the image the height of the text.

Attempt 2.

Create a new button style with no border or background, derive from Button.

Create a new instance, and add the image as the icon.

Problem: the image is either fixed on the left or right of the container - no way to center.  

You lose part of the left side of the image.

Attempt 3.

Use a label with no text, and set the icon to the image. 

This seemed to work perfectly - centered and looks good.

But couldn't make it work to click on to generate an event - e.g. if you click on "Action Event" in designer, doesn't create one in code.

The image is not possible to make a 9 patch from due to the variying gradients etc.

Any ideas? i have spent probably 2 days trying to make a usable button from an image.

Thanks!

[eos]

In the end I did it with the 9 patch border system.   More work than just using an icon, so if anyone knows how to make a simple image clickable (with a pressed state and call an event), let me know.

[Thomas Chatfield]

Use a Button and set the icon. Button is derived from Label.

[Thomas Chatfield]

And you will need to set the button UIID to Label. This will ensure the button has no border.

[Shai Almog]

Are you interested in centering horizontally or vertically?
Thomas is correct but you will need to either define the UIID to have a CENTER alignment or invoke setAlignment(Component.CENTER) on all the styles.
For vertical alignment just wrap in a border layout container and set its center behavior to absolute center.

[eos]

This was my attempt 2).  The problem is if you take a button, assign an icon, then change the UIID, the icon does not center (horiazontally) properly.  If you have the buttons "text position" right, then the icon is too far to the left, if you have text set to left, its too far to the right (so part of the icon, which is almost the width of the screen, is off screen).

So this method is not working for wide images as icons.

[eos]

Yes, I had the UIID as a label with the center alignement (horizontal alignment). however the image is about 25px to far to right or left of center depending on if you have the text position field of the button set to "right" or "left".

[Shai Almog]

Set the text position to bottom.
Set padding/margin to 0.
Set gap to 0.

[Simon Hobbs]

Thanks Shai.  Just out of interest, what is gap for exactly? I could not see the difference between making it zero on various components.  I was assuming the layout manager handled the gap between components?

--
You received this message because you are subscribed to a topic in the Google Groups "CodenameOne Discussions" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/codenameone-discussions/fVeTJe7eJpo/unsubscribe.
To unsubscribe from this group and all its topics, send an email to codenameone-discu...@googlegroups.com.
Visit this group at http://groups.google.com/group/codenameone-discussions.
To view this discussion on the web visit https://groups.google.com/d/msgid/codenameone-discussions/e87e85a1-7115-4735-bdd4-ee60ca36a3e0%40googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Chen Fishbein]

Hi,

It's the spacing between the icon and the text