Xamarin: Xamarin’s Got Game (Development)

If you’re new to game development, you may be wondering what framework is right for you. Luckily for C# and F# developers, Xamarin supports a wide range of powerful options like SceneKit and SpriteKit on iOS, as well as cross-platform frameworks including OpenTK, CocosSharp, and MonoGame. For developers just getting started, we recently published several […]

The post Xamarin’s Got Game (Development) appeared first on Xamarin Blog.

Jérémie Laval: Advanced transitions with vector drawable

As I described in a previous serie of post, vector drawables (and their animated counterparts) are one of the most powerful new visual elements introduced with Lollipop (and soon as a support lib it seems).

In this post, I’m gonna show you how we can achieve the following transition animation by solely using vector drawables and Android’s built-in widget state tracking mechanism:

Staging

To build an animation like this, you have to prepare the adequate stage. Afterwards, it’s just a matter of moving each individual pieces of that stage when needed.

In the above video, we can split the final visual in a couple of different parts.

Some like the center dot and the upper-half donut are static pieces, they never move. The two white thin rectangles, symbolizing the hands on a watch, are individual moving parts. The sun, moon and exclamation mark symbols are the varying state of the visual depending on the input.

Now, that’s only the visible part of the puzzle. If you look closely at the animation you can notice that everytime there is a state transition the right hand seems to be erasing the visible time symbol before the new one fade in.

This is where things get interesting because to be able to achieve this effect you have to get creative with the Z-ordering of your stage.

To understand this better, below is a rendering of all the layers of the visual:

The rectangle you see covering the half-bottom part of the picture is not an artifact. It’s painted with the same color than the overall window background thus acting as a cheap but effective hiding mask.

If I conceal this rectangle, here is what’s lurking behind: the other half of the visible top donut

To create the aformentioned effect, we will be moving that half-bottom donut to cover the top one, synchronizing it with the right clock hand. When not in use, it will be safely tucked behind our hiding rectangle.

Because vector drawables have a simple bottom to top drawing hierarchy, for this to work correctly we have declare pieces in a specific order:

  • top half donut
  • the 3 time symbols
  • bottom half donut
  • hiding rectangle
  • the 2 hands white rectangle

Based on our animation needs, we then split this further into actual vector drawable <group /> elements to arrive at the following shape (path data removed for brevity, you can download all the XML pack at the end of the article):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<?xml version="1.0" encoding="UTF-8" ?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
	android:height="385dp"
	android:width="416dp"
	android:viewportHeight="385"
	android:viewportWidth="416">
	<group android:name="background">
		<path
			android:name="topPie"
			android:fillColor="#454D58"
			android:pathData="..." />
	</group>
	<group android:name="timeItems">
		<path
			android:name="moon"
			android:fillColor="#DAE2ED"
			android:fillAlpha="0"
			android:pathData="..." />
		<path
			android:name="sun"
			android:fillColor="#E39300"
			android:fillAlpha="0"
			android:pathData="..." />
		<path
			android:name="now"
			android:fillColor="#C52E26"
			android:fillAlpha="1"
			android:pathData="..." />
	</group>
	<group
		android:name="hidingPie"
		android:pivotX="208"
		android:pivotY="192.5">
		<path
			android:name="hidingPiePath"
			android:fillColor="#454D58"
			android:pathData="..." />
	</group>
	<group android:name="coverBackground">
		<path
			android:name="blueCover"
			android:fillColor="#343A42"
			android:pathData="..." />
		<path
			android:name="middleRing"
			android:fillColor="#D8D8D8"
			android:pathData="..." />
	</group>
	<group
		android:name="leftHand"
		android:pivotX="208"
		android:pivotY="192.5">
		<path
			android:fillColor="#D8D8D8"
			android:pathData="..." />
	</group>
	<group
		android:name="rightHand"
		android:pivotX="208"
		android:pivotY="192.5">
		<path
			android:fillColor="#D8D8D8"
			android:pathData="..." />
	</group>
</vector>

State tracking widget

Before we dwelve into some more animation tricks, we first need to investigate how to make widget to represent our triple state because there is nothing in the default framework that allow this.

The good news is that, as I showed in a previous blog, it’s very easy to create a custom, state-aware widget which is what we are going to do with this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
public class TriStateView : View
{
	int selectedIndex;

