Change back button color in Xamarin.Android

Question

So, I've got a toolbar in my Xamarin app and I want to change the color of the back button of the Android app (I think the blue of the iOS app would work fine with my background).

I know that this question has already been asked, but none of those solutions worked for me. (I changed the toolbar to transparent with https://xamgirl.com/transparent-navigation-bar-in-xamarin-forms/ Maybe that's important.)

Could anyone help me with this?

CustomNavigationPage.cs

using Xamarin.Forms;

namespace TransparentNavBarXForms
{
    public partial class CustomNavigationPage : NavigationPage
    {
        public CustomNavigationPage() : base()
        {
            InitializeComponent();
        }

        public CustomNavigationPage(Page root) : base(root)
        {
            InitializeComponent();
        }

        public bool IgnoreLayoutChange { get; set; } = false;

        protected override void OnSizeAllocated(double width, double height)
        {
            if (!IgnoreLayoutChange)
                base.OnSizeAllocated(width, height);
        }
    }
}

CustomNavigationPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<NavigationPage
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="TransparentNavBarXForms.CustomNavigationPage"
    xmlns:iOS="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
    iOS:NavigationPage.IsNavigationBarTranslucent="True"
    BarTextColor="White">
    <NavigationPage.BarBackgroundColor>
        <OnPlatform x:TypeArguments="Color">
            <On Platform="Android, iOS" Value="Transparent" />
        </OnPlatform>
    </NavigationPage.BarBackgroundColor>
</NavigationPage>

iOSCustomNavigationRenderer

using System.ComponentModel;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using UIKit;
using System;
using TransparentNavBarXForms;
using TransparentNavBarXForms.iOS.Renderers;

[assembly: ExportRenderer(typeof(CustomNavigationPage), typeof(CustomNavigationRenderer))]
namespace TransparentNavBarXForms.iOS.Renderers
{
    public class CustomNavigationRenderer : NavigationRenderer
    {
        public override void ViewDidLoad()
        {
            base.ViewDidLoad();

            UINavigationBar.Appearance.SetBackgroundImage(new UIImage(), UIBarMetrics.Default);
            UINavigationBar.Appearance.ShadowImage = new UIImage();
            UINavigationBar.Appearance.BackgroundColor = UIColor.Clear;
            UINavigationBar.Appearance.TintColor = UIColor.White;
            UINavigationBar.Appearance.BarTintColor = UIColor.Clear;
            UINavigationBar.Appearance.Translucent = true;
        }

        protected override void Dispose(bool disposing)
        {
            if (disposing)
            {
            }

            base.Dispose(disposing);
        }
    }
}

CustomNavigationPageRenderer

using Android.Support.V7.Widget;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using Xamarin.Forms.Platform.Android.AppCompat;
using AView = Android.Views.View;
using Android.App;
using Android.Content;
using Android.Widget;
using TransparentNavBarXForms;
using TransparentNavBarXForms.Droid.Renderers;

[assembly: ExportRenderer(typeof(CustomNavigationPage), typeof(CustomNavigationPageRenderer))]
namespace TransparentNavBarXForms.Droid.Renderers
{
    public class CustomNavigationPageRenderer : NavigationPageRenderer
    {
        public CustomNavigationPageRenderer(Context context) : base(context)
        {

        }

        IPageController PageController => Element as IPageController;
        CustomNavigationPage CustomNavigationPage => Element as CustomNavigationPage;

        protected override void OnLayout(bool changed, int l, int t, int r, int b)
        {
            CustomNavigationPage.IgnoreLayoutChange = true;
            base.OnLayout(changed, l, t, r, b);
            CustomNavigationPage.IgnoreLayoutChange = false;

            int containerHeight = b - t;

            PageController.ContainerArea = new Rectangle(0, 0, Context.FromPixels(r - l), Context.FromPixels(containerHeight));

            for (var i = 0; i < ChildCount; i++)
            {
                AView child = GetChildAt(i);

                if (child is Android.Support.V7.Widget.Toolbar)
                {
                    continue;
                }

                child.Layout(0, 0, r, b);
            }
        }
    }
}

App.xaml.cs

public partial class App : Application
    {
        public App()
        {
            InitializeComponent();

            MainPage = new CustomNavigationPage(new MainPage());
        }
    }

Please include some code as a starting point. Don't post your code as link or image but format it into code blocks with triple backticks `\`\`\``. From [review](https://stackoverflow.com/review/triage/26621806). — sanitizedUser, Jul 08 '20 at 15:57
Anyway, add the necessary code on this page. If the tutorial website changes the code it will become unavailable to future readers. — sanitizedUser, Jul 08 '20 at 16:08

score 0 · Answer 1 · answered Jul 08 '20 at 18:19

One thing that you could try without using custom renderers is to create your own navigation toolbar. For example, you create a StackLayout myCustonNavbar; in which you insert all the elements that you want (like the back button of a particular color) and than you can set it as a custom toolbar with NavigationPage.SetTitleView(this, myCustonNavbar)

score 0 · Answer 2 · answered Jul 10 '20 at 09:07

You could use the style.xml below to change the back button color.

 <style name="MainTheme.Base2" parent="Theme.AppCompat.Light.NoActionBar">
<item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
</style>
<style name="DrawerArrowStyle" parent="@style/Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
<item name="color">#2196F3</item>

Change the Theme in MainActivity:

   [Activity(Label = "XamarinDemo", Icon = "@mipmap/icon", Theme = "@style/MainTheme.Base2", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]

Thr original back button color is white:

I set the back button color to blue:

Change back button color in Xamarin.Android

2 Answers2

Linked