I wanted to take a quick second to share a few tips on making your Xamarin.Forms app beautiful with just a few lines of code.

Tip 0: Pick a color palette

I had to start my tips at 0 because this tip is so important for your application. Your application needs an identity and a base to start with… a palette that you can pick from.

Take a hint from Google and browse through their Color guidelines and then use http://www.materialpalette.com/ to pick your colors. Use these not only in the app specific theme for Android, but throughout your Xamarin.Forms applications using Styles.

Tip 1: Use a Light Theme

Light themes are iOS’s default theme. Don’t fight it, embrace it. By embracing the light theme there is no need to ever set any custom colors in your application. There is a bit of setup required to get this going on each platform using your new palette.

Android

I have covered this in the past so I wont repost the code, but GO READ THIS POST!! Understanding Android app themes is very important. By applying default Light Holo and Material themes to your application you can completely transform your application.

iOS

There is very little that you need to do to optimize iOS applications since the core theme is already light. The only thing to update is the Status Bar color, which I blogged about earlier, and the title bar color itself. You can accomplish this by opening our AppDelegate.cs and applying a few lines of code in the FinishedLaunching:

Windows Phone

Let’s not forget about Windows Phone as it is the most interesting. By default Windows Phone (silverlight) apps change their themes based on the user preference. You will normally see a dark theme as this is the phone default, but there is a nifty NuGet package from my hero Jeff Wilcox that enables you to manually force a theme for your application. Follow his nifty guide to get you up and running.

Side Tip: On a NavigationPage you may want to set the BarTextColor to White or a shade of black

Tip 2: Don’t set background colors

Unless you decided to ignore Tip 1 and need to go with a custom dark theme there is no need to ever set a background color in Xamarin.Forms for an entire page. You could set it for portion of the page or perhaps strips, but never the full page. Let the main applications theme work for you. This will ensure your font colors work correctly out of the box.

Tip 3: Don’t Use Custom Fonts

Don’t do it unless you REALLY REALLY have to. There is no need to put a comic sans font in your application. Let the platforms work for you. iOS does have plenty of great fonts built right in and I do recommend you customize your iOS apps using these, however let Android’s Roboto and Windows Phone’s Segeo WP work for you.

Tip 4: Padding & Spacing

This tip requires a bit more of an eye for design and a bit of energy. Each platform has some specific requirements around the default padding and spacing that is between controls on the page. Android uses a 8dp baseline grid for components 4dp baseline grid for type alignment. 

Windows Phone on the other hand uses a 10 pixel spacing grid between everything on the screen. Take a look at Jeff Wilcox’s Windows Phone MetroGridHelper to enable an overlay to help with spacing.

You can use Xamarin.Forms Device.OS and OnPlatform to do custom tweaks to your Padding. 

So Much More

These are just 5 of my top tips to help start your Xamarin.Forms app on the right foot, but many of them apply to core iOS and Android applications as well. Do you have tips on styling apps? Leave them in the comments below!

Launch Screen Colors

In general you can just hide the status bar at launch, but if you want the time to overlay on it you will need to head into your Info.plist file. You will find a Status Bar entry and you simply need to change it to Light Content and then it will display white text and icons. Or set this info in you info.plist.

Inside UIViewControllers

Now inside the UIViewControllers are a bit different. We first want to style the tint and the bar tint of the navigation bar. I am goign to set it to a blue background with a white tint. I do this in my FinishedLaunching where I create my UINavigationController in the AppDelegate:

navigationController.NavigationBar.TintColor = UIColor.White;

navigationController.NavigationBar.BarTintColor = UIColor.FromRGB(52,152,219);

Now were are getting closer, but still have 2 issues.

• The text is black

• The status bar icons and text are black

NavigationBar Text Appearance

To fix the text we head back to our AppDelegate and we have to update the “TitleTextAttributes” of our UINavigationBar.Appearance:

Status Bar

From my findings teh status bar on each UIViewController is actually controlled separatelly, which is very annoying. We must update the NavigationBar.BarStyle and set it to the BlackStyle to get the desired white text and icons. I do this on the ViewDidLoad method.

NavigationController.NavigationBar.BarStyle = UIBarStyle.Black;

There you have it! A nice new themed iOS app. If you find a better way of doign this please let me know in the comments.

Xamarin.Forms!

If you are using Xamarin.forms you must also set the BarTextColor = Color.White on your NavigationPage! Additionally you should go into your info.plist and set “View controller-based status bar appearance” to No