iamsophia
iamsophia

Reputation: 796

Removing navigation back arrow in Xamarin.Android

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).

enter image description here

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");
   }
}

Upvotes: 1

Views: 1651

Answers (1)

Lucas Zhang
Lucas Zhang

Reputation: 18861

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.

enter image description here

Upvotes: 1

Related Questions