Fork us on GitHub

Toolbar Back & Easier Material Icons

Simplifying back command behavior
Post Image

Toolbar Back & Easier Material Icons

When we initially launched Codename One it was pretty hard to imagine todays apps. Menus and back navigation were miles apart when comparing Android 2.x and iOS 4.x…​ So we created a very elaborate set of abstractions (command behavior) that served as a set of patch framework we could live with for a while.

But like any patch framework this started crumbling under its shear weight and this lead us to the Toolbar API. The reason we could do that is that a lot of the platform differences have converged, in 2012 it was blasphemy to have a back button in Android title area and now it’s the official material design guideline.

So while platforms are still different their differences are more refined an less conceptual and that is the perfect environment for the Toolbar API. Toolbar solved most of these differences in a very portable and robust way but one thing it didn’t codify was back button behavior, this was mostly due to the many nuances within this functionality and due to our bad experience with abstracting it in the old command behavior framework.

Back Command

In the previous implementation we would just call:


This would implicitly place the command in the title for iOS and wouldn’t do it for other platforms.

When you use this with the Toolbar API you would only get the hardware back button behavior and the command wouldn’t map to the title area leaving iOS users with no other means to navigate.

To solve this in a more generic way we now added 4 new methods to Toolbar:

public Command setBackCommand(String title, ActionListener<ActionEvent> listener)
public void setBackCommand(Command cmd)
public Command setBackCommand(String title, BackCommandPolicy policy, ActionListener<ActionEvent> listener)
public void setBackCommand(Command cmd, BackCommandPolicy policy)

The default setBackCommand(cmd) and setBackCommand(String, ActionListener<ActionEvent>) will set the hardware back command and always set the material design back arrow to the left title area. This will allow you to keep a consistent look across platforms.

You will notice the usage of BackCommandPolicy, that is an enum with the following possible values:

  • ALWAYS - Show the back command always within the title bar on the left hand side. This will add the command supplied "as is" but will give it the BackCommand UIID

  • AS_REGULAR_COMMAND - this is effectively the same as calling addCommandToLeftBar and setting the hardware back command. This is identical to the ALWAYS option with the exception of using the TitleCommand UIID instead of the BackCommand UIID

  • AS_ARROW - this is the default behavior for setCommand. Uses the material design arrow icon for the back button which will always appear on all platforms

  • ONLY_WHEN_USES_TITLE - this will only place the back command when the theme constant backUsesTitleBool is set to true. By default only the iOS themes have it set to true so the back command will only appear on the title for iOS devices

  • WHEN_USES_TITLE_OTHERWISE_ARROW - this option combines the logic of AS_ARROW and ONLY_WHEN_USES_TITLE. It will use the command to show the back button on iOS devices but will use the material design arrow icon for other devices

  • NEVER - this adds nothing to the title bar. It only sets the hardware button. Effectively this option is here mostly for completeness.

GUI Builder Apps

The old GUI builder has a navigation stack that automatically adds back buttons. Thus apps built with the old GUI builder had a problem mapping to back behavior with the Toolbar.

We now fixed that so the UIBuilder checks if a Toolbar is installed and if so calls its version of setBackCommand effectively using the AS_ARROW back behavior.

If this isn’t what you had in mind but you still want to use the Toolbar with an old GUI builder app you can override the method:

protected void setBackCommand(Form f, Command backCommand)

You can then set the command as you see fit to the parent form.

Simpler Icon Font

One of the minor annoyances with using icon fonts is the need to adapt them to a given style. This works nicely when we have a component like a button where we can use the buttons style as the basis for the UI but it becomes painful with features such as commands where we don’t have a reference to the style object.

To make this a bit easier we made this code simpler:

Style s = UIManager.getInstance().getComponentStyle("TitleCommand");
FontImage icon = FontImage.createMaterial(FontImage.MATERIAL_SEARCH, s, 3);

As this:

FontImage icon = FontImage.createMaterial(FontImage.MATERIAL_SEARCH, "TitleCommand", 3);

This will create a 3mm icon with the search icon and the foreground/background scheme of the TitleCommand UIID.

Share this Post:

Posted by Shai Almog

Shai is the co-founder of Codename One. He's been a professional programmer for over 25 years. During that time he has worked with dozens of companies including Sun Microsystems.
For more follow Shai on Twitter & github.