How to minimize gap between Tab icon and Tab text in Codename one?

Question

I am writing an App with Codename One, but I cannot find out how to make the gap between a tab icon and a tab text smaller.

It looks like this:

but it should look like this: (With the icons of the first picture though)

How can I minimize the gap between

Icon -> text

and

Icon -> content

?

Shai Almog · Accepted Answer · 2016-06-16T18:12:42.073

1

That gap seems to be delivered from the icon itself and not from us. Assuming you used the material design icons make sure to set the padding to 0 e.g.

FontImage.setDefaultPadding(0);

Or:

FontImage i = ...;
i.setPadding(0);

E.g:

Form hi = new Form("Tabs", new BorderLayout());
Tabs t = new Tabs();
FontImage fim = FontImage.createMaterial(FontImage.MATERIAL_3D_ROTATION, "Tab", 4);
fim.setPadding(0);
t.addTab("AAA", fim, new Label("Tab 1"));
t.addTab("BBB", fim, new Label("Tab 2"));
hi.add(BorderLayout.CENTER, t);

hi.show();

edited Jun 16 '16 at 18:12

answered Jun 11 '16 at 04:42

Shai Almog

51,749
5
35
65

I will try on thursday, thanks for your help, but I think I set the padding to 0 – Dominik Reinert Jun 14 '16 at 09:08
Notice this isn't the padding of the component – Shai Almog Jun 15 '16 at 04:49
Oh, you are right, this could be it. I tell you tomorrow – Dominik Reinert Jun 15 '16 at 04:51
I tried this, neither setting the default padding, nor setting the padding of the image, nor setting the padding of the tabs works... – Dominik Reinert Jun 16 '16 at 06:01
I updated the answer with a visual test case of my answer – Shai Almog Jun 17 '16 at 03:46
I changed adding the icon in the way you did, now it works. Thank you, once again! – Dominik Reinert Jun 17 '16 at 05:53

How to minimize gap between Tab icon and Tab text in Codename one?

1 Answers1