Navigation Bar behavior in Android

KeithRomeKeithRome USUniversity ✭✭

I swear, inconsistency between versions (and devices) of Android will be the death of me.

Consider the following very simple XForms application:

using Xamarin.Forms;

namespace AndroidNavBar
{
    public class App : Application
    {
        public App ()
        {
            var button = new Button {
                VerticalOptions = LayoutOptions.Center,
                HorizontalOptions = LayoutOptions.Center,
                Text = "Tap Me"
            };

            MainPage = new NavigationPage (
                new ContentPage {
                    Title = "Page 1",
                    Content = button
                }
            );

            button.Clicked += async (sender, e) => await MainPage.Navigation.PushAsync(
                new ContentPage {
                    Title = "Page 2",
                    Content = new Label {
                        HorizontalOptions = LayoutOptions.Center,
                        VerticalOptions = LayoutOptions.Center,
                        XAlign = TextAlignment.Center,
                        YAlign = TextAlignment.Center,
                        Text = "Page 2"
                    }
                }
            );
        }
    }
}

Run it and tap the button to push the second page onto the navigation stack.

When this app is run under different versions of Android, you get different results in the navigation bar:

In 4.0.3 you get a "<" symbol, the app icon, and the title of the current page. Only the "<" and icon will respond to taps.
In 4.4.2 you get the same visual appearance, however the title will also respond to taps.
In 5.1.0 you get a left arrow "←" symbol, the app icon, and the title of the current page. Like in 4.0.3 the title does not respond to taps, but the arrow is much larger than the "<" symbol, which makes it easier to hit.

In my real app I am hiding the icon and only showing the symbol and title. This is great in 4.4.2 and tolerable in 5.1.0. But in 4.0.3 it is very difficult to tap that slender "<" symbol.

Does anyone know where I would begin to look in order to customize the nav bar under 4.0.3 to ensure that the title also responds to taps?

Sign In or Register to comment.