How to access localhost from Android emulator and iOS simulator?

Being lucky to develop a backend and a Xamarin.Forms clients on your own? Sooner or later you will have to debug the API calls and it might become painful. Unless, you will follow the next rules:

  1. Configure your API URL to run on 127.0.0.1 instead of a localhost:

    // .NET Core Web.Api example
    public static IWebHost BuildWebHost(string[] args) =>
    WebHost.CreateDefaultBuilder(args)
    .UseStartup<Startup>()
    .UseUrls(“http://127.0.0.1:5001“)
    .Build();

  2. Configure your Xamarin.Forms API consumer to have a conditional URL base:

    string apiUrl = null;
    if (Device.RuntimePlatform == Device.Android)
    apiUrl = “http://10.0.2.2:5001/api“;
    else if (Device.RuntimePlatform == Device.iOS)
    apiUrl = “http://localhost:5001/api“;
    else
    throw new UnsupportedPlatformException();

The problem with Android emulator is that it maps 10.0.2.2 to 127.0.0.1, not to localhost. However, the iOS Simulator uses the host machine network.

That should be it!
Happy debugging!

IKnowThatFlag quiz game build with Xamarin.Forms

Many years ago when I was at high school, I wrote a bot for a web browser flags quiz game, where a flag of a random country and 4 different country names where shown to the player. It was fun!

So I created the same game for iOS and Android using Xamarin.Forms just for fun. It is open source and available on github:

demo

This is what you get when an engineer creating a game without a designer. Luckily you can contribute if you have an idea on how to improve the UI/UX or if you want to add new features. I had a couple of them in my head:

  • Achievements
  • Learning game mode (without time or a game over)
  • [X] game mode – where the flag image is covered by some objects that the player has to remove and/or etc.

If you are new to Xamarin.Forms or MVVM I would recommend to check the source code, it is touching the next interesting topics:

  • MVVM
    • Fody
    • ViewModel first navigation
  • Animations
  • Custom fonts
  • IOC

Otherwise you are free to use the source code as you wish since it is under MIT license.

Quickly delete “bin”, “obj” and “packages” directories under a .NET solution

Recently had to update some old Xamarin.Forms project to the latest and greatest XF and very quickly I realised that it is not going to be an easy task, since I had to manually manipulate the csproj files to remove the old nuget dependencies. I found myself going thru multiple projects multiple times in order to delete the “bin”, “obj” & “packages” directories to fix the miscellaneous build errors and I came up with a very simple script to recursively delete delete the “bin”, “obj” & “packages” directories:

# Recursively find and delete "bin", "obj" and "packages" dirs
# Backup your code before using this script, I am not responsible for any data loss. Please use it wisely.
find . -iname "bin" -o -iname "obj" -o -iname "packages" | xargs rm -rf

Backup your code before using this script, I am not responsible for any data loss. Please use it wisely.

To use this script: open a terminal in your solution’s root directory and copy paste the script above. Keep in mind that “bin” & “obj” directories will be regenerated after the next build, however “packages” directory will appear again only after restoring nuget packages for the solution.

Android emulators stopped working on macOS 10.13 (High Sierra)

Recently I updated my macOS to High Sierra however this broke my android emulators. Non of them started and logs showed something like:

Failed to open vm 3
Failed to create HAX VM
No accelerator found.
failed to initialize HAX: Invalid argument

As the logs states there is a problem with HAXM, and to be more specific a time for update has come. To solve the issue simply download the latest and greatest version of HAXM and restart your mac.

Installing Xamarin components

Xamarin components are easy to install, all you have to do is to download a zip, extract the content and to reference the dlls in your project. This would work if you download the component manually from components gallery. Same thing can be done using Visual Studio in a more robust way via ‘Components’ under the targeting platform projects. Either way, the component will be downloaded and installed only for a specific project.

Sometimes it might be useful to keep the component in cache, so it will be available globally. This is where the XAM file extension comes into play. Generally speaking, it is just an archive, you can change the file extension to zip and use it in a regular way, or vice versa change zip to xam.

Regardless of your OS you have to download xamarin-component.exe.
On Windows execute the next command:

xamain.component.exe install <component.xam>

On MacOS execute the next command with the same executable:

mono xamain.component.exe install <component.xam>

If the command executed successfully, you should see the installed component:

Screen Shot 2017-11-14 at 21.20.30

Please note the “Included in this project” and “Installed on this machine”. Components under the second section will be always there unless you will clean the cache. On MacOS the components will be installed under ‘~/Library/Caches/Xamarin’. Please let me know where the cached components are stored on Windows.

Xamarin.Forms Picker SelectedIndexChanged on Android vs iOS

Picker is a very common UI control. In order to capture user input we have to listen to ‘SelectedIndexChanged’ event, which unfortunately behaves differently on Android and iOS:

 

On iOS ‘SelectedIndexChanged’ is triggered every-time user moves / scrolls the list. ‘Done’ button is there only for hiding the list. However, on Android ‘SelectedIndexChanged’ event will be triggered only once, after user selects an item. This is because on Android the list is displayed as a popup which disappears right after user input.

That may sound as a minor problem, unless you have to do some heavy work on the UI on each ‘SelectedIndexChanged’. Luckily, since Xamarin.Forms 2.3.4 it is possible to set the expected behaviour on the Picker control:

var picker = new Picker();
picker
.On<iOS>()
.SetUpdateMode(UpdateMode.WhenFinished);

Alternatively we can do the same thing in XAML.

We have to define a new namespace:

xmlns:ios=”clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;
assembly=Xamarin.Forms.Core”

And consume it the next way:

<Picker ios:Picker.UpdateMode=”WhenFinished” .. />

Easy as it is! So there is no need to write workarounds anymore.

P.S.: Additional information can be found here.

Numeric keyboard with "Done" button on iOS Xamarin.Forms

‘Done’ button on Numeric keyboard on iOS is a very popular clients request, but it does not appear out of the box. Luckily the solution is very easy (as usual), all we have to do is to extend ‘Entry’ control and to add a custom renderer:
 
using Xamarin.Forms;
namespace YourNamespace.Controls
{
public class ExtendedEntry : Entry { }
}
view raw ExtendedEntry.cs hosted with ❤ by GitHub
/*
Based on example from: https://forums.xamarin.com/discussion/18346/add-done-button-to-keyboard-on-ios
*/
using System.Drawing;
using YourNamespace.Controls;
using YourNamespace.iOS.Renderers;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
[assembly: ExportRenderer(typeof(ExtendedEntry), typeof(ExtendedEntryRenderer))]
namespace YourNamespace.iOS.Renderers
{
public class ExtendedEntryRenderer : EntryRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
{
base.OnElementChanged(e);
if (Element == null)
return;
// Check only for Numeric keyboard
if (this.Element.Keyboard == Keyboard.Numeric)
this.AddDoneButton();
}
/// <summary>
/// <para>Add toolbar with Done button</para>
/// </summary>
protected void AddDoneButton()
{
var toolbar = new UIToolbar(new RectangleF(0.0f, 0.0f, 50.0f, 44.0f));
var doneButton = new UIBarButtonItem(UIBarButtonSystemItem.Done, delegate
{
this.Control.ResignFirstResponder();
var baseEntry = this.Element.GetType();
((IEntryController)Element).SendCompleted();
});
toolbar.Items = new UIBarButtonItem[] {
new UIBarButtonItem (UIBarButtonSystemItem.FlexibleSpace),
doneButton
};
this.Control.InputAccessoryView = toolbar;
}
}
}
As you can see all the ‘magic’ is happing in AddDoneButton() method. We create a toolbar and add a ‘Done’ UIBarButtonItem which will hide the keyboard and send a ‘Completed’ event back.
The solution is based on this thread and available as a gist on github.