Adjust left padding of the ActionBar logo?

[skypanther]

Is there a way to adjust the padding to the left of the logo? The actual graphic is cropped very close to the left edge of its content. So the issue seems to be placement within the actionbar. Maybe this can be tweaked in the theme?

Created with

$.tabGroup.addEventListener("open", function () {
    var activity = $.tabGroup.getActivity();
    var actionBar = activity.getActionBar();
    var abx = require('com.alcoapps.actionbarextras');
    if (actionBar) {
        actionBar.setHomeButtonEnabled(true);
        abx.setDisplayShowHomeEnabled(true);
        abx.setDisplayUseLogoEnabled(true);
        actionBar.setIcon('/images/acv-white.png');
        abx.setDisplayShowTitleEnabled(false);
    }
...

[skypanther]

Never mind. I didn't realize I was still setting the logo in the Alloy <ActionBar> tag. Apparently, having both there caused the shift, or maybe that one overrode the one set in code. Whatever. Removing that tag, which I didn't need, has solved the issue.

[skypanther]

OK, I'm reopening this as I'm still seeing it. I'm not sure what I was thinking earlier. Turns out, the logo is centered. In our app, the logos moves as you switch tabs and the number of buttons on the right changes.

I have tried with both setIcon() and setLogo() and get the same result. I've tried various theme modifications to left-align the logo. So far, I haven't hit the magic combination (if there is one).

[manumaticx]

@skypanther I'm investigating. It seems it depends on the image you're using. I've tested two PNGs with the same code, please compare the results:

abx.setDisplayShowHomeEnabled(true);
activity.actionBar.setIcon('appicon.png');
abx.setDisplayShowTitleEnabled(false);

abx.setDisplayShowHomeEnabled(true);
activity.actionBar.setIcon('/images/appc-logo.png');
abx.setDisplayShowTitleEnabled(false);

By the way, setLogo looks exact same. I was also testing some other images with the same effect. Looking into the Titanium source code, I tried to find out why the setIcon / setLogo are treating these images in different ways.

At first I thought that the loadDrawable method maybe treats the image like 9-patch in a weird way. But that would not make sense, right? I didn't debug it in detail so I'm not sure how exactly the file is loaded but somewhere the ImageView bounds are extended (1032 x 240) as you can see in the layout debugger:

Still not sure if this is a Titanium issue or just normal Android behavior. This needs some further inspection. I'll let you know.

[skypanther]

Aha, that's it. The difference is whether you have a square or rectangular image. Mine is rectangular, as is the Appcelerator-and-triangle image. The Titanium icon is square. I expanded my logo to be square and now it's shown at the left of the ActionBar, though tiny.

I'm not sure if that's Android's handling of images or Titanium's. It would be nice to be able to override this so that a rectangular image could be left-aligned.

[manumaticx]

Well, this is strange. I've just checked another app where I'm using actionBar.setLogo('/images/logo.png'); with a rectangular image but it's working fine here. Same device, same build target, same Appc Sdk.

Not sure if this is the reason, but the only difference I see is that I'm using densitiy-specific images for this logo.

[skypanther]

I have density specific versions but perhaps they were the wrong size? Can you share the m/h/x/xx/xxx sizes you used so I can try? I was using 32/48/64/96/128 px high and 72 for nodpi.

[manumaticx]

I use this sizes

res-mdpi:    120 x 48
res-hdpi:    180 x 72
res-xhdpi:   240 x 96
res-xxhdpi:  360 x 144
res-xxxhdpi: 480 x 192

[skypanther]

Those sizes did it! Actually, it's the height that matters. My aspect ratio is a bit different. But I resized it to the corresponding heights in your list above. The logo is now left aligned.

Since size matters, maybe this should be noted in the documentation for setIcon() and setLogo()? When I get a chance, I'll put in a PR.

[manumaticx]

Okay, this is something I also didn't know. I took these image sizes from the android design guide. So we still don't why the bounds get extended with a wrong size but as a rule of thumb you'd say that an actionbar logo must be 48 dp height. That actually makes sense since all Menu Icons also have a size of 48dp. Thanks for this clarification.