Use font icons in tabs button navigation

[beppo-ivel]

I followed this tutorial, to vector icon in titanium.

1. Downloaded MaterialIcons-Regular.ttf and saved it under app/assets/android/fonts/
2. define a style in app.tss
3. Using the definition in my view tab1.xml

It works as expected. But for my tab-group the icon looks like a square. Same happened for label if the font size is about to small.

1. How to style a tab, such that the font icon appears?
2. Is it possible to size a font icon (used as label text as well) in a different size as the label text?

app.tss

'.ma' : {
  font : {
    fontFamily : 'MaterialIcons-Regular'
  }
}
'#playBtn': {
  backgroundColor: '#008f11',
	width: 50,
  height: 50,
  borderRadius: 50,
  bottom: 27,
  color: '#0d0208',
  font: {
    fontWeight: 'bold',
    fontSize: 31,
    fontFamily : 'MaterialIcons-Regular'
  }

}

views/tab1.xml

<Alloy>
  <Tab id="tab1" class="ma" font="fontSize:59" title="\ue425 Tab1">
    <Window id="window1" title="Window 1" >
      <Button id="playBtn" onClick="start" title="\ue037" />
    </Window>
  </Tab>
</Alloy>

[m1ga]

It would be very helpful if you provide some code and a screenshot

I can only show how I create my tab icons:

function generateIcon(icon) {
	var size = (icon.size == undefined) ? 30 : icon.size;
	if (OS_IOS) {
		size /= Ti.Platform.DisplayCaps.logicalDensityFactor;
	}
	var f = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, icon.filename);
	var lbl = Ti.UI.createLabel({
		text: icon.icon,
		font: {
			fontSize: size - 2,
			fontFamily: "remixicon"
		},
		color: "#888"
	});
	var view = Ti.UI.createView({
		width: size,
		height: size,
	});
	view.add(lbl);
	var img = view.toImage();
	f.write(img);
}

generateIcon({
	filename: 'icon_list.png',
	icon: "\uEEBA"
})

and the I use $.tab1.icon = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, 'icon_list.png').read();

[m1ga]

do you have a theme that will override it?

[beppo-ivel]

Don't know what exactly do u mean if u ask for theme. I set some styles in the app.tss nothing else:

'.ma' : {
  font : {
    fontFamily : 'MaterialIcons-Regular'
  }
}
'TabGroup[platform=android]': {
  backgroundColor: "#0d0208",
  titleColor: "#008f11",
  style: Ti.UI.Android.TABS_STYLE_BOTTOM_NAVIGATION
}
"Tab":{
  activeTitleColor:'#00ff41',
  titleColor: "#008f11"
}
"Menu": {
  color: "#008f11",
  backgroundColor: "#0d0208"
}
"Label": {
  width: Ti.UI.SIZE,
  height: Ti.UI.SIZE,
  color: "#008f11",
  font: {
	fontSize: 16
	}
}

[m1ga]

an Android theme/XML with color settings that might override your tss styles. But if you don't know what a theme is I guess you don't have any 😄

I'm a bit lost what your problem is. I can change the inactive color (icon + text) by setting

"Tab" : {
    tintColor: "#333"
}

and the active color with:

"Tab" : {
    activeTintColor: '#f00'
}

for the active icon and

"TabGroup" : {
    activeTitleColor: "#fff"
}

for the active text.

Please create an example with your current code and a screenshot or even better a zip so I can test it.

[beppo-ivel]

daring implication ;)

the coloring by app.tss file is working now. Dont know what happend. But the property "color" in your generateIcon function still has no effect.

[m1ga]

that is true. It is just there to generate a mid-grey icon since there was an issue with tinting in earlier SDKs. But as stated in the comment above: the whole coloring is done in TSS