One of the common requests we get from users is more customization for the title bar area with more flexibility e.g. placing a TextField for search or buttons in various ways. Chen recently took action on this by introducing the new Toolbar API that replicates some of the native functionality available on Android/iOS and integrates with features such as the side menu to provide very fine grained control over the title area behavior.
Everything that the toolbar allows was possible in the past with various customizations, the difference is that the Toolbar API makes such use cases much simpler. To get started we can set a Toolbar to a Form using myForm.setToolbar(toolbar).
At that point we can add commands to the side menu with most of the existing
side menu features
(such as SideComponent), however to add a command to the SideMenu we will need to use toolbar.
addCommandToSideMenu() instead of the standard add command. We can add commands to 4 locations:
-
addCommandToSideMenu – adds to the sidemenu
-
addCommandToOverflowMenu – adds the command to an Android style … menu on the top right hand side
-
addCommandToRightBar – places the command on the right side of the title
-
addCommandToLeftBar – places the command on the left side of the title
Normally you can just set a title with a String but if you would want the component to be a text field or a multi line label you can use
setTitleComponent(Component) which allows you to install any component into the title area.
At this time the GUI builder doesn’t include toolbar specific functionality, depending on user requirements we might add this in the future.
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.
13 Comments
Nice! I hope it’s also easier now to change the color of the toolbar. Thanks for adding this!
How do you update the plugin to use this toolbar functionality ?
We will make an update in a week or two.
i get below error when using this command:
mainForm.setTitleComponent(titleCmb);
The method setTitleComponent(Label) in the type Form is not applicable for the arguments (ComboBox)
Use the method in the Toolbar not in the form.
ToolBar only adds to forms right? not to containers.
Yes.
Hi,
On iOS, the toolbar looks pretty native and comparable to the NavigationBar but on Android, the toolbar looks anything but native when compared to the Android Toolbar material design (see section ‘App bar’ here [[https://www.google.com/desi…](https://www.google.com/design/spec/layout/structure.html#structure-toolbars)]).
Why doesn’t the Android implementation by default comply with these guidelines (height, nav icon size and position, background, etc.)? It’s annoying to have to tweak the toolbar for every single app just to get the default-like look on Android whereas it just works on iOS. Can you fix this issue or am I missing something?
I agree we should do it. Generally customizing the toolbar without breaking existing code was pretty hard but for a newly created app the toolbar should come preconfigured and easy to use.
Matching material design on Android is our #1 priority based on our recent roadmap (together with performance) so this is something we want to do and we do want things to be far more refined than they are right now. Can you file an issue with suggestions e.g. what sort of tweeks you usually do to a project to get it to match?
Hi,
I’m still busy with the app 😉 I’ll file an issue after I’m done with the toolbar customization. That will be next week at the earliest.
Hi,
no rush whatsoever. Thanks.
i dont understand how the search bar was added to the toolbar, for me nothing appears
This is from 2014, I suggest looking at the Javadocs where there are two separate code samples for search