codenameone - How to add image in west and buttons in east side in container of codenameone

Question

I would like to create a screen as shown in image.

I have tried the following code, it works fine in simulator but when on device it dont show images it just shows button.So, May I know whats the reason? or Am I doing anything wrong ?

public class PhotoExample extends com.codename1.ui.Form {
 Container commandBar = null;
public PhotoAnnotatorScreen(String title) {
     setTitle(title);
   // give this form a border layout
    setLayout(new BorderLayout());
    getTitleArea().setPreferredH(0);
    drawableArea = new AnnotatingArea(graffitiModel);

    addComponent(BorderLayout.CENTER, drawableArea);
    buildCommandBar();

            getStyle().setBgColor(0x323232);
        }

        protected void buildCommandBar() {
       Container c = new Container();
    c.setLayout(new BoxLayout(BoxLayout.Y_AXIS));
    c.getStyle().setPadding(Component.TOP, 40);

     Button palletteCommand = new Button();
      Image im = Image.createImage("/sun.png");
         palletteCommand.setIcon(im);
                 c.addComponent(palletteCommand);

     Button cancelCommand = new Button();
     Image im = Image.createImage("/Cancel-64-ltgrey.png");
 cancelCommand.setIcon(im);
     c.addComponent(cancelCommand);

     Button okCommand = new Button();
     Image im = Image.createImage("/Checked-64-ltgrey.png");
 okCommand.setIcon(im);

      c.addComponent(okCommand);
        addComponent(BorderLayout.EAST, c);
    commandBar = c;

     }
     }

In this case the drawableArea is nothing but the captured image or any image that need to be placed in container.

Please help me out on this. Thanks.

标签： codenameone