	public int SelectedIndex {
		get {
			return selectedIndex;
		}
		set {
			if (value < 0 || value > 2)
				throw new ArgumentOutOfRangeException ("value");
			JumpDrawablesToCurrentState ();
			selectedIndex = value;
			RefreshDrawableState ();
			Invalidate ();
		}
	}

	protected override int[] OnCreateDrawableState (int extraSpace)
	{
		switch (selectedIndex) {
		case 0:
			return new int[0];
		case 1:
			return new int[] { Android.Resource.Attribute.StateFirst };
		case 2:
			return new int[] { Android.Resource.Attribute.StateLast };
		default:
			return base.OnCreateDrawableState (extraSpace);
		}
	}
}

By setting our state transition drawable as the background of this view, it will automatically react to state changes and animate accordingly. Using the normal state tracking mechanism also means that interruption mid-animations are gracefully handled for us.

One more trick

At this stage, I won’t go over every details of the individual animation definitions, they all tweak standard things like alpha and rotation on each piece of our stage. Nonetheless, you can read my animated vector drawable entry for more details on how they work.

I will only show a little trick that is useful when setting up more complex stages like this: zero-duration animators.

Take the following example that animates the bottom-half donut (to create the progressive hiding effect):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?xml version="1.0" encoding="UTF-8" ?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
	android:ordering="sequentially">
	<objectAnimator
		android:duration="850"
		android:propertyName="rotation"
		android:valueFrom="0"
		android:valueTo="180"
		android:valueType="floatType"
		android:interpolator="@android:interpolator/decelerate_quad" />
	<objectAnimator
		android:duration="0"
		android:propertyName="rotation"
		android:valueFrom="-180"
		android:valueTo="0"
		android:valueType="floatType" />
</set>

The idea is that right after we have covered the entire upper-half, we want to immediately tuck it back under our hiding rectangle. This is because we then fade-in the new time symbol which would be hidden too otherwise.

Using zero-duration animators allow you to do just that by applying direct values to animated properties. The fact that there is a from attribute doesn’t matter much but since those properties are write only it will prevent object animator from complaining about missing accessors.

I use this in a couple of places to reset the stage state (since vector drawable instances are reused across transitions), quickly move away elements or hide them from view when they are not useful anymore.

Source

You can download the XML definitions and widget source here.

Bug alert: there is currently a parsing bug where the animated vector drawable inflater will greedily read the entire document given to it. This causes an issue if you declare them inline in your animated state transition XML file because it will corrupt your entire state by reading everything instead of stopping at its corresponding end tag. The workaround is to always declare them in their own XML files like I did.

Xamarin: Xamarin for Students Gets Even Better with Expansion to Visual Studio

Today, we are incredibly excited to announce the expansion of our Xamarin for Students program to include support for Visual Studio, furthering our mission to make it fast, easy, and fun to build great mobile apps. Now, students get free access to everything they need to become mobile app developers virtually overnight, creating native iOS […]

The post Xamarin for Students Gets Even Better with Expansion to Visual Studio appeared first on Xamarin Blog.

Kerry W. Lothrop: ALM Days 2015: Mobile in the Enterprise

The ALM Days 2015 took place on March 11 and 12 in Düsseldorf. Erstmals gab es im Rahmen der Veranstaltung einen Mobile Track. My talk had the title Mobile in the Enterprise and covered the challenges you meet when developing apps for enterprise use. The video (in German) is on Channel 9 and the slides … Continue reading ALM Days 2015: Mobile in the Enterprise

XHackers Team: Wearables Day

Hot buzzword of the day is Wearables. We at XHackers are ready to create a buzz. Lot of us when we hear the word – Wearables, we think of Apple Watch, Android Wear, Microsoft Band, Google Glass or even Fitbit. But history of wearables dates back to 1961!

XHackers

In 1961, a MIT Professor, Edward Thorp, whom we call the Father of Wearables, created and successfully used a first wearable computer to cheat at Roulette which gave them 44% edge over the game 🙂 Since then, we had calculator watches (how many of you remember Casio watches 😉 ), digital hearing aids, Nike+, Go Pros, Fitbits and similar clones.

And then one day, Google announced “Project Glass” with a mission statement –

