How to fill a LWUIT Button with an image when it's focused?

Question

I have a button in LWUIT Form, and I have an icon that should be drawn in this button, I want the icon to fill all the button space without leaving any white space between the button border and the icon in it, how could I do this ?

For example: let's assume the icon is simply a green square, using the following code:

Button button = new Button(Image.createImage("/green.JPG"));
form.addComponent(button);

I got the following result when the item is focused:

How can I remove the white border surrounding the "green" icon of the button when it's focused (I'll replace the whole icon image with another image to represent the focus state) ?

Answer 1

1) The gap, which is the white border, between the content, the green icon, and the component boundary is called the padding. To fit the image with button boundaries, remove the padding in all direction (TOP, BOTTOM, LEFT and RIGHT) in each of the component states, viz Unselected, Selected, Pressed and Disabled.

So for unselected state it is

button.getUnselectedStyle().setPadding(0, 0, 0, 0);

do this for other state's of the button.

You might want to play around with the margin of the button to fit it suitably within the container.

---

2) To remove the border of the button call the below syntactic method for each component state

button.get[ComponentState]Style().setBorder(null, false);

In your case for focused state, button.getSelectedStyle().setBorder(null, false);

---

3) To set the icon for the appropriate state of button use the following methods,

button.setIcon(image);                  
button.setRollOverIcon(image);
button.setPressedIcon(image);