0

I can change the Font Color like this:

var homePage = new NavigationPage(new HomePage())
{ 
   Title = "Home",
   Icon = "ionicons_2_0_1_home_outline_25.png",
   BarTextColor = Color.Gray,
};

But is there a way to change the Font Size and Weight for the Title? I would like to change it for the iOS and Android platforms only. Hoping that someone knows of Custom Renderer code that can help me to do this.

Note that this question is similar to my question on how to change the Font which has been answered here:

How can I change the font for the header of a Navigation page with Xamarin Forms?

Brandon Minnick
  • 13,342
  • 15
  • 65
  • 123
Alan2
  • 23,493
  • 79
  • 256
  • 450

1 Answers1

2

Here is an Custom Renderer for Android where you are able to change the Font Size and also the Font Weight. I've marked the values you have to change with an TODO.

using Android.Content;
using Android.Graphics;
using App5.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android.AppCompat;

[assembly: ExportRenderer(typeof(NavigationPage), typeof(CustomNavigationPageRenderer))]
namespace App5.Droid
{
    public class CustomNavigationPageRenderer : NavigationPageRenderer
    {
        private Android.Support.V7.Widget.Toolbar _toolbar;

        public CustomNavigationPageRenderer(Context context) : base(context)
        {
        }

        public override void OnViewAdded(Android.Views.View child)
        {
            base.OnViewAdded(child);

            if (child.GetType() == typeof(Android.Support.V7.Widget.Toolbar))
            {
                _toolbar = (Android.Support.V7.Widget.Toolbar)child;
                _toolbar.ChildViewAdded += Toolbar_ChildViewAdded;
            }
        }

        protected override void Dispose(bool disposing)
        {
            base.Dispose(disposing);

            if (disposing)
            {
                _toolbar.ChildViewAdded -= Toolbar_ChildViewAdded;
            }
        }

        private void Toolbar_ChildViewAdded(object sender, ChildViewAddedEventArgs e)
        {
            var view = e.Child.GetType();

            System.Diagnostics.Debug.WriteLine(view);

            if (e.Child.GetType() == typeof(Android.Support.V7.Widget.AppCompatTextView))
            {
                var textView = (Android.Support.V7.Widget.AppCompatTextView)e.Child;

                // TODO: CHANGE VALUES HERE
                textView.TextSize = 25;
                textView.SetTypeface(null, TypefaceStyle.Bold);

                _toolbar.ChildViewAdded -= Toolbar_ChildViewAdded;
            }
        }
    }
}

Here is an implementation of a Custom Renderer for iOS.

using App5.iOS;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(NavigationPage), typeof(CustomNavigationPageRenderer))]
namespace App5.iOS
{
    public class CustomNavigationPageRenderer : NavigationRenderer
    {
        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);

            if (e.NewElement != null)
            {
                var att = new UITextAttributes();
                // TODO: Create your FontSize and FontWeight here
                var fontSize = Font.SystemFontOfSize(30.0);
                var boldFontSize = Font.SystemFontOfSize(35.0, FontAttributes.Bold);
                // TODO: Apply your selected FontSize and FontWeight combination here
                att.Font = boldFontSize.ToUIFont();
                UINavigationBar.Appearance.SetTitleTextAttributes(att);
            }
        }
    }
}
Brandon Minnick
  • 13,342
  • 15
  • 65
  • 123
Sebastian Jensen
  • 154
  • 6
  • Hi Sebastian, I see your solution is a bit different from the other one in the link that's in my question. Do you have a solution for iOS also? – Alan2 Jan 30 '18 at 07:50
  • Hi Alan, I've updated my answer with an implementation of an custom renderer for iOS. I hope this works for you. – Sebastian Jensen Jan 30 '18 at 09:13
  • Thanks very much. I will try this out now and accept the answer or let you know if I have any questions. – Alan2 Jan 30 '18 at 12:41
  • Can you tell me what the common file should look like for this renderer. Thanks – Alan2 Jan 30 '18 at 13:00
  • What does you mean? It depends on the change you want to do. In most cases (like iOS in your case) you can inherite from the standard renderer and overreide the `OnElementChanged` method and change in there. But sometime like in the case of Android you need to do a little bit more. So it really depends on your use case. – Sebastian Jensen Jan 30 '18 at 13:54
  • When I do this: var a = new CustomNavigationPage(new HomePage()); It says CustomNavigationPage could not be found. Can you provide an example of usage. Thanks – Alan2 Jan 30 '18 at 19:12
  • 1
    You can use the normal NavigationPage in this case, because we are overwriting the Renderer for Android and iOS. Just copy this two Rendererz to the specific platform project and than you can use the normal Xamarin.Forms NavigationPage. – Sebastian Jensen Jan 30 '18 at 20:05
  • I tried this code. The custom renderer for android is giving all sorts of error mostly on namespaces like: `The type or namespace name 'Views' does not exist in the namespace '' (are you missing an assembly reference?)` or `The type or namespace name 'Support' does not exist in the namespace '' (are you missing an assembly reference?)`. Am I missing something here? – iamsophia Feb 02 '18 at 05:56
  • Have you copied the renderer to your Android project? Have you tried to clean the solution? Maybe you can restart Visual Studio. – Sebastian Jensen Feb 02 '18 at 05:57