Xamarin.Forms center title and transparent navigation bar - Android

Question

I am using Xamarin.Forms and I have a problem getting 2 things to work on Android:

1. I want to set ActionBar to be transparent, setting BarBackgroundColor works with every color but not with transparent.

2. I want the page title to be centered, just like it is on iOS.

   MainPage = new NavigationPage(
          new LoginPage(){Title = "Center"}) {BarBackgroundColor = Color.Transparent});
   

Can anyone help me with this?

Solution 1

I have recently encounter the same problem, I was using MasterDetailPage in Xamarin.Forms and in android it does not set the title to center.

So, obvious route was to create a custom renderer and override its OnLayout method, and find Toolbar's TextView and set its Gravity to Center, easy right?

But hey when i try to do this myTextView.Gravity = Android.Views.GravityFlags.Center it just doesn't work. I tried setting ForegroundGravity but no effect.

So finally i've calculated center X position and set TextView X position and VOILLA! it is now in center. Here is my solution.

[assembly: ExportRenderer(typeof(CustomMasterDetailPage), typeof(CustomMasterDetailPageRenderer))]
namespace myApp.Droid
{
    public class CustomMasterDetailPageRenderer : MasterDetailPageRenderer
    {
        protected override void OnLayout(bool changed, int l, int t, int r, int b)
        {
            base.OnLayout(changed, l, t, r, b);

            var toolbar = FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.toolbar);

            for (int index = 0; index < toolbar.ChildCount; index++)
            {
                if (toolbar.GetChildAt(index) is TextView)
                {
                    var title = toolbar.GetChildAt(index) as TextView;
                    float toolbarCenter = toolbar.MeasuredWidth / 2;
                    float titleCenter = title.MeasuredWidth / 2;
                    title.SetX(toolbarCenter - titleCenter);
                }
            }
        }
    }
}

Solution 2

You'll need to create a custom renderer to achieve that.

[assembly: ExportRenderer (typeof(NavigationPage), typeof(NavigationPageRenderer))]
namespace Droid
{

public class NavigationPageRenderer : NavigationRenderer
{

    protected override void OnElementChanged (ElementChangedEventArgs<NavigationPage> e)
    {
        base.OnElementChanged (e);

        ApplyTransparency ();
    }

    protected override bool DrawChild (Android.Graphics.Canvas canvas, Android.Views.View child, long drawingTime)
    {
        ApplyTransparency ();
        return base.DrawChild (canvas, child, drawingTime);
    }

    void ApplyTransparency ()
    {
        var activity = ((Activity)Context);
        var actionBar = activity.ActionBar;
        actionBar.SetIcon (Resource.Drawable.actionbaricon);
        actionBar.SetBackgroundDrawable (null);
    }
}
}

For me it only worked using both OnElementChanged and DrawChild calling RemoveAppIconFromActionBar otherwise, when you navigate to other pages it keeps adding the bar divider.

You will also need to add Window.RequestFeature (WindowFeatures.ActionBarOverlay); to the MainActivity class.

If someone finds a better way to do this instead of using DrawChild() please let me know.

Hope it helps