CallygraphyXamarin not working in MvxAppCompatActivity - xamarin

Question

I've have been trying for hours to get the custom fonts working in my MvvmCross project, specifically the Android platform.
I successfully installed the component and followed the steps mentioned:
https://components.xamarin.com/gettingstarted/calligraphyxamarin
It just doesn't want to work.
I tested it on a activity than inherits from Activity and AppCompatActivity they both work correctly.
Seems like inheriting from MvxAppCompatActivity breaks it? Any solutions this this problem?

Answer 1

Update
I released a nuget package for this (see: MvvmCross.Calligraphy).
Sample project: https://github.com/smstuebe/mvvmcross-calligraphy.
Blog post: http://smstuebe.de/2017/02/12/mvvmcross-calligraphy/
Just download it and modify your setup like:
public class Setup : MvxAndroidSetup
{
protected override MvxAndroidBindingBuilder CreateBindingBuilder()
{
return new CalligraphyMvxAndroidBindingBuilder();
}
}
Yes, because MvvmCross uses a custom layout inflator to bring in the bindings and some other magic stuff. This kicks out the Calligraphy inflator. Unfortunately, I didn't find a way usining the nuget package / xamarin component. You have to create a own binding and make CalligraphyFactory available.
Modified metadata.xml
<attr path="/api/package[#name='uk.co.chrisjenx.calligraphy']/class[#name='CalligraphyFactory']"
name="visibility">public</attr>
Custom factory
public class MyFactory : MvxAndroidViewFactory
{
private CalligraphyFactory _factory;
public MyFactory()
{
_factory = new Calligraphy.CalligraphyFactory(Resource.Attribute.fontPath);
}
public override View CreateView(View parent, string name, Context context, IAttributeSet attrs)
{
var view = base.CreateView(parent, name, context, attrs);
view = _factory.OnViewCreated(view, context, attrs);
return view;
}
}
Custom binding builder
class MyBindingBuilder : MvxAndroidBindingBuilder
{
protected override IMvxAndroidViewFactory CreateAndroidViewFactory()
{
return new MyFactory();
}
}
Setup.cs
public class Setup : MvxAndroidSetup
{
protected override MvxAndroidBindingBuilder CreateBindingBuilder()
{
return new MyBindingBuilder();
}
// ...
}
Activity
You don't need AttachBaseContext. Unfortunately it seems not to work with MvxAppCompatActivity, but with MvxActivity. I'm not sure what causes this issue, yet.
public class FirstView : MvxActivity
{
protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
CalligraphyConfig.InitDefault(new CalligraphyConfig.Builder()
.SetDefaultFontPath("fonts/gtw.ttf")
.SetFontAttrId(Resource.Attribute.fontPath)
.DisablePrivateFactoryInjection()
.Build());
SetContentView(Resource.Layout.FirstView);
}
}
View
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="40dp"
local:MvxBind="Text Hello"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="40dp"
local:MvxBind="Text Hello"
fontPath="fonts/gtw.ttf"
/>
</LinearLayout>
Result

Answer 2

Using Calligraphy and MvvmCross together is overkill because MvvmCross uses a custom layout inflator to bring in the bindings you can easily bind custom fonts to TextView typeface by a custom converter.
public class StringToFontConverter : MvxValueConverter<string, Typeface>
{
private static readonly Dictionary<string, Typeface> Cache = new Dictionary<string, Typeface>();
protected override Typeface Convert(string fontName, Type targetType, object parameter, CultureInfo culture) {
try {
if (!fontName.StartsWith(#"fonts/")) fontName = #"fonts/" + fontName;
if (!fontName.EndsWith(".ttf")) fontName += ".ttf";
if (!Cache.ContainsKey(fontName))
Cache[fontName] = Typeface.CreateFromAsset(Application.Context.Assets, fontName);
return Cache[fontName];
} catch {
return Typeface.Default;
}
}
}
And use it in layout:
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
local:MvxBind="Typeface StringToFont('Roboto-Light')"/>
Or in styles:
<style name="CustomTextViewStyle" parent="#android:style/Widget.TextView">
<item name="MvxBind">"Typeface StringToFont('Roboto-Regular')"</item>
</style>
Calligraphy library does the same work, override layout inflate process and change TextView typeface, so it's undesirable to add next library and increase apk weight.