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!

Native Cross Platform UI Ideas for iOS, Android, Windows Phone with Xamarin

For many developers using C# and coming from the modern UI apps on Windows, developing cross-platform UI design with the best usability for Windows, iOS and Android presents an interesting challenge. First, they feel like they are coming to a more ‘traditional’ UI: let’s face it Microsoft team has created some very advanced and neat design concepts with the modern apps: with Modern design language, minimalism, panorama, motion animations and pivot. How do you translate that into iOS and Android?

Luckily, Xamarin team has done a lot of research porting and thinking through many of these ideas. Xamarin Forms are based on XAML and work on iOS, Android and Windows Phone natively. Here’s some interesting ideas to keep in mind building a cross platform app with Xamarin Forms:

Is cross-platform UI achievable and does it work fast and look native? Thanks to Xamarin team’s efforts the answer to this is yes! You can write UI code that will look and feel native with native speeds on iOS, Android and Windows Phone.

Things to remember: Forms markup uses XAML, but Xamarin team chose to use objects from iOS and Android stack. So instead of StackPanel you get StackLayout, TextBlock is Label. Attributes also resemble those of Android AXML: Visibility becomes IsVisible (we actually like that, it eliminates a converter which otherwise needs to be used on each boolean property). Background color property becomes BackgroundColor, Foreground property becomes TextColor, ForegroundColor etc depending on the context. In other words: instead of cut and paste from Windows Phone you need to really update your XAML. Which makes a lot of sense, Xamarin team chose to use Android/iOS UI elements in XAML.

Xamarin also figured out a very smart strategy wrapping native controls, while maximizing code re-use. On the screenshot below, Xamarin Forms maps control renders as a native Android, iOS and Windows Phone map on each platform.

 

Source: Xamarin: Controls Gallery

Active Fitness with SensorCore – Pedometer + GPS + Social + Action Photo + Music all in one free app

DOWNLOAD new version

Do you need to spend extra bucks on pedometer when you already have a phone? Now with SensorCore technology in latest Windows Phone 630 and other models, your phone can work as a pedometer and count your steps, whether walking or running 24×7. With apps like Active Fitness which already has millions of active users, adding step counter in addition to GPS Tracking adds a battery efficient way and yet another dimension to measuring your sport performance.

wp_ss_20140622_0003

 

Active Fitness unites millions of active users in a fun friendly social sports app and network. Now with new Lumia 630 devices and SensorCore technology, Active Fitness adds battery friendly Pedometer function. Simply take your phone with you and it’ll automatically count steps whole day long! Very little battery consumed. Active Fitness has also been redesigned to benefit from new features of Windows Phone 8.1, you’ll immediately notice many friendly improvements for an already beautiful app. Other features include: multiple activities from a comprehensive library, music, action photos, GPS tracking, goals, training module powered by professional instructors and more!

 

image

Detailed charts of your activity

Active Fitness allows you to drill from monthly to weekly to daily view and then more into every split of your run! Windows Phone brings a clean fresh consistent design and everything about this fitness app looks great.

1

 

DOWNLOAD

Rollerblade® Inline Skates app launched at BUILD

As the summer and spring season starts, I’m happy to announce that we just launched Rollerblade® Inline Skates app at Microsoft BUILD conference in San Francisco!

http://bit.ly/rollerbladeapp

The awesome sports app is immediately available from Nokia Collection on all Nokia Windows Phone 8.0 devices. More to come… SmileSmileSmileSmileSmile

From our partner:

West Lebanon, NH –Rollerblade®, the international leader in the inline skating industry, recently announced the launch of the Rollerblade® Inline Skating App, a brand new application that’s taking the sport to a whole new level. Through a partnership with Nokia, Microsoft, and the Active Network, the Rollerblade® Inline Skating App is the official application for the sport and will enhance the skating experience for users worldwide. The new Windows 8 Phone app allows users to enjoy features such as tracking workouts and fitness goals, sharing progress and photos with friends and family via social media, finding the newest gear, and photographing their skating experience.

DOWNLOAD THE APP

clip_image002

Windows Phone: one week with professional ski and snowboard instructors

