Consistent Mobile UI Theming

Xamarin Forms allows us to write code once that targets all three major platforms – iOS, Android, and Windows Phone. But the default color palette for the platforms differ – iOS prefers a light background with dark text, while the default themes for Android and Windows Phone are the opposite of that. And unfortunately for us, that’s usually not good news. From a branding perspective, it is advantageous to have a consistent color palette between our application properties – no matter which mobile platform our application is running on. Furthermore, if we need to produce artwork (icons, glyphs, background images, etc.) for our app, then we would prefer to only need to do that work once.

The simplest and easiest way to provide that consistency among the three platforms is through themes. While Apple prefers that applications on their platform adhere to the visual theme of the operating system, both Android and Windows Phone offer ways to customize the theme elements. In my previous post, you saw how I used a custom Android theme to hide the Main Activity Icon while also switching the UI over to a light-background theme. In this post, we will do the same for Windows Phone.

Build your next mobile application
with Wintellect and Xamarin!

Customizing the Windows Phone theme involves a fair amount of work, but it turns out that someone – Jeff Wilcox – has already done most of the work for us! We can simply pull in a small nuget package (https://www.nuget.org/packages/PhoneThemeManager/) into our Windows Phone target project. This package allows you to select either a “dark” or “light” theme, and the “light” theme works well for this application. After adding the package to the Windows Phone project, you need to add one single line of code to the MainPage code behind just prior to the call to Forms.Init():

namespace WinPhoneThemesDemo.WinPhone
{
    public partial class MainPage : global::Xamarin.Forms.Platform.WinPhone.FormsApplicationPage
    {
        public MainPage()
        {
            InitializeComponent();
            SupportedOrientations = SupportedPageOrientation.PortraitOrLandscape;
            ThemeManager.ToLightTheme();
            global::Xamarin.Forms.Forms.Init();
            LoadApplication(new WinPhoneThemesDemo.App());
        }
    }
}

And now, if you build and run the application again, we now have all three platforms running with a consistent color scheme:

Of course the styles of the individual elements (primarily the fonts and text sizes) are still consistent with the native UX of each platform, but at least our color palette is now consistent across all three:

And once again, source code for the updated sample application can be found here: https://github.com/Wintellect/XamarinSamples/tree/master/WinPhoneThemesDemo

Next up – augmenting our cross-platform Xamarin Forms application with native features.