Changing Navigation Bar Color Dynamically

So, I’m still working on my current project that I discussed in my last two posts. And recently new requirement came to my desk. Our UX designer just created a wonderful mock up, which I was really sure would impress our client, but unfortunately I didn’t know how to implement it to real app. I wasn’t even sure it was possible. She made something like thematic menu, so she picked different color on everything, including the navigation bar, depended on the menu user selected. And it took me all day long searching on internet and going through countless trial and errors before figuring out the solution.

Before I continue, I want to give appreciation to this amazing blog post, Let’s Override Navigation Bar Button Click in Xamarin Forms. This post has been enormous help for me finding solution to this problem. I really recommend any of you to visit that blog because you will find many great useful post there. Now, let’s back to the business.

Navigation View Model

So, when I was doing a research about Navigation Bar in Xamarin forms, I found out that some properties in Navigation Class could be bind, one of the them is BarBackgroundColor. Other bindable properties that could be useful are BarTextColor and BarBackgroundImage. Well, I believe you can guess the function of that properties based on its name, but for this example I will just discuss about BarBackgroundColor, a property that determines the color of the navigation bar. So, to bind a color to that property, I created a view model, and then bind that view model to the Navigation Page. Here is  code for the view model.

public class NavigationViewModel : BaseViewModel
{
    Color barBackgroundColor = Color.Transparent;
    public Color BarBackgroundColor
    {
        get => barBackgroundColor;
        set => SetProperty(ref barBackgroundColor, value);
    }
}

Binding BarBackgroundColor

Using breakfast example from my two last post, let’s go back to the Breakfast View Model. In this class ,I updated (again), about how my app will navigate. And just before the current page navigate to other page, I will bind the navigation bar color. Here’s the latest Breakfast View Model looks like. Note: (again) I only attach the changed parts.

public BreakfastViewModel()
{
    BreakfastMenuList = new ObservableCollection<BreakfastMenu>()
    {
        new BreakfastMenu() { ImageSource = "Burger.png", MenuTitle = "BURGER", BackgroundColor="#50616e" },
        new BreakfastMenu() { ImageSource = "Pizza.png", MenuTitle = "PIZZA", BackgroundColor="#093f89" },
        new BreakfastMenu() { ImageSource = "EggBacon.png", MenuTitle = "BACON", BackgroundColor="#00a5ec" },
        new BreakfastMenu() { ImageSource = "Sandwich.png", MenuTitle = "SANDWICH", BackgroundColor="#37248a" },
    };
    MenuTappedCommand = new Command( () => MenuSelected());
}

private void MenuSelected()
{
    NavigationPage navPage = new NavigationPage();
    NavigationViewModel navViewModel = new NavigationViewModel();

    switch (SelectedBreakfastMenu.MenuTitle)
    {
        case "BURGER":
            navPage = new NavigationPage(new BreakfastBurger());
            break;
        case "PIZZA":
            navPage = new NavigationPage(new BreakfastPizza());
            break;
        case "BACON":
            navPage = new NavigationPage(new BreakfastBacon());
            break;
        case "SANDWICH":
            navPage = new NavigationPage(new BreakfastSandwich());
            break;
    }

    navViewModel.BarBackgroundColor = Color.FromHex(SelectedBreakfastMenu.BackgroundColor);
    navPage.BindingContext = navViewModel;
    navPage.SetBinding(NavigationPage.BarBackgroundColorProperty, new Binding("BarBackgroundColor"));
    Application.Current.MainPage = navPage;
}

As you can see at the code above, We don’t need any parameter anymore from the page, because I was’t actually navigating. I just switched out the current main page with the new one. Because if I had used PushAsync just like in my previous post, I would’ve had double navigation bars, which is unwanted. But this method allow me to change navigation bar color in each menu without having additional nav bar. But it also has obvious side effect. Yes, whenever user try to navigate to the previous page, it will directly navigate to the outside of the app, because it doesn’t have any previous page in navigation stack. Nah, it’s where the blog post that I mention earlier, come in handy. We will override the navigation process.

Handling Back Navigation

I will left the detail explanation to the original source. That blog post contains everything you need to know about overriding back button. I will just show you, how I implement this awesome method to my project. I just inherit this CoolContentPage class and add this few lines to my destination page, and everything works like wonder.

public partial class BreakfastPizza : CoolContentPage
{
    public BreakfastPizza()
    {
        InitializeComponent();

        if (EnableBackButtonOverride)
        {
            this.CustomBackButtonAction = () =>
            {
                Application.Current.MainPage = new BreakfastPage();
             };
        }
     }
}

UPDATE : Add Custom Back Button on Android

Credit:

  • Icon from FlatIcon, Burger icon by Freepik, Pizza icon by Smashicons, EggBacon and Sandwich Icon by Twitter
  • Override Navigation Back Button by Udara Alwis (blog)
Advertisements

One thought on “Changing Navigation Bar Color Dynamically

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s