Xamarin iOS: Learning by Examples: Part#3

This is a continuation of a previous post.

Display a map

Follow the code snippet. It contains necessary comments inside the code.

private MKMapView mkMap;
private CLLocationManager locManager = new CLLocationManager();

public override void ViewDidLoad()
	base.ViewDidLoad ();

	// Full screen map
	mkMap = new MKMapView (View.Bounds);

	mkMap.AutoresizingMask = UIViewAutoresizing.FlexibleDimensions;

	// You can use other types
	mkMap.MapType = MKMapType.Hybrid;

	View.AddSubview (mkMap);

	double lat = 23.7000;
	double lon = 90.3667;

	var dhakaCity = new CLLocationCoordinate2D (lat, lon);
	var zoomLevel = MKCoordinateRegion.FromDistance (dhakaCity, 2500, 2500);

	mkMap.CenterCoordinate = dhakaCity;
	mkMap.Region = zoomLevel;

	mkMap.AddAnnotation (new MKPointAnnotation() {
		Title = "Marker",
		Coordinate = new CLLocationCoordinate2D(lat, lon)

	// Asking for permission
	locManager.RequestWhenInUseAuthorization ();

	mkMap.ShowsUserLocation = true;

Make your app social

Using Xamarin capability we can post our message in Twitter/Facebook etc in a consistent manner and of course using shared code.

Here is the code snippet with necessary comments to post a message in Twitter/Facebook based on availability.

private SLComposeViewController slcVC;

public override void ViewDidLoad()
	base.ViewDidLoad ();

	if (SLComposeViewController.IsAvailable (SLServiceKind.Facebook)) {
		postInSocial (SLServiceKind.Facebook);
	} else if (SLComposeViewController.IsAvailable (SLServiceKind.Twitter)) {
		postInSocial (SLServiceKind.Twitter);
	} else {
		new UIAlertView("No social", "No social available", null, "OK", null).Show ();

private void postInSocial(int serviceKind)
	slcVC = SLComposeViewController.FromService (serviceKind);
	slcVC.SetInitialText ("This text will be posted");
	slcVC.CompletionHandler += (result) => {
		InvokeOnMainThread (() => {
			DismissViewController (true, null);
			new UIAlertView("Posted", "Message posted in Social", null, "OK", null).Show ();

	PresentViewController (slcVC, true, null);

Take pictures from camera

We can take pictures in Xamarin in two ways.

  1. Using UIImagePickerController offered by iOS. This will only work on iOS.
  2. Using Xamarin.Mobile to hide the details. This will work on Android too and we will get the benefits of shared code. This is a separate component that needs to be downloaded from Xamarin component store.


  1. Install Xamarin.Mobile component from Xamarin components store
  2. Follow this code snippet…
private MediaPicker mPicker = new MediaPicker();
private MediaPickerController mPickerController;
private TaskScheduler tScheduler = TaskScheduler.FromCurrentSynchronizationContext();

public void triggerTakePicture()
	if (!mPicker.IsCameraAvailable)
		new UIAlertView("No Camera", "No Camera found in this device", null, "OK", null).Show ();
	} else
		mPickerController = mPicker.GetTakePhotoUI (new StoreCameraMediaOptions {
			Name = "picFile.jpg",
			Directory = "Photos/"

		PresentViewController (mPickerController, true, null);

		mPickerController.GetResultAsync().ContinueWith(e => {
			// Get the image from here
			DismissViewController(true, null);
		}, tScheduler);

Consume REST API service

We are going to consume weather data as a REST API services.


public class WeatherAPIService
	private string apiURL = "api.openweathermap.org/data/2.5/weather?q=London,uk";

	public WeatherAPIService ()
		Task.Run (() => this.GetDataAsync (apiURL)).Wait ();

	public async void GetDataAsync(string apiURL)
		string responseJSONString = null;

		using (var httpClient = new HttpClient()) {
			try {
				Task<HttpResponseMessage> getResponse = httpClient.GetAsync (apiURL);
				HttpResponseMessage response = await getResponse;

				responseJSONString = await response.Content.ReadAsStringAsync ();
			} catch (Exception e)
				string errMessage = e.Message;

Add artworks to the app

Adding artworks to the app is pretty easy. By artwork we mean, app icon, splash image etc. Lets get this done by one step at a time.

App icons 

  1. Open info.plist file. You will see a section called “Universal Icons”. Add icons there as per sizes mentioned on each box. Naming convention does not need to follow.
  2. After adding those icons click on “Migrate to Asset Catalog”.
  3. All the icons can be found in Recourses -> Images.xcassets. Inside that folder you will find “Contents.json” file. Opening that will display similar page to add more icons.

Splash screen

Adding images for each sized splash screen could be costly. We will use universal storyboard for splash screen.

  1. Create a storyboard file named LaunchScreen.storyboard. It is a universal storyboard with one View controller.
  2. Open info.plist file. You will see a section called “Universal Launch Images”. At the bottom on this section select “LaunchScreen” (name of the storyboard file).
  3. You are good to go!

Please make a comment if you find the writing useful and/or you found any problems in the writing, I will fix the errors.

Thank you. 


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s