Custom Fonts in Xamarin.Forms NavigationBar + ActionBar

Question

Hello I would like to know how to use custom fonts in the navigation bar in Xamarin.

In Xaml it is possible to do set navigation bar properties like this:

<Style TargetType="NavigationPage">
        <Setter Property="BarBackgroundColor" Value="Pink"/>
        <Setter Property="XXX">
          <Setter.Value>
            <OnPlatform x:TypeArguments="x:String"
              iOS="Kenyan Coffee" Android="kenyan coffee rg.ttf#Kenyan Coffee Rg"
              WinPhone=""/>
          </Setter.Value>

        </Setter>
</Style>

My problem is I can't find anything in the documentation about a "Font family" or "label" or something like that.

I get the impression that I might have to use a Custom rendered but I cannot figure out what Class I would have to replace in order to style the navigation bar. Does anybody have any Ideas?

There seems to be a simple straight forward way to do it for iOS but I don't want to style it There unless I can do it on both platforms. A crossplatform Xamarin.Forms way would be ideal but anything that works would be fine.

Tutorials like this which talk about custom fonts seem to ignore the android actionBar completely.

score 1 · Answer 1 · answered Nov 20 '16 at 08:03

1

Custom font in general can be set in App.xaml globally. Apparently those settings don't affect toolbar.

However, for Android's toolbar, you have to make add a style in Android's style.xml .

<style name="Toolbar.TitleText" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
    <!--set your custom font properties-->
    <item name="android:textSize">18sp</item>
</style>

then just reference it in Toolbar.xaml :

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:minHeight="?attr/actionBarSize"
    android:background="@color/primary"
    android:theme="@style/MainTheme"
    android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:titleTextAppearance="@style/Toolbar.TitleText" />

answered Nov 20 '16 at 08:03

MadDeveloper

796
11
20

Thanks a lot. I learned a lot from this post. I don't know if it is now possible do this directly in xml but it seems as though it is not possible to set custom fonts via xml using this method. [Here](http://stackoverflow.com/questions/36472953/how-to-set-custom-font-in-xml-file-instead-of-java-file) is an example of it being doing in straight Java by extending the textView class. What class would I have to extend in order to do the same on the actionbar? – xerotolerant Nov 21 '16 at 11:17
I don't think I get it - you can override fonts for the whole app, but not for the toolbar. I gave you example of how to do it strictly for toolbar. Does it work for you? – MadDeveloper Nov 21 '16 at 14:05
It worked in the sense that it changed the font size. However I modified it like this `kenyan coffee rg.ttf#Kenyan Coffee Rg` to use a custom font file but that did not work. – xerotolerant Nov 21 '16 at 15:12
You are right @xerotolerant it worked for changing the size, however, for a custom font it did not. Do you know how to do it by using this shared approach? – vhugo Mar 12 '18 at 03:34

Custom Fonts in Xamarin.Forms NavigationBar + ActionBar

1 Answers1

Linked