Misaligned menuitems

[EthraZa]

Hi.

I'm using setMenuItemIcon to add menu items using fontFamily: 'MaterialIcons-Regular' (https://www.google.com/design/icons/index.html), but the icons are not vertically centered, they are sticked to the top of toolbar. There is a way to center or set a top value for menu items?

As a side question: Can I use setMenuItemIcon from Alloy xml so I can use class styles on it?

Thank you.

[manumaticx]

Hi @EthraZa can you please help me debugging this. I've just tried this material icons font but I'm not getting an icon at all. This is the code I'm using to test this:

abx.setMenuItemIcon({
  menu: e.menu,
  menuItem: settingsItem,
  fontFamily: 'MaterialIcons-Regular',
  icon: 0xe86a,
  color: "#333333",
  size: 30
});

(I've downloaded the MaterialIcons-Regular.ttf into the fonts directory)

[nuno]

@manumaticx icon: '0xe86a', should be a string?

[EthraZa]

I put the font there too and I'm just using this code:

function doOpen(e) {
    try {
        var activity = $.win.activity,
        actionBar = activity.actionBar;
        actionBar.title = args.name;
        actionBar.setDisplayHomeAsUp(true);
        actionBar.onHomeIconItemSelected = closeWindow;

        activity.onCreateOptionsMenu = function(e) {
            e.menu.clear();

            var menuItems = [{
                itemId: 201,
                title: L('ok'),
                icon: 'note_add',
                cb: 'saveEvent',
                showAsAction: Ti.Android.SHOW_AS_ACTION_ALWAYS
            }];

            _.each(menuItems, function(i){
                var item = e.menu.add({
                    itemId: i.itemId,
                    title: i.title,
                    showAsAction: i.showAsAction || Ti.Android.SHOW_AS_ACTION_NEVER
                });

                abx.setMenuItemIcon({
                    menu: e.menu,
                    menuItem: item,
                    fontFamily: 'MaterialIcons-Regular',
                    icon: i.icon,
                    //size: 24,
                    color: '#fff'
                });

                item.addEventListener('click', eval(i.cb));
            });
        };

        activity.invalidateOptionsMenu();
    } catch(er) {
    }
}

[shawnlan]

same problem here. Using MaterialIcons-Regular, the icons are not centered vertically.

[shawnlan]

FontAwsome and this one (Material) works well though: http://zavoloklom.github.io/material-design-iconic-font/icons.html :)

[manumaticx]

@EthraZa @shawnlan Hey guys, can you give me some more information about your environment? I've tested this and it works fine for me with MaterialIcons-Regular font (thanks @nuno - icon has to be a string of course).

This is my updated code:

abx.setMenuItemIcon({
  menu: e.menu,
  menuItem: settingsItem,
  fontFamily: 'MaterialIcons-Regular',
  icon: String.fromCharCode(0xe86a),
  color: "#333333",
  size: 30
});

[shawnlan]

Try to use default size (24) and see what you'll get.

[shawnlan]

Btw, I'm using ttf version.

[manumaticx]

I'm using .ttf too. Size 24 looks good, perfectly vertical aligned.

[manumaticx]

Please try the example. If this does not work for you, please let me know which Titanium version you are using and maybe a screenshot.

[manumaticx]

Okay, I've now tested this with the example code include here with 3.5.1.GA, 4.0.0.GA and 4.1.0.GA and it just works fine. Please try my example code and let me know if you still face this issue. If that's the case, please add a screenshot and as much information as possible.

I'm closing this for now as it it not reproducible but feel free to reopen.

[EthraZa]

@manumaticx ,

The problem was the way I was using the icon property. Instead of

icon: 'note_add'

it needs to be

icon: String.fromCharCode(0xE89C)

Thank you so much for this great module and help. :+1:

[shawnlan]

Yes I did the same thing. But why something like 'note_add' causes such issue?

[manumaticx]

Well you could use TiIconicFont or (maybe) IconFont to support usage by icon name. You just have to create a map for icon names and its hex values as seen here: https://github.com/google/material-design-icons/blob/master/iconfont/codepoints (Should look like this).

Anyway, I'm glad I could help.

[manumaticx]

Hey, I've done that quickly ;) https://github.com/k0sukey/TiIconicFont/pull/13

[EthraZa]

Wow. That was quick! Awesome.

Atte.

Allan Brazute Alves +55 (11) 96347-5063 ethraza@gmail.com / www.ghsix.com.br/allan

2015-08-17 6:15 GMT-03:00 Manuel Lehner notifications@github.com:

Hey, I've done that quickly ;) k0sukey/TiIconicFont#13 https://github.com/k0sukey/TiIconicFont/pull/13

— Reply to this email directly or view it on GitHub https://github.com/ricardoalcocer/actionbarextras/issues/82#issuecomment-131740392 .