We think technology should work for you – to be there when you need it and get out of your way when you don’t.

It was exciting! With the annoucement of GDK(Glass Developer Kit), Android developers could write native Google glass apps using the Android SDK. This opened up plethora of opportunities for developers into the Wearable Computing market. Parallely, came slew of watches powered by Android called Android Wear. If you didn’t know – Xamarin has been supporting Google Glass & Android Wears ever since. Some exciting news about new watches are making rounds.. watch out! (pun intended).

Microsoft too joined the party by annoucing a cool looking wrist band called Microsoft Band. To our surprise, it came in with full support on all the leading phone Operating Systems like iOS, Android along with it’s very own Windows. With the release of Band SDK for all platforms and Xamarin’s same day support, it’s now seamless to integrate with iOS and Android apps. What we hear is, very soon Cortona which used to work only on Windows Phone, will now work on iOS and Android too – which will open up more avenues for apps to integrate voice in their apps.
XHackers

Apple Watch was one of the most exciting annoucements from Apple! As you may know, WatchKit has been in preview for quite some time now. Recently after WatchKit’s official release, and the actual Watch yet to hit the Apple stores, nothing stops developers to make their apps ready for the D-Day.

With Xamarin platform, it’s now a reality for C# developers to write a cross platform code across all the major wearable platforms. Not just write code for Apple Watch, Google Glass, Android Wears, or Microsoft Band but also share a good amount of code among them.

So are you excited to learn how to build your wearable apps on all these platforms in C#?

XHackers

Here’s your opportunity to peek into the wearable app development world. Come and learn more about Xamarin and how to program for Wearables in our upcoming meetup.

RSVP Now

What we plan to cover –

  • 09:45 AM – 10:15 AM : Quick introduction to Xamarin, Xamarin Forms – Pooran
  • 10:15 AM – 10:45 AM : Getting started with Microsoft Band –Vidyasagar
  • 10:45 AM – 11 AM : Break
  • 11 AM – 11:45 AM : Apple Watch concepts –Pooran
  • 11:45 AM – 12:30 PM : Android Wear concepts – Vidyasagar

See you there!

Blog Credits : Pooran

Cheers
Xhackers Core Team
[email protected]

Gone Mobile: Episode 25: Performance Comparisons: Part Two with Harry Cheung

Performance is a huge and important topic, so one episode just wasn’t enough. In this episode we talk to Harry Cheung about the performance tests he’s been running to see just how all these different mobile app development approaches perform when it comes to raw computation.

Hosts: Greg Shackles, Jon Dick

Guest: Harry Cheung

Links:

Thanks to our Sponsors!

Raygun.io

Raygun.io – Exceptional Error Tracking
Raygun.io is the fastest and easiest way to track your application’s errors and get the level of detail you need to fix crashes quickly. Notifications are delivered right to your inbox and presented on a beautiful dashboard.

Gone Mobile: Episode 24: Cross-Platform Performance Comparisons with Kevin Ford

Ever wanted to know how different app frameworks and approaches compare with each other when it comes to performance? In this episode we spoke to Kevin Ford to dig into exactly that. Join us for a look at how the native SDKs, Xamarin, and Cordova compare for various performance measurements.

Hosts: Greg Shackles

Guest: Kevin Ford

Links:

Thanks to our Sponsors!

Raygun.io

Raygun.io – Exceptional Error Tracking
Raygun.io is the fastest and easiest way to track your application’s errors and get the level of detail you need to fix crashes quickly. Notifications are delivered right to your inbox and presented on a beautiful dashboard.

Johan Karlsson: Navigation from a ListView

The problem to be solved

One drawback with the vanilla ListView that comes with Xamarin.Forms is that once an item is selected it can’t be selected again until you select something else and reselect it. Usually this is fine, unless you use the ListView to navigate away to a new page. When you return you cannot re-navigate to the same page again.

The solution

The solution to this is simple, just hook up to the ItemSelected event for the ListView and set the SelectedItem property to null.