Event Facts:
2
0+ teams lead by National level instructors with Windows Phones
200 ski and snowboard instructors
30+ Nokia Lumia Windows Phones uploading real-time stats and photos
Nokia and Microsoft employees helping on-site and skiing
1,000,000 vertical ft tracked by Winter Ski & Ride app
Technology used: Windows Phone, Windows Azure, SkyDrive and Windows 8
Altitude: 8,000 – 11,000 ft
= TOTAL SUCCESS

Tons of photos here

… even more photos and videos here

Windows Phone taken to the extreme

What’s the best proof of technology? Taking it to the extreme! Last week more than 200 attendees of the National Academy of Professional Ski Instructors of America and American Association of Snowboard Instructors (PSIA-AASI) have been skiing, riding, taking pictures, videos and played with the apps, like the Winter app, at 10,000 ft elevations in the mountains of Utah. Microsoft and Nokia helped in this event, providing phones, skiing with the teams and of course showcasing the app for Windows Phone. Result? Thousands of pictures, videos, lots of smiling faces and memories that last.

image

In the mountains of Utah…

All National team leads were given latest Nokia Lumia 920 and 820 Windows Phones, and they took them to the places, chutes, cornices, bowls and steep bumpy rides we could never think of. Together teams skied almost 1,000,000 ft vertical, tracked by Winter Ski & Ride app. The amount of April snowfall in Utah made every day the best day of skiing ever: with 5-8” of fresh snow falling almost every day, we also enjoyed days of sun and light, champagne powder.

image

National level ski and snowboard event

The National Academy is an annual event gathering professional ski and snowboard instructors of America (PSIA-AASI), an organization of more than 32,000 ski and snowboard instructors training students in every region of the US. During the Academy instructors learn from the top national instructors.

image

Microsoft and Nokia showing new technologies

Microsoft and Nokia representatives were very busy at the event, answering questions about Windows Phone, showcasing the app, making new friends and skiing! Some Microsoft employees skied for the first time, but after the event were ready to hit the slopes again! Presentation1

Photo: Matt Rothschild, Nokia’s head in North America demonstrating Nokia devices. Nokia and Microsoft showcasing devices, skiing and answering questions

What we learned

We’ve heard many great comments about Windows Phone, its video stabilization capabilities that make devices especially useful in the mountains, when taking instructional videos. Many mentioned superior device and camera capabilities that Windows Phone has, and also the software: such as Winter app that makes skiing with friends fun and also helps ski instructors teaching students. Together with PSIA-AASI, we also had a feedback and planning session from 30 national team leads, suggesting ideas for the next generation of Winter software and what a ski instructor may need in the mountains. This brainstorming will take the app to the next level. By the next season we are planning to significantly extend the app to include more exciting features.

SkyDrive + Windows Phone + Large Events = Awesomeness!

wp_ss_20130420_0003

Photo: Windows Phone SkyDrive settings

SkyDrive integration with Windows Phone provided seamless photo transfer from the mountain to the slideshows at night. Windows Phone 8 can seamlessly sync photos and videos with the SkyDrive, and with 30+ phones we managed that integration allowed us to instantly prepare slideshows at night, when the skiers came back from the mountain. To access this feature go to Photos –> SkyDrive Settings. We used PowerPoint to play the shows, but what we didn’t discover until the last night was the Windows 8 Photos app, which can also play the slide show!

image

Photo: Windows 8 Photos app, notice Slide Show button at the bottom

Highlights

image

Photo: PSIA Alpine Team member David Oliver, wearing Winter app snow-bandana.

Peter Kray, the author of “American Snow” book reached more than 100K vertical, skiing with the Winter app and had a goal of beating top skiers on the leaderboard. Pete’s book is beautifully printed, with pictures from both the old and modern days of ski instruction in America. Passionate skier himself, Pete says in his book: “To teach someone how to ski or snowboard is like sharing superpowers – giving the gift of motion, freedom, and flight – it’s the sensation of flying, with the world spinning beneath your feet and wind whipping across your face”.

image

Custom made Winter skis made by Wagner Custom Skis to theme with the Winter app have proven to be a huge success: I skied them every day of the event, at various conditions: on groomers, steep, bumpy terrain and loved the way they feel. Winter app now includes a form where you can order skis made by Wagner with either Winter or any custom graphics. Skis are created personally for you to fit your skiing needs: Wagner makes any types of skis: from racing to big mountain skis. Born in the mountains of Colorado, in Telluride, these skis provided me with the best moments of my National Academy – at the end of the feedback session the skis were signed by national team leads – this will keep me motivated on working on the app in the summer. I hope to meet Pete Wagner personally to thank him for the joy of skiing his skis.

