The ultimate guide to Emojis 🤹‍♂️

 

This slideshow requires JavaScript.

It is very common nowadays to express ourselves by using emojis. Instead of typing few words, we prefer to send one emoji that will express our feelings and emotions. Not sure that the other side will always get what we mean by sending a 🧞 , but that is another story.

In this article we will learn:

  1.  How to use emojis in static content like Labels and Buttons
  2.  How to define and use emoji in XAML only
  3.  How to define and use emoji using C#

Continue reading “The ultimate guide to Emojis 🤹‍♂️”

Advertisements

Most common mistakes beginners make in Xamarin.Forms

We live in a great time where technology evolves fast and we need to keep up with it if we want to stay relevant. Beside this, we also have to be productive, use the latest and greatest tools, implement the best available solutions and deliver on time. Following article mentions a list of most common mistakes we tend to do while using Xamarin.Forms.

Continue reading “Most common mistakes beginners make in Xamarin.Forms”

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.

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:
 
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.

UIDatePicker Countdown mode bug and solution in Xamarin.Forms

Problem

Show hh:mm:ss picker on iOS using Xamarin.Forms.

Goal

Extend Picker view in order to achieve the next result:

Solution

First I tried to keep it simple: to give up on seconds and use UIDatePicker in UIDatePickeCountDownMode. So the end result will look like this:

I achieved it by extending the DatePicker and it’s DatePickerRenderer and changing the mode as described above. However, I discovered that ‘datePickerValueChanged’ is being called only on a second iteration with the values. The issue was successfully reproduced in Swift, so it’s not a Xamarin bug. The Swift version can be found here.
After spending some time understanding the issue described above, I found an example on StackOverflow, thanks to Mathieu who shared his solution. His example was based on XLabs, so I removed the dependency and shared it with the community.
The code can be found on GitHub.