Creating beautiful cross-platform apps for iOS, Android and Windows with Visual Studio. Part I. User Interface

Download free Android, iOS or Windows Phone apps used in this article and GET FIT!

See also this article on my MSDN Blog

Cross platform apps: dream becomes reality

With recent additions to Visual Studio 2015, it becomes possible to develop apps for all 3 major platforms: iOS, Android, Windows, and also target desktop Windows and OSX. Clearly, the world is changing and I’d like to share my experience in developing rich cross-platform apps that look great and work on iPhone, Android and Windows. Yes, you heard it right, it is now possible to create rich code that compiles to native bits on each platform, with only one code base (or one developer team, with 80-90% code reuse!), all with Visual Studio, C# and .NET. This is very powerful, and clearly developers benefit from this approach by Microsoft: it greatly increases productivity even for small app development teams and allows developers to create native apps that work across all major platforms.

I’ll share more of my experience developing Active Fitness app (http://activefitness.co) for Android, iOS and Windows. You can download the app and see for yourself by clicking the links above and downloading the app for the device of your choice. I want to share the experience of developing these apps, because I feel that it’s a revolution or rather a natural evolutionary step in app development that changes our perception of 3 operating systems incompatibility, and instead focuses on making developers productive.

What’s especially important, Microsoft provides Azure Mobile Services cross-platform libraries for Android, iOS, Windows Phone, Windows and Xamarin, so that developers of cross-platform apps can use cloud resources efficiently.

Designing cross-platform user interface

Mobile user interfaces have changed dramatically since the first iPhone. Windows has Modern Design and Google has Material Design, while Apple made significant changes to its user interface in iOS 8. What is common? Designers call it dropping skeuomorphism, or using material world objects in user interface graphics, and using clean functional design paradigms instead. I like calling a cross-platform combination of Modern Design, Material Design and Apple Design guidelines a pragmatic design, but I don’t pretend that I own the name.

image
From the very beginning I decided to create a common interface design that would satisfy design guidelines of Apple, Google and Microsoft. With Xamarin Forms, a recent addition to Xamarin cross platform suite, available now directly from Visual Studio, it becomes possible, with code re-use close to 80-90%, including user interface! This is a stunning achievement, given that most shops that make apps these days have very experienced developers that know iOS very well, then they need to hire developers that know Android and Windows. The cross-platform native approach taken by Xamarin Forms and other cross-platform tools changes the way developers make apps!

The three screenshots here are from (left to right) Android, iOS and Windows Phone Active Fitness app. They are developed with the same code base, with 100% C# and XAML and naturally fit Apple, Google and Windows ecosystems. The main approach was: keep it simple: keep it beautiful! Modern lines in this design naturally blend with Google Material Design, Windows Modern Design and Apple design, because this design is clean and functional.

Xamarin Forms introduced a set of controls: Pages, Views, Layouts and Cells that blend naturally with all three platforms: Android, iOS and Windows and provide a natural user experience. What’s even more important: one developer or a very small team of developers can now develop for all 3 major platforms (plus OSX and Windows Desktop), with one code, and one language! You can look at Xamarin Forms Gallery to get a feel of what cross-platform controls are available.

Pages

Pages are very natural part of Web sites, as well as native apps in iOS, Android and Windows. Xamarin Forms offer a wide selection of Pages.

Active Fitness app takes advantage of MasterDetailPage which is very popular with Android and iPhone apps. The action bar is also very similar in Android and iPhone apps. In Windows Phone we’re more used to bottom application bar. The “sandwich” icon is becoming very popular to present a “drawer” navigation pattern.  In Xamarin Forms you can use Master Detail page to take advantage of this design. If you look at some of the latest designs for Windows Phone: Facebook app, or OneDrive app implement drawer design pattern, which is also very common in Android and iOS.

 

clip_image008

Layouts

Layouts are ways to align and position controls on your user interface. Most common layouts are grids, stacks, relative or absolute layouts. It’s interesting that while Xamarin Forms use XAML as a metadata language, most layouts and controls are actually very similar to Android AXML objects. Android developers building cross-platform apps find themselves right at home by using Xamarin Forms!

 

Views

Views are often called UserControls in Windows apps. With the cross-platform nature of Xamarin Forms, there’re many views: for labels, entry controls, buttons, date and time pickers, progress controls, and they all look native on the platform you compile the app for:

Cells

Xamarin Forms also provide cells. Cells are specialized elements used for items in tables.

Summary

The cross-platform apps in this example are developed in XAML and C# with .NET that natively runs in iOS, Android and of course Windows. .NET has a long history of open source development, and it now becomes official with Microsoft integrating cross-platform tools with Visual Studio, open sourcing .NET. Many popular 3D games also run on multiple platforms backed by .NET and C#, with Unity. Game designs are very different from other apps, so we’ll focus on Xamarin Froms as technology suitable for cross-platform apps. Interested in this post?

Please, let me know by sending a cheerful COMMENT or twit (@kashleytwit) and I’ll keep this series to tell you more about making beautiful cross-platform apps for Windows, Android and iOS. In the following posts I’ll show you how to make cross-platform apps work with speech, voice, storage, GPS, sensors and more!

Download free Android, iOS or Windows Phone apps used in this article and get fit!

Active Fitness for PC, tablets and Surface

Download Active Fitness for PC, tablets and Surface: http://apps.microsoft.com/windows/app/active-fitness/5a64d9f1-aea7-493c-a353-da41c08c0e77

Active Fitness for PCs and Tablets

Active Fitness is a personal trainer and fitness organizer for your Surface tablets or any Windows PC, with a companion Windows Phone app and a social network of quarter of a million users. Active Fitness is great for running, cycling, walking and hundreds of other activities, the app that earned raving reviews by Microsoft Phone blog and WPCentral for its companion Windows Phone app. Now with a Windows version of the app, you can enjoy your free sports analytics from the comfort of your tablet or PC and import data from other apps or devices.

clip_image002

Take your active lifestyle with you

With Active Fitness you can use the same account you used for companion Windows Phone app, or your Winter Sports app account from another popular app for tracking activities. You are presented with a simple and rich interface that allows you to check your stats, add your activity from Windows Phone or any other app or device, check your training schedule, find your friends and see where they run or exercise and more!

clip_image004

Hub for all your sports activities

Active Fitness automatically synchronizes your data with Windows Phone Ski & Ride app, and easily imports your data from other apps, Web sites and devices. Essentially, Active Fitness is a personal trainer, organizer and a fitness hub for all your sports activities on any Windows devices.

clip_image006

Personal Training

Active Fitness provides dozens of training plans: both videos and automatically tracked with Active Fitness app for Windows Phone. Training plans keep you organized and motivated, and you can see your progress real-time as you run or cycle with Windows Phone.

clip_image008

Companion app for Windows Phone

Active Fitness app comes with a free companion app for Windows Phone: the app that earned raving reviews from Microsoft Phone blog, WPCentral and is included in Nokia Collection.

clip_image010

Feels like Olympics

Active Fitness has a rich global leaderboard that immediately makes you feel like you are in the middle of Olympic Games. Compete with thousands other users of Active Fitness social network and Active Fitness will track your position on the leaderboard.

clip_image012

Where’s your friend?

Active Fitness has 200,000+ active users, the number that grows by thousands every day. To see where your friends are, use Active Fitness Friend Finder feature to find your friends.

clip_image014

For Windows PC, tablets and Surface

clip_image015

For Windows Phone

clip_image016

POWERED BY ACTIVE FITNESS SOCIAL NETWORK

Re-imagining app development: Introducing Windows 8 at Microsoft Silicon Valley campus, April 4th

clip_image001[3]

Are you interested in experiencing the next great app platform opportunity, Windows 8? Do you want to learn how to get started building apps for this new platform?

We are inviting the Silicon Valley startup community to a full-day, knockout, deep dive event taking place on our Silicon Valley Campus. Developers and designers alike will take the stage to show you how to take advantage of this new platform opportunity. Several startups will demo their brand new apps and talk about their early experiences developing for Windows 8, while the Microsoft team will provide attendees the opportunity to play with the platform and the tools needed to get started. Sessions will cover designing for the new Metro UI, building for the platform, and monetizing your apps.

Continue reading “Re-imagining app development: Introducing Windows 8 at Microsoft Silicon Valley campus, April 4th”