More about the event:

PSIA-AASI Selected as exclusive content provider for Winter Ski & Ride app

PSIA-AASI National Academy Day 2: Deep Returns, Hot App + Ages and Stages

Winter app

Photos taken by Nokia Lumia Windows Phone

Thanks!

Many thanks to Mark Dorsey, William McSherry, Earl Saline, Matt Rothschild, Thierry Doyen, Olga Vigdorovich, Matt Thompson, Warren Wilbee, Nisha Baxi, Kenny Spade, Randy Guthrie, Ain Indermitte, Razvan Furca, Ben Adams, Max Felix, Mike Hafer, Nick Herrin, Lane Cleua, David Oliver, Rob Sogard, Michael Rogan, Robin Barnes, Bob Barnes, Scott Anfang, Matt Boyd, Jennifer Simpson, Jeb Boyd, Dave Lyon, Ryan Christofferson, Jonathan Ballou, Jim Schanzenbaker, Heidi Effenger, Chris Fellows, Eric Lipton, Andy Docken, Dave Lundberg, Kelly Coffey, Pete Kray, Susan Urbanczyk and many others who helped organizing this event.

The best ski and snowboard app on the planet… exclusive to Windows Phone

 

clip_image002

Windows Phone now has the best app in ski industry, leaving Apple and Google far behind, and raising the bar for ski apps very high: the app is called WINTER SKI & RIDE. For now the app is exclusively available on Nokia Windows Phones. WINTER SKI & RIDE is the official app of Professional Ski Instructors of America and American Association of Snowboard Instructors (PSIA-AASI), the association of more than 30,000 US ski and snowboard instructors. You can download it today from NOKIA Collection, if you are lucky to have a Windows Phone 8.

UPDATE:

Microsoft.com News about WINTER

Microsoft Windows Phone blog about WINTER

WPCentral about WINTER

Stay warm! Skiers no longer need to take hands off their gloves in the cold, WINTER SKI AND RIDE is especially optimized for use with gloves in the cold, and NOKIA Lumia devices have glove sensitive screen, so you don’t need to take off your gloves in the cold to use the app. The app is optimized to run through your skiing day without draining your battery, and instead of punching buttons in the cold you can simply speak to it: “WINTER, Show me snow reports” for example.

WINTER SKI & RIDE is a unique app in many ways, it is developed by a Microsoftie, a professional ski instructor and a startup in Silicon Valley, an extremely powerful combination. The app is built in the US and Canada, and tested through snowstorms in the mountains of Colorado, Utah, California and British Columbia. Apparently, instead of spending time at Starbucks in Cupertino, Microsoft reached out to the field, and has developers who can ski and ride in the mountains, in cold and snow, to make the best app for skiing.

Instead of a bunch of different apps for weather, ski tracking and lessons, WINTER SKI & RIDE combines all features a skier needs in the mountain in one powerful app: snow reports, resort maps and information, such as the number of open trails, beautiful ski analytics and activity tracking, and lessons for skiing, telemark, snowboarding, freestyle and cross-country from professional ski and snowboard instructors.

SKI AND SNOWBOARD ACTIVITY ANALYTICS

Apparently, it takes a ski instructor and a Microsoftie to get a ski app right, finally! WINTER SKI & RIDE has an activity tracking switch, just turn it on when you are at ski resort, and you can put the phone back in your pocket. The smart app will automatically track your runs and present them in beautiful charts: you can see you runs by season, daily or even drill into the run details to see run details, such as speed, duration and vertical drop.

Not only that, WINTER SKI & RIDE motivates you to ski or ride more, and improve endurance, by setting goals. You can currently set vertical and run goals, and if you reach a goal, ta-da: your run is marked with an achievement pin, and you move closer to the leaders of the mountain.

LEADERBOARD OF BEST SKIERS AND RIDERS

WINTER SKI & RIDE is a very social app that lets you ski with your buddies and see the best skiers on the mountain.  You can also invite your friends and once you become friends with someone, you can share the runs and excitement about skiing.

SNOW REPORTS AND MAPS

