[AC-91] Android: Custom font with attributedString doesn't work

GitHub Issue	n/a
Type	Bug
Priority	n/a
Status	Resolved
Resolution	Cannot Reproduce
Resolution Date	2015-11-10T05:58:56.000+0000
Affected Version/s	n/a
Fix Version/s	n/a
Components	Titanium SDK & CLI
Labels	android, attributedstring
Reporter	Manojkumar Murugesan
Assignee	Mostafizur Rahman
Created	2015-04-20T09:17:14.000+0000
Updated	2015-11-10T16:18:48.000+0000

Description

Ti.UI.ATTRIBUTE_FONT with custom font family doesn't work.

var win = Titanium.UI.createWindow({
    backgroundColor: '#ddd',
});

win.open();

var text =  'Bacon ipsum dolor Appcelerator Titanium rocks! sit amet fatback leberkas salami sausage tongue strip steak.';

var attr = Titanium.UI.createAttributedString({
    text: text,
    attributes: [
        // Underlines text
        {
            type: Titanium.UI.ATTRIBUTE_FONT,
            value: {
                fontFamily: "ANY_FONT_UNDER_RESOURCES",
                fontSize: 15
            }
            range: [0, 20]
        }
    ]
});

var label = Titanium.UI.createLabel({
    left: 20,
    right: 20,
    height: Titanium.UI.SIZE,
    attributedString: attr
});

win.add(label);
Adds attributes, one by one.
var win = Titanium.UI.createWindow({
    backgroundColor: '#ddd',
});

win.open();

var text =  'Bacon ipsum dolor Appcelerator Titanium rocks! sit amet fatback leberkas salami sausage tongue strip steak.';

var attr = Titanium.UI.createAttributedString({
    text: text
});

// Underlines text
attr.addAttribute({
    type: Titanium.UI.ATTRIBUTE_UNDERLINES_STYLE,
    range: [0, text.length]
});

var label = Titanium.UI.createLabel({
    left: 20,
    right: 20,
    height: Titanium.UI.SIZE,
    attributedString: attr
});

win.add(label);

The reason could be in AttributedStringProxy.java TypefaceSpan is directly set to spannable string.

spannableText.setSpan(new TypefaceSpan(fontProperties[TiUIHelper.FONT_FAMILY_POSITION]), range[0], range[0] + range[1], Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

Seems actionbar extras module handles it perfectly with extended TypefaceSpan class. https://github.com/ricardoalcocer/actionbarextras/blob/master/src/com/alcoapps/actionbarextras/TypefaceSpan.java

Comments

Alex Bernier 2015-04-20

This is a dupe of AC-70, but AC-70 was just closed as unsupported. However, if you look at my last comment, you can see the current platform documentation states Android is, in fact, documented as supporting Ti.UI.ATTRIBUTE_FONT since SDK 3.6.

Jebun Naher 2015-11-09

Hello We couldn't reproduce this issue as a bug in our environment. Custom font with attributedString works as expected. [Screenshot](http://postimg.org/image/bec8sr3dz/) *Testing Environment:* Appcelerator Command-Line Interface, version 5.0.4 Appcelerator Studio, build: 4.3.3.201510212245 Ti SDK Version :5.0.2.GA Emulator : Nexus 7 - 5.1.0 - API 22 - 800x1280 Node.js Version :0.10.37 Mac OS X,Version :10.10.1 Jdk version : 1.7.0_80.jdk *Test Case:*

   var win = Titanium.UI.createWindow({
   	backgroundColor : '#ddd',
   });
   win.open();
   var text = 'Bacon ipsum dolor Appcelerator Titanium rocks! sit amet fatback leberkas salami sausage tongue strip steak.';
   var attr = Titanium.UI.createAttributedString({
   	text : text,
   	attributes : [
   	// Underlines text
   	{
   		type : Titanium.UI.ATTRIBUTE_UNDERLINES_STYLE,
   		range : [0, text.length]
   	},
   	// Sets a background color
   	{
   		type : Titanium.UI.ATTRIBUTE_BACKGROUND_COLOR,
   		value : "red",
   		range : [text.indexOf('Appcelerator'), ('Appcelerator').length]
   	}, {
   		type : Titanium.UI.ATTRIBUTE_BACKGROUND_COLOR,
   		value : "blue",
   		range : [text.indexOf('Titanium'), ('Titanium').length]
   	}, {
   		type : Titanium.UI.ATTRIBUTE_BACKGROUND_COLOR,
   		value : "yellow",
   		range : [text.indexOf('rocks!'), ('rocks!').length]
   	},
   	// Sets a foreground color
   	{
   		type : Titanium.UI.ATTRIBUTE_FOREGROUND_COLOR,
   		value : "orange",
   		range : [0, text.length]
   	}, {
   		type : Titanium.UI.ATTRIBUTE_FOREGROUND_COLOR,
   		value : "black",
   		range : [text.indexOf('rocks!'), ('rocks!').length]
   }]
   });
   var label = Titanium.UI.createLabel({
   	left : 20,
   	right : 20,
   	font : {
   		fontFamily : "Your Custom Font Goes Here"
   },
   	height : Titanium.UI.SIZE,
   	attributedString : attr
   });
    win.add(label);

*Steps to test:* 1. Create a classic project. 2. Inside the resource folder, create a new folder and name it fonts. 3. Download a custom font and place it inside the fonts folder. 4. Copy below code, specify the font name in the fontFamily attribute. 5. Run the project. Thanks

Alex Bernier 2015-11-10

Thank you [~jnaher] for following up! Great the issue is resolved.

JSON Source