The title of this post might be a bit misleading… Hamburger?
The Hambuger sidemenu is the menu style popularized by the Facebook app, its called a Hamburger because of the 3 line icon on the top left resembling a hamburger patty between two buns (get it: its a side menu…)!
Up until now these things were a pain to implement smoothly in Codename One, but Chen wouldn’t let this rest and just committed support for this feature. Working with a Hamburger menu couldn’t be simpler! Just set the command behavior to side menu (in the Display class) and it just works. You can also set it by setting the commandBehavior theme constant in the
Codename One designer to “Side”.
The Hambuger sidemenu is the menu style popularized by the Facebook app, its called a Hamburger because of the 3 line icon on the top left resembling a hamburger patty between two buns (get it: its a side menu…)!
Up until now these things were a pain to implement smoothly in Codename One, but Chen wouldn’t let this rest and just committed support for this feature. Working with a Hamburger menu couldn’t be simpler! Just set the command behavior to side menu (in the Display class) and it just works. You can also set it by setting the commandBehavior theme constant in the
Codename One designer to “Side”.
Then just add commands and watch them make their way into the side menu allowing you to build any sort of navigation you desire.
Chen updated the Facebook demo to show this off, its still only available via SVN and requires the latest SVN version of Codename One for all the bells and whistles to function properly but it already looks pretty sweet!
Now all we need is a cheeseburger sidemenu with fries.
Notice: This post was automatically converted using a script from an older blogging system. Some elements might not have come out as intended…. If that is the case please let us know via the comments section below.
19 Comments
Thanks Chen, was hoping that would land for 1.1 – looks great!
Great job Chen!!
This looks great, but I have no idea how to use it. Unfortunately, as a total beginner, ” Just set the command behavior to side menu (in the Display class)” does not mean anything to me yet, and i dont know how to setup the menus on the left to start with. There is a “Commands” Properties in the editor, but when you hit Add, and enter “side menu” as the “name” attribute, it doesnt seen to do anything.
Has anyone got a link to a demo handy?
Thanks, its sometimes hard to see where we are being obtuse. The facebook demo shows the side menu.
To activate command behavior either:
Open the designer, select the theme. Go to the constants tab, click “Add” and select commandBehavior from the combo box, type in Side for the value.
Or use:
Display.getInstance().setCommandBehavior(Display.COMMAND_BEHAVIOR_SIDE_NAVIGATION);
Commands are either added by clicking the Command section in the form in the GUI designer and adding commands or by invoking the method on form called addCommand.
Magic – works! Added in the designer. Worked with latest eclipse plugin, no SVN pull required. CN1 is amazing.
Can I get a link project source code
Its in our demos repository [http://github.com/codenameo…](http://github.com/codenameone/codenameone-demos/)
I Shai ! First, Thank you for offering us CodenameOne ! It’s a fantastic tool !
I have an issue with the hamburger menu. When I run my app on my Android device and click on the hamburger menu icon, the menu opens but it slides up with the whole window and makes the Action Bar disappear. The action bar reappears only when I restart the app.
Do you have any idea ?
Thank You
Great to hear!
Did you update the theme constant to side?
I would suggest you migrate to the new Toolbar API which is more powerful than the side menu on its own and encapsulates all its functionality.
Thank you Shai
Dear Shai,
i have menu and my background is white but i have gradient line at the first of menu
how i can remove it
That’s the shadow for the sidemenu set the theme constant sideMenuShadowBool=false
Thanks Shai 🙂
Is it possible to achieve a side menu as rich as this? Since we cant even set different uiids for commands. Am considering using layered pane layout
This is the side menu in the up to date kitchen sink. You can customize the Commands heavily but it’s far more intuitive to use the Toolbar API…
[https://uploads.disquscdn.c…](https://uploads.disquscdn.com/images/4de23e2fec20427d2fc6d5bc27191e5934536d8287fffcb59186d90880ef197d.png)
Wow, I barely recognize this Kitchen Sink, wow. Good job.
My bad. I never knew there is toolbar..addComponentToSideMenu, I have only been using toolbar.addCommandToSideMenu
cool,
check out our app [https://play.google.com/sto…](https://play.google.com/store/apps/details?id=com.encentral.tattara.mobile).
using codenameone