Removing navigation back arrow in Xamarin.Android

Question

I have a Xamarin.Forms app. I would like to remove/hide the back arrow in my navigation bars but keep the title. I was able to do it in iOS using the following code inside my NavigationPageRenderer:

UINavigationBar.Appearance.BackIndicatorImage = new UIImage();
UINavigationBar.Appearance.BackIndicatorTransitionMaskImage = new UIImage();

Is there any equivalent code for this in Android that I could use inside my renderer or in the MainActivity? I tried this.ActionBar.SetDisplayHomeAsUpEnabled(false); inside my MainActivity but the ActionBar always returns null. Below is my my MainActivity code:

public class MainActivity : FormsAppCompatActivity
{
    protected override void OnCreate(Bundle bundle)
    {
       TabLayoutResource = Resource.Layout.Tabbar;
       ToolbarResource = Resource.Layout.Toolbar;

       base.OnCreate(bundle);

       global::Xamarin.Forms.Forms.Init(this, bundle);
       LoadApplication(new App());
       if (Window != null)
       {
          Window.SetStatusBarColor(Android.Graphics.Color.Transparent);
       }

       this.ActionBar.SetDisplayHomeAsUpEnabled(false);

     }
}

What I want my navigation bar to look like something like the image below (this is in my iOS app).

The back arrow is just the back button title: NavigationPage.SetBackButtonTitle(this, "\u25C3");

In my ContentPage:

public partial class HomeTabPage : ContentPage
{
   public HomeTabViewModel vm;

   public HomeTabPage()
   {
      InitializeComponent();
      BindingContext = vm = new HomeTabViewModel(this);
      NavigationPage.SetHasBackButton(this, false);
      NavigationPage.SetBackButtonTitle(this, "\u25C3");
   }
}

This would be something like Page.HasBackButton = false. You may have to cast this: ViewController.ParentViewController.NavigationItem.SetHidesBackButton(!((CustomContentPage)this.Element).HasBackButton, false); — Marvin Klar
If you meant NavigationPage.SetHasBackButton(this, false); then yeah I tried that but not working — iamsophia
Which page did you use when you called NavigationPage.SetHasBackButton(this, false)? If you set it on the NavigationPage, it won't do anything. — DavidS
Can you provide the effect screenshot that you want ? NavigationPage.SetHasBackButton(this, false); should works if you call it in contentPage. — Lucas Zhang

Lucas Zhang Lucas Zhang · Accepted Answer · 2019-03-05T06:01:30

Solution: You can define a custom view as navigationBar of your content on specific platform (Android).Refer to the following code.

public partial class Page1 : ContentPage
{
    public Page1 ()
    {
        InitializeComponent ();

        if(Device.RuntimePlatform=="Android")
        {
            NavigationPage.SetHasBackButton(this, false);
            NavigationPage.SetTitleView(this, SetBackView("Title", "back"));
        }


    }

    private void BackButton_Clicked(object sender, EventArgs e)
    {
        Navigation.PopAsync();
    }

    StackLayout SetBackView (string title,string backButtonContent)
    {
        Button backButton = new Button()
        {

            Text = backButtonContent,
            TextColor = Color.White,
            FontAttributes=FontAttributes.None,
            BackgroundColor = Color.Transparent,
            Margin = new Thickness(-20,0,0,0),
        };
        backButton.Clicked += BackButton_Clicked;

        StackLayout stackLayout = new StackLayout
        {

            Children = {

                backButton,

                new Label{

                    HorizontalTextAlignment=TextAlignment.Center,
                    VerticalTextAlignment=TextAlignment.Center,
                    Text=title,
                    TextColor=Color.White,
                    BackgroundColor=Color.Transparent,
                },

            },
            VerticalOptions = LayoutOptions.CenterAndExpand,
            HorizontalOptions = LayoutOptions.StartAndExpand,
            Orientation = StackOrientation.Horizontal,
        };

        return stackLayout;
    }

}

And the effect is just like the following ,you can set the content of page title and backButton as you want.

Removing navigation back arrow in Xamarin.Android

1 Answers