WINTER SKI & RIDE automatically updates snow reports and you can view reports by proximity, by best conditions, powder, and maximum snow base. You can pin your favorite resorts as tiles to the start screen. The app beautifully presents resort information, shows vertical, open lifts and other information..

LESSONS: SKI, SNOWBOARD, TELEMARK, OH-MY…

Because WINTER SKI & RIDE is endorsed by Professional Ski Instructors of America, it has professional lessons from the best ski instructors on the planet. Lessons are carefully selected, adhering to the highest standards of the sport, lucky Windows Phone owners can now ski and learn.

SOCIAL

WINTER SKI & RIDE connects you with a social network of skiers and riders, making millions of ski buddies interconnected. This technology is based on Microsoft Windows Azure powerful cloud service. Do you want to see what runs your buddy did in Vail, or Whistler, or Chamonix? Just look him up on the Winter!

FOR SKI TEAMS AND COACHES

WINTER SKI & RIDE app changes the way coaches and ski instructors communicate with their students. By using the NFC technology available in Windows Phone, a ski instructor can instantly have a group of students join a team, and make recommendations based on a ski day, and individual runs.

WITH WINTER SKI & RIDE APP WINDOWS PHONE BECOMES TOP PLAYER IN WINTER SPORTS

With WINTER SKI & RIDE, Microsoft Windows Phone becomes a top player in the Winter sports. Forget the aging iPhone or battery-hungry Android. With the app endorsed by Professional Ski Instructors or America, Windows Phone becomes a very powerful player in the snowsports industry.

 

DOWNLOAD WINTER

Data, Files and Networking in Windows 8 apps: examples from my book

If you are looking for code examples for Professional Windows 8 Programming: Application Development with C# and XAML book, specifically for the section on handling data, files and networking, you can get them directly from Wiley:

Chapter 6 code for Pro Windows 8 Programming
11.23 MB
Click to Download

These examples include everything: from managing local and remote settings, to networking and proximity.

Shockingly good video calls from Windows Phone

P1050780_thumbI have to admit that I experienced a discovery and an emotional shock not dissimilar from those experienced by people who saw Morse or Marconi devices for the first time, and this is what my post is about. This weekend Skype for Windows Phone has been released to all Windows Phone users, and I happened to be closing 2011-2012 skiing season in Kirkwood, CA. It has been a great season, by the way, as I mentioned earlier in my other Windows Phone skiing posts Smile on ski apps available now from the Marketplace.

It’s worth mentioning that Kirkwood Mountain has a great AT&T 4G coverage. I suspect that this is because they have a couple of transmitters right on top of the Wall chairlift, at least they look like cell towers of some sort. Skype

When I mentioned that my emotional shock from using Skype while skiing was of the same kind experienced by first Morse and Marconi device users, I was completely honest.

It’s Tuesday, a couple of days have passed, and I still feel that it’s the beginning of a completely new era in ski gadgets. It seems with Skype for Windows Phone you can now literally be out there with your friends and family real-time!

Continue reading “Shockingly good video calls from Windows Phone”

Register for Windows Phone Camps!

 

If you are a developer, or just curious about Windows Phone platform, we have a series of Phone Camps in Costa Mesa, Phoenix, Denver, Santa Monica, San Diego, San Francisco, Redmond and Portland. I’ll be speaking at Costa Mesa, Denver, San Francisco and San Diego.

Resource Links
clip_image004[10]clip_image006[8]
clip_image008[8]
clip_image010[8]clip_image002[8]

 

Continue reading “Register for Windows Phone Camps!”

How the New TechCrunch Design resembles Windows Phone Metro UI

image

The new TechCrunch design is simple and clean. Gone, rounded boxes and gradients, shades of gray. I think it signals a new era in the Internet design: the simplicity of transportation graphics, also chosen by Windows Phone 7 and its Metro UI, comes to news.  I’m glad the leader of technology news decided to change the look: but I think this is bigger than just the appearance. Quoting Mike Kruzeniski, the Metro designer:

Content, Not Chrome It’s the content on the phone that people want, not the buttons. Reducing the visuals on the phone that aren’t content will help you create a more open UI, and it also promotes direct interaction with the content.

Many sites are overloaded with Baroque graphics, and when today I opened TechCrunch, I loved the modern look.