Steven Thewissen
September 2017

Creating a good-looking Xamarin Forms UI: Runkeeper

Creating a good-looking Xamarin Forms UI: Runkeeper

My previous post about creating a fancy Xamarin Forms UI was a whole lot of fun to do and I got some awesome feedback so it’s time for another. Since running is one of my hobbies I see a whole lot of this app up close. It’s both as simple in design as it is functional which makes it a great case for this; Runkeeper!

This is a rather long post, so here’s an index for you to quickly jump to where you want to be.

  1. Marrying Xamarin Forms UI and Runkeeper
  2. The Start screen on iOS
  3. The Me screen on iOS
  4. The Start screen on Android
  5. The Me screen on Android
  6. How much time does it take?
  7. Speeding up the process
  8. Conclusion

Marrying Xamarin Forms UI and Runkeeper

I wrote about creating a fancy UI in Xamarin Forms before and already concluded that with a bit of effort you can pull off similar UI’s to when you’re creating a Xamarin.iOS or Xamarin.Android app. As always the code for this is on my Github page so let’s get straight into it.

Note: Runkeeper uses Museo Sans for their text but only the medium weight version of that font is free. Therefore in some places the font for this post will look bolder or less bold than the original.

The Start screen on iOS

There’s actually not a whole lot going on at first sight. Some buttons at the bottom, a map and a basic navigation bar/tab bar combination. To recreate it in Xamarin Forms shouldn’t be too hard to pull off either. Using the Xamarin.Forms.Maps NuGet package we can create a cross-platform map and using the same font and iconography as Runkeeper does there is hardly any noticeable difference!

Original vs. Xamarin Forms UI

However there are a few notable things happening here. First off on iOS I implemented a custom renderer that does a few things to our tab bar control:

A second custom renderer takes care of some navigation bar related things:

The Runkeeper logo is only present on the Start tab and the Start tab also has a navigation bar with a different height when compared to all the other tabs. To get this behaviour I created a custom class inheriting from ContentPage. This is what our Start page will inherit from and is only there so we can target that page specifically in another custom renderer. In this renderer we do the following things:

The Me screen on iOS

The Runkeeper app obviously has some more screens besides the Start screen. That’s why I also took a shot at the Me screen which also has some interesting parts to it. My tinkering eventually resulted in the following:

Runkeeper as a Xamarin Forms UI

So what moving parts do we see here?

The Start screen on Android

I’ve said it before and I’ll say it again here; I’m an iOS guy.  Android confuses me with its plethora of XML files to style your app. I always start with iOS to get it exactly the way that I want it and then move on to Android. I was in for a shock when I first opened the Runkeeper app and saw that it was quite different from the iOS version. Here’s what I ended up with:

Runkeeper as a Xamarin Forms UI

The first thing you’ll notice is that the Android version has no tabs. Instead it has a master/detail setup going on. Another thing that you’ll notice is that the map control is full screen with the buttons seemingly floating over it whereas in the iOS app these are separated. Here’s what I did to get this looking similar:

I also added a platform-specific Margin to the views containing the buttons so the map can be seen and the buttons seem to be floating on top of the map. Because almost half of the map is covered by our buttons the controls on the map (such as the user’s location) need to shift up without disturbing the map itself. This is done through a custom renderer because the native GoogleMap has a Padding property that can be used for exactly this type of problem.

The Me screen on Android

This screen looks a bit more familiar to what we saw in the iOS version. However in my opinion the actual screen in Runkeeper’s Android app looks worse (in my honest opinion) than what Xamarin Forms gives you straight “out of the box”. What do I mean by that? Like I mentioned before I started with the iOS look and feel. Since Xamarin Forms UI is shared across platforms I already had a UI in place for Android when I was done with iOS. This UI looks better on Android (with minor tweaks) than the actual Runkeeper app does. See for yourself:

Runkeeper as a Xamarin Forms UI

Some things that were done to recreate this page:

And perhaps it’s also interesting to note what I didn’t do:

How much time does it take?

An argument for native development could be that it takes you more time to create something like this in a Xamarin Forms UI but this only took me about a morning to pull off. It’s all a matter of experience and once you figure out how to do something you can re-use that piece of code in future apps. A custom renderer created to perform a specific task is easily re-usable across any future app you create.

I still firmly believe that the most amount of time is spent in actually designing (placement of elements, colors, which fonts to use, iconography) the app. Whether you’re creating the UI in Xamarin Forms or natively this is time you’re going to have to spend anyway. Actually implementing the UI is not considerably faster or slower either way in my opinion.

Speeding up the process

There are things you can do to speed up your Xamarin Forms UI tinkering process. When you’re constantly adjusting margins and paddings to nudge elements into place compiling and deploying takes a lot of time. There are tools out there like GorillaPlayer, Xamarin Live Player or LiveXAML that greatly simplify this workflow.

For this post I tried LiveXAML and it does exactly what it says on the box. All you need to do is install the extension in Visual Studio and install the NuGet package in your project. Whenever you save any XAML file, it automatically updates the running application. This is ideal to quickly tinker with things like paddings/margins and colors. However when you change things in C# code such as adding a custom renderer you will need to rebuild the app and redeploy to see your changes.

Conclusion

This was a really fun app to recreate and how spot on the result is kind of amazes me. The app uses a lot of default elements to create a really simple yet effective layout and that’s where Xamarin Forms definitely shines. Another thing where Xamarin.Forms shines is its community of very useful tools and controls. Something like the CarouselView in this post is really simple to use and the fact that someone already went through the effort to create it for others to use is awesome.

You can find the code here: https://github.com/sthewissen/KickassUI.Runkeeper

The following tools were used to create this app: