Codename One: Style Toolbar with Image

Question

In my app, I can't figure out how to properly style the toolbar with my logo image.

What I want to make it look like is pretty much like the Toolbar from the "Sport1" App. Example

So I need the back Command on the left side of the toolbar, my logo in the middle from a MultiImage out of the resource and on the right another command.

Also, I'd like to let the Toolbar get smaller with scrolling. What I have tried so far:

    res_theme = r;
    Form f = new Form(" ", new BoxLayout(BoxLayout.Y_AXIS));
    logo = res_theme.getImage("Logo_Gema_vertikal.png");
    f.getToolbar().getTitleComponent().setUIID("toolbar_image");
    Style stitle = f.getToolbar().getStyle();
    stitle.setBgTransparency(0);
    stitle.setBgImage(logo);
    stitle.setBackgroundType(Style.BACKGROUND_IMAGE_ALIGNED_CENTER);
    stitle.setPaddingUnit(Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS);
    stitle.setPaddingTop(5);

So, this looks good the way it is. I dont actually need a Title, thats why I do

Form f = (" ", ...);

If I don't add a title to the form, the toolbar gets very small and squeezes the background Image from the toolbar. The centered logo from the toolbar is just for styling reasons there, it does not need to have a command. Is there a way to leave out the Title? I now have set it to completely transparent, but for me this is just a work-around.

Also, I guess rather than setting the logo as background with a centered alignment, I think it would be better to add it to the title section as Image, but I don't know if this is better or how to do it.

Now, I also want to make the Toolbar get smaller when scrolling down. I found kind of a example code in the Codename One Toolbar Documentation, but it does not work out for me, since the background Image gets removed.

This was the code for the scrolling Animation:

    ComponentAnimation title = f.getToolbar().getTitleComponent().createStyleAnimation("Title", 200);
    f.getAnimationManager().onTitleScrollAnimation(title);

In the example, it worked. With my toolbar it does not, I have no clue why. I also can't see, where the size of the "after scrolling toolbar" is set.

Can I add there an Image as well? Kinda like one toolbar before scrolling with my logo, then while scrolling it transforms into a smaller one with only a textlogo image?

Here is my whole code what I have tried to make it work:

Form f = new Form(" ", new BoxLayout(BoxLayout.Y_AXIS));
    logo = res_theme.getImage("Logo_Gema_vertikal.png");
    f.getToolbar().getTitleComponent().setUIID("toolbar_image");
    Style stitle = f.getToolbar().getStyle();
    stitle.setBgTransparency(0);
    stitle.setBgImage(logo);
    stitle.setBackgroundType(Style.BACKGROUND_IMAGE_ALIGNED_CENTER);
    stitle.setPaddingUnit(Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS);
    stitle.setPaddingTop(5);
    f.add(new SpanLabel("asdasdasdasd");
    ComponentAnimation title = f.getToolbar().getTitleComponent().createStyleAnimation("Title", 200);
    f.getAnimationManager().onTitleScrollAnimation(title);
    f.show();

Answer 1

From the example above if looks like you just want to use the image as the title instead of styling the toolbar with a background image.

Just use ((Label)toolbar.getTitleComponent()).setIcon(myImage);.