Codename one, Styling the side Menu

3
votes

How can i style the side menu, I created it using this tutorial youtube link, I want ot make it transparent and insert a label with a logo

please see below images on how i would like it to look like.

How it looks now

enter image description here

How i would like it to look

enter image description here

How i would like it to look when opened enter image description here

1
codenameone

1 Answers

1
votes

To style the side menu, modify the SideNavigationPanel UIID in your theme.

To add the logo, you can do something like this

Toolbar t = new Toolbar();
form.setToolbar(t);
t.setTitle("tayary");
Label logoLabel = new Label(logoImage);
logoLabel.setTextPosition(Label.BOTTOM);
logoLabel.setText("label text here");
logoLabel.setUIID("SideMenuLogo");
t.addComponentToSideMenu(logoLabel);

Add the SideMenuLogo UIID to your theme, change Alignment to Center, and adjust the Top and Bottom margins.

To underline commands, modify the background in SideCommand UIID in your theme. It should be of Type: IMAGE_TILE_HORIZONTAL_ALIGN_BOTTOM. For the image, you can use any borderBottom image in your theme (If you don't have one, create any border using Image Border Wizard, and use its borderBottom image).

You can check this demo for a working a example.