Creating Training Buddy's Live Tile

10 March 2014

Live tiles are probably the best known feature about Windows Phone. Unlike iOS's plain grid of app icons Microsoft designed their phones home screen to provide users with data without having to open the app. With Windows Phone 8 the feature was updated so that 3rd party apps like Training Buddy could offer full width tiles along with new layout templates.

Adding a live tile to your app is a great idea as it is one of the features users often look for when their choosing an app. The app store also handily points out if an app uses a live tile or not.

The Design

There are 3 tile templates to choose from when you add a live tile to your app. These are Flip, Iconic and Cycle.

Flip gives the illusion that the tile has a front and a back and will flip over after a few seconds.

Iconic has space for an image and a large number, a bit like the icon for messages and emails. When in its largest size there is also wide content zones that can contain text.

Cycle lets you choose 9 images that the app will Cycle through.

For Training Buddy I have used the Iconic template. You will probably find like myself that the type of app you are creating will more than likely determine what template you are going to use. As Training Buddy's live tile was ultimately going to show details of the users last activity, Iconic was the obvious choice. The smaller sizes don't really have enough space to give any activity stats and the large version gives you an additional space for a smaller image that was perfect for the activity type image (running, cycling, walking).

Another alternative is to make a completely custom design and write something in your app to render it as an image. You can then display the image using either the flip or cycle template.

The Code

The second reason you everyone should add live tiles to their app is because the code is so simple (this is the actual code from Training Buddy).

1// Application Tile is always the first Tile, even if it is not pinned to Start.
2            ShellTile TileToFind = ShellTile.ActiveTiles.First();
3 
4            // Application should always be found
5            if (TileToFind != null)
6            {
7                string WideContent1 = "";
8                string WideContent2 = "";
9                string WideContent3 = "";
10                string activityLogo = "";
11                if (App.settings.LiveTile)
12                {
13                    var lastActivity = (from a in AllActivities
14                                        orderby a.StartDateTime descending
15                                        select a).Take(1);
16 
17                    if (lastActivity.Count() &gt; 0)
18                    {
19                        if (App.settings.DistanceMeasurement == "Miles")
20                        {
21                            WideContent3 = "Distance: " + lastActivity.First().Distance.ToString("0.##") + " miles";
22                        }
23                        else
24                        {
25                            WideContent3 = "Distance: " + (lastActivity.First().Distance * 1.609344).ToString("0.##") + " km";
26                        }
27                        WideContent2 = "Date: " + lastActivity.First().StartDateTime.ToShortDateString();
28                        switch (lastActivity.First().ActivityType.ToLower())
29                        {
30                            case "running":
31                                WideContent1 = "Last Run";
32                                break;
33                            case "walking":
34                                WideContent1 = "Last Walk";
35                                break;
36                            case "cycling":
37                                WideContent1 = "Last Cycle";
38                                break;
39                            case "swimming":
40                                WideContent1 = "Last Swim";
41                                break;
42                        }
43 
44                        activityLogo = "/Assets/" + lastActivity.First().ActivityType + "Black-70.png";
45 
46                        if (lastActivity.First().CaloriesBurned &gt; 0)
47                        {
48                            WideContent3 += " Calories: " + lastActivity.First().CaloriesBurned.ToString("0.#");
49                        }
50 
51                    }
52 
53                }
54 
55                IconicTileData tileDate = new IconicTileData
56                {
57                    Title = "Training Buddy",
58                    WideContent1 = WideContent1,
59                    WideContent2 = WideContent2,
60                    WideContent3 = WideContent3,
61                    IconImage = new Uri("/Assets/RunningBlack-150.png", UriKind.Relative),
62                    SmallIconImage = new Uri(activityLogo, UriKind.Relative)
63                };
64 
65                // Update the Application Tile
66                TileToFind.Update(tileDate);
67            }

First I'm finding the application tile. It is possible to create additional tiles for your app which is another great feature, but if you want to just update the main tile it will be the first one returned.

Next I'm checking to see if the user has turned on the live tile or not. If they haven't then I'm just setting the tile back to its default state.

The following lines are then getting the content to display on the tile and building up the strings on local variables.

Lastly and most importantly I'm creating a new instance of IconicTileData and setting each of its properties with the data to show. Then it's just a case of calling Update on the tile instance and providing it with the new IconicTileData object.

The Tile

And here's the result

Live tiles are really easy to create so if your developing an app you should definitely take the time to add one.

Introducing Training Buddy for Windows 8.1

10 December 2013

3 years ago I created Training Buddy for Windows Phone 7 purely because I was switching from iPhone and wanted to have decent sports tracker. As it was a new platform I figured I'd make it.

Since then the app has become more popular than I imagined. Earlier this year it was updated with a fresh new look and to take advantage of new features in Windows Phone 8 such as new live tile sizes and Nokia Maps. Training Buddy Free (the free reduced functionality version) was also updated to include support for Training Buddy Live so activities can be viewed and shared on the Training Buddy website.

The app has also received some amazing feedback. My favourite of which Jason wrote in the UK app store for Training Buddy Free:

Now 3 years on with Windows 8.1 launched I felt it was time Training Buddy got its own Windows 8 app allowing its users to view all their activity data on their desktop and tablet. This has always been possible through the website since the launch of Training Buddy Live, but an app opens the door to be more platform specific and easier to use offline without an internet connection and then sync at a later date. It also happens that I'm a big fan of apps over websites.

This is just the start though, over the next few months more and more features will be added, just as the phone app has continued to evolve over the last 3 years.

Download Training Buddy for Windows Phone 8.1

Training Buddy

22 January 2011

Training Buddy is an app that I wrote for Windows Phone 7, intended for anyone who likes Running, Cycling or Walking and would like to keep a log of their workouts.

The app will monitor the route you take along with various stats like speed, pace and how many calories you are burning. During the activity you can set up audio alerts to let you know how your doing and afterwards it will store a log of all the activities you have done for review later on.

For more information on the app visit www.trainingbuddyapp.com or view the app in the Zune Marketplace.