How do you design an image for Codename One TouchCommand?

Question

I am 2 days in experimenting with Codename One and Mobile development in general and tested out some basic navigation and features so far. Now I want to work on the look and feel of the app. I looked at the 9-border vid which was helpful, but not sure of the best way to add an image for the touchCommand that takes 3 tabs on that bar ( Example: home, profile, settings.. Similar to how instagram's TouchCommand is at the bottom of the app). If I add the image, it does not line up with my Commands.

What is the best way to approach this to ensure the "TouchCommand" image appears as one, but is broken up to 3 parts for each individual commands when pressed, home, profile and settings? I might be asking this all wrong, forgive me as this is all new to me.

Thanks.

EDIT: This is what was done. In Theme -> Constants added commandBehavior= bar . This gives the default bar at the bottom. Created in photoshop a new bar 300x80 and added it to the TouchCommand. (See ScreenShot 1). Took this bar and broke it up in photoshop into 3 different buttons for the tab press etc. In GUI Builder, added Home, Profile, Settings in the commands. Added the image to Press Icon for Home and it didnt line up (screenshot 2). Very Frustrating to design layouts. I am hoping there is a much better technique as I am still experimenting with Codename one?

What is unclear to me, is I cant find any documentation on how to approach this and what the dimensions of each image should be as it seems that codename one has issue aligning them. I am assuming the steps would be to create the background image and add the icons as interactive layers for the user. I really care for the image being pressed and changes color like the instagram example. I dont see a way to do this in codename one GUI builder and themes.

EDIT:

Okay, I have decided to use tabs instead of the bar at the bottom. If I add my image to it, I get the results (screeshot 3). Is this the right method to use to accompolish what I want? If so, I dont see a way yet to alter this to become what I want :( .

Plus adding the background, shows one size in the display and looks different in the simulator. (screeshot4)

Answered Here: How do you get ActionBar from SocialBoo theme to show up in your GUI?

Answer 1

Tabs are customized individually so the border should apply for an individual tab to create the background. The foreground element is the icon which you define in the Tabs component itself thru the icons property which allows you to define 3 icons for the 3 tabs (assuming you use the GUI builder). If you add the tabs via addTab in the code you can specify an icon there.