So the short version of you quick-googlers would be the following line of code. (in the View)

  // Reset the selected item to make it selectable again
  duckListView.ItemSelected += (s, e) => {
    duckListView.SelectedItem = null; 

And the navigation should be done in the ViewModel

        public Duck SelectedDuck
        {
            set 
            {
                if (value != null)
                {
                    // IoC omitted, we should really get someone else to 
                    // create these objects for us.
                    var viewModel = new DuckViewModel() { Duck = value };
                    var page = new DuckView(viewModel);
                    _navigation.PushAsync(page);
                }
            }
        }

The more verbose version

You could also navigate directly from this event handler, but you should feel it deep in your heart that that is just wrong. Instead we handle navigation in the ViewModel. I’ve created a sample project to do this. Also, I’m doing this without any additional framework that would handle navigation for you so that’s why I need to provide my ViewModel with a navigation interface.

I’ll present each file to you below or just download the sample solution from here.

The Model

Our model is simple. It’s just a duck with a name… As you might recall, a model could be anything really. In this case it’s a simple class.
    
    public class Duck
    {
        public string Name
        {
            get;
            set;
        }
    }

The ViewModel (s)

We’ve got two ViewModels, but it’s really only the MainViewModel that’s interesting. It initializes it’s own data, which usually should be done async from another source. It doesn’t implement INotifyPropertyChanged either, as is should but for this sample it’s good enough.

What to focus on is the SelectedDuck property that handles the navigation. We only implement a setter for this since we reset the selected item anyhow in the view itself and on top of that navigate away from the page.


    /// <summary>
    /// The sample ViewModel. Should implement INotifyPropertyChanged
    /// </summary>
    public class MainViewModel
    {
        private INavigation _navigation;

        public MainViewModel(INavigation navigation)
        {
            _navigation = navigation;

            Ducks = new List<Duck>()
            {
                new Duck() { Name = George },
                new Duck() { Name = Bob },
                new Duck() { Name = Sarah },
                new Duck() { Name = Clint },
            };
        }

        /// <summary>
        /// A list of ducks
        /// </summary>
        /// <value>The ducks.</value>
        public List<Duck> Ducks
        {
            get;
            set;
        }

        public Duck SelectedDuck
        {
            set 
            {
                if (value != null)
                {
                    // IoC omitted, we should really get someone else to 
                    // create these objects for us.
                    var viewModel = new DuckViewModel() { Duck = value };
                    var page = new DuckView(viewModel);
                    _navigation.PushAsync(page);
                }
            }
        }
    }

The other ViewModel (DuckViewModel) simply references the selected duck on the page we navigate to.

   public class DuckViewModel
    {
        public DuckViewModel()
        {
        }

        public Duck Duck
        {
            get;
            set;
        }
    }

The View

That leaves us with the view that consists of two parts; XAML and the code behind. Usually you don’t want any code expect the ViewModel-binding in the code-behind since it’s very platform coupled, but in this case we need to do an exception. We need to reset the SelectedItem property of the ListView.
    public partial class MainView : ContentPage
    {
        public MainView()
        {
            InitializeComponent();
            BindingContext = new MainViewModel(this.Navigation); // Should be injected

            // Reset the selected item to make it selectable again
            duckListView.ItemSelected += (s, e) => {
                duckListView.SelectedItem = null; 
            };
        }
    }


The XAML parts look like this.
xml version=1.0 encoding=UTF8?>
<ContentPage xmlns=http://xamarin.com/schemas/2014/forms xmlns:x=http://schemas.microsoft.com/winfx/2009/xaml x:Class=ListViewNavigation.MainView>
    <ContentPage.Content>

      <ListView x:Name=duckListView
             IsGroupingEnabled=false
             ItemsSource={Binding Ducks}
             HasUnevenRows=true
             SelectedItem={Binding SelectedDuck}>
    <ListView.ItemTemplate>
      <DataTemplate>
        <ViewCell>
            <Label Font=Large Text={Binding Name} />
        </ViewCell>
      </DataTemplate>
     </ListView.ItemTemplate>
    </ListView>

    </ContentPage.Content>
</ContentPage>

Summary

There is a lot missing in forms of Ioc and base frameworks for MVVM (like MvvmLight och MvvmCross). Is there an alternative for the extreme mvvm-purists? Yes, you could hook up a GestureRecognizer on each item in the ListView but some platform specific animations will be lost if you do so.

Please give feedback what ever you feel like! And if there’s a better way, I would love for you to enlighten me! 😀