Xamarin

Xamarin.Android - Making A Weather App

Introduction
 
In this article, I shall show you how to make a weather Android app using Open-Weather-Map API by geographic coordinates.
 
Prerequisites
  • Weather API Key
  • Newtonsoft.json Packages
  • AppCompat Android Library v7 
  • Picasso Images Caching Library
Step1
 
First, we need to open Weather Map API key. Go to https://openweathermap.org create an account and get the API key.
 
 
 
Step2
 
Open Visual Studio and go to New Project-> Templates-> Visual C#-> Android-> Blank app. Give it a name, like WeatherApp.
 
 
Step3
 
Next, go to Solution Explorer-> Project Name-> References. Then, right-click to "Manage NuGet Packages" and search for JSON. Install the Newtonsoft.Json Packages.
 
 
 
Step4
 
Next, we need to add a component that is required for layout. Open Solution Explorer and go to Components -> Get More Components. In this way, you can move on Xamarin Components Store, then search for AppCompat and click "Add to App".
 
 
 
 
Step5
 
Next, we need to add a more component that is required for caching images from web. Open Solution Explorer and go to Components -> Get More Components. In this way, you can move on Xamarin Components Store, then search for Picasso and click "Add to App".
 
 
Step6
 
Next, go to Solution Explorer-> Project Name and right-click. Select Add -> New Item-> Class. Give it a name, like Common.cs and write the following code with appropriate namespaces.
 
(Class Name: Common)
 
Note

Please must change API_KEY of your common class.   
  1. using System;  
  2. using System.Text;  
  3. namespace XamarinWeatherApp.Common {  
  4.     class Common {  
  5.         public static string API_KEY = "39a553a8c16c4d286e3acc2be7067c6e";  
  6.         public static string API_LINK = "https://api.openweathermap.org/data/2.5/weather";  
  7.         public static string APIRequest(string lat, string lng) {  
  8.             StringBuilder sb = new StringBuilder(API_LINK);  
  9.             sb.AppendFormat("?lat={0}&lon={1}&APPID={2}&units=metric", lat, lng, API_KEY);  
  10.             return sb.ToString();  
  11.         }  
  12.         public static DateTime UnixTimeStampToDateTime(double unixTimeStamp) {  
  13.             DateTime dt = new DateTime(1970, 1, 1, 0, 0, 0, DateTimeKind.Utc);  
  14.             dt = dt.AddSeconds(unixTimeStamp).ToLocalTime();  
  15.             return dt;  
  16.         }  
  17.         public static string GetImage(string icon) {  
  18.             return $ "http://openweathermap.org/img/w/{icon}.png";  
  19.         }  
  20.     }  
  21. }  
Step7

Similarly, create another class named as OpenWeatherMap.cs and write the following code with appropriate namespaces.
 
(File Name - OpenWeatherMap)
  1. using System.Collections.Generic;  
  2. namespace XamarinWeatherApp.Model {  
  3.     public class Coord {  
  4.         public double lon {  
  5.             get;  
  6.             set;  
  7.         }  
  8.         public double lat {  
  9.             get;  
  10.             set;  
  11.         }  
  12.     }  
  13.     public class Weather {  
  14.         public int id {  
  15.             get;  
  16.             set;  
  17.         }  
  18.         public string main {  
  19.             get;  
  20.             set;  
  21.         }  
  22.         public string description {  
  23.             get;  
  24.             set;  
  25.         }  
  26.         public string icon {  
  27.             get;  
  28.             set;  
  29.         }  
  30.     }  
  31.     public class Main {  
  32.         public double temp {  
  33.             get;  
  34.             set;  
  35.         }  
  36.         public double pressure {  
  37.             get;  
  38.             set;  
  39.         }  
  40.         public int humidity {  
  41.             get;  
  42.             set;  
  43.         }  
  44.         public double temp_min {  
  45.             get;  
  46.             set;  
  47.         }  
  48.         public double temp_max {  
  49.             get;  
  50.             set;  
  51.         }  
  52.         public double sea_level {  
  53.             get;  
  54.             set;  
  55.         }  
  56.         public double grnd_level {  
  57.             get;  
  58.             set;  
  59.         }  
  60.     }  
  61.     public class Wind {  
  62.         public double speed {  
  63.             get;  
  64.             set;  
  65.         }  
  66.         public double deg {  
  67.             get;  
  68.             set;  
  69.         }  
  70.     }  
  71.     public class Clouds {  
  72.         public int all {  
  73.             get;  
  74.             set;  
  75.         }  
  76.     }  
  77.     public class Sys {  
  78.         public double message {  
  79.             get;  
  80.             set;  
  81.         }  
  82.         public string country {  
  83.             get;  
  84.             set;  
  85.         }  
  86.         public int sunrise {  
  87.             get;  
  88.             set;  
  89.         }  
  90.         public int sunset {  
  91.             get;  
  92.             set;  
  93.         }  
  94.     }  
  95.     public class OpenWeatherMap {  
  96.         public Coord coord {  
  97.             get;  
  98.             set;  
  99.         }  
  100.         public List < Weather > weather {  
  101.             get;  
  102.             set;  
  103.         }  
  104.         public string @base {  
  105.             get;  
  106.             set;  
  107.         }  
  108.         public Main main {  
  109.             get;  
  110.             set;  
  111.         }  
  112.         public Wind wind {  
  113.             get;  
  114.             set;  
  115.         }  
  116.         public Clouds clouds {  
  117.             get;  
  118.             set;  
  119.         }  
  120.         public int dt {  
  121.             get;  
  122.             set;  
  123.         }  
  124.         public Sys sys {  
  125.             get;  
  126.             set;  
  127.         }  
  128.         public int id {  
  129.             get;  
  130.             set;  
  131.         }  
  132.         public string name {  
  133.             get;  
  134.             set;  
  135.         }  
  136.         public int cod {  
  137.             get;  
  138.             set;  
  139.         }  
  140.     }  
  141. }   
Step8 
 
Next, create another class named as Helper.cs and write the following code with appropriate namespaces.
 
(File Name - Helper)
  1. using Java.IO;  
  2. using Java.Net;  
  3. using System;  
  4. using System.Text;  
  5. namespace XamarinWeatherApp.Helper {  
  6.     public class Helper {  
  7.         static String stream = null;  
  8.         public Helper() {}  
  9.         public String GetHTTPData(String urlString) {  
  10.             try {  
  11.                 URL url = new URL(urlString);  
  12.                 using(var urlConnection = (HttpURLConnection) url.OpenConnection()) {  
  13.                     if (urlConnection.ResponseCode == HttpStatus.Ok) {  
  14.                         BufferedReader r = new BufferedReader(new InputStreamReader(urlConnection.InputStream));  
  15.                         StringBuilder sb = new StringBuilder();  
  16.                         String line;  
  17.                         while ((line = r.ReadLine()) != null) sb.Append(line);  
  18.                         stream = sb.ToString();  
  19.                         urlConnection.Disconnect();  
  20.                     }  
  21.                 }  
  22.             } catch (Exception ex) {  
  23.                 System.Diagnostics.Debug.WriteLine(ex.Message);  
  24.             }  
  25.             return stream;  
  26.         }  
  27.     }  
  28. }  
Step9
 
Now, open Solution Explorer-> Project Name-> Resources-> Layout-> Main.axml. Open this main layout file and add the following code.
 
(File Name: Main.axml)
 
(Folder Name: Layout)
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent">  
  3.     <TextView android:id="@+id/txtCity" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="40dp" android:text="" android:textSize="36sp" android:gravity="center" />  
  4.     <TextView android:id="@+id/txtLastUpdate" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="" android:textSize="16sp" android:gravity="center" />  
  5.     <ImageView android:id="@+id/imageView" android:layout_width="100dp" android:layout_height="100dp" android:layout_gravity="center" />  
  6.     <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/txtDescription" android:text="" android:textSize="30sp" android:gravity="center" />  
  7.     <TextView android:id="@+id/txtHumidity" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="" android:textSize="30sp" android:gravity="center" />  
  8.     <TextView android:id="@+id/txtTime" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="" android:textSize="36sp" android:gravity="center" />  
  9.     <TextView android:id="@+id/txtCelsius" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="" android:textSize="80sp" android:gravity="center" />   
  10. </LinearLayout>  
Step10
 
Next, open Solution Explorer-> Project Name-> MainActivity. Open the main activity file and add the following code using appropriate namespaces.
 
Main Activity
  1. using Android.App;  
  2. using Android.Widget;  
  3. using Android.OS;  
  4. using Android.Locations;  
  5. using XamarinWeatherApp.Model;  
  6. using Android.Runtime;  
  7. using System;  
  8. using Square.Picasso;  
  9. using Newtonsoft.Json;  
  10. using Android.Content;  
  11. namespace XamarinWeatherApp {  
  12.     [Activity(Label = "WeatherApp", MainLauncher = true, Icon = "@drawable/icon", Theme = "@style/Theme.AppCompat.Light.NoActionBar")]  
  13.     public class MainActivity: Activity, ILocationListener {  
  14.         TextView txtCity, txtLastUpdate, txtDescription, txtHumidity, txtTime, txtCelsius;  
  15.         ImageView imgView;  
  16.         LocationManager locationManager;  
  17.         string provider;  
  18.         static double lat, lng;  
  19.         OpenWeatherMap openWeatherMap = new OpenWeatherMap();  
  20.         protected override void OnCreate(Bundle bundle) {  
  21.             base.OnCreate(bundle);  
  22.             // Set our view from the "main" layout resource  
  23.             SetContentView(Resource.Layout.Main);  
  24.             locationManager = (LocationManager) GetSystemService(Context.LocationService);  
  25.             provider = locationManager.GetBestProvider(new Criteria(), false);  
  26.             Location location = locationManager.GetLastKnownLocation(provider);  
  27.             if (location == null) System.Diagnostics.Debug.WriteLine("No Location");  
  28.         }  
  29.         protected override void OnResume() {  
  30.             base.OnResume();  
  31.             locationManager.RequestLocationUpdates(provider, 400, 1, this);  
  32.         }  
  33.         protected override void OnPause() {  
  34.             base.OnPause();  
  35.             locationManager.RemoveUpdates(this);  
  36.         }  
  37.         public void OnLocationChanged(Location location) {  
  38.             lat = Math.Round(location.Latitude, 4);  
  39.             lng = Math.Round(location.Longitude, 4);  
  40.             new GetWeather(this, openWeatherMap).Execute(Common.Common.APIRequest(lat.ToString(), lng.ToString()));  
  41.         }  
  42.         public void OnProviderDisabled(string provider) {}  
  43.         public void OnProviderEnabled(string provider) {}  
  44.         public void OnStatusChanged(string provider, [GeneratedEnum] Availability status, Bundle extras) {}  
  45.         private class GetWeather: AsyncTask < string, Java.Lang.Void, string > {  
  46.             private ProgressDialog pd = new ProgressDialog(Application.Context);  
  47.             private MainActivity activity;  
  48.             OpenWeatherMap openWeatherMap;  
  49.             public GetWeather(MainActivity activity, OpenWeatherMap openWeatherMap) {  
  50.                 this.activity = activity;  
  51.                 this.openWeatherMap = openWeatherMap;  
  52.             }  
  53.             protected override void OnPreExecute() {  
  54.                 base.OnPreExecute();  
  55.                 pd.Window.SetType(Android.Views.WindowManagerTypes.SystemAlert);  
  56.                 pd.SetTitle("Please wait....");  
  57.                 pd.Show();  
  58.             }  
  59.             protected override string RunInBackground(params string[] @params) {  
  60.                 string stream = null;  
  61.                 string urlString = @params[0];  
  62.                 Helper.Helper http = new Helper.Helper();  
  63.                 //urlString = Common.Common.APIRequest(lat.ToString(), lng.ToString());  
  64.                 stream = http.GetHTTPData(urlString);  
  65.                 return stream;  
  66.             }  
  67.             protected override void OnPostExecute(string result) {  
  68.                 base.OnPostExecute(result);  
  69.                 if (result.Contains("Error: Not City Found")) {  
  70.                     pd.Dismiss();  
  71.                     return;  
  72.                 }  
  73.                 openWeatherMap = JsonConvert.DeserializeObject < OpenWeatherMap > (result);  
  74.                 pd.Dismiss();  
  75.                 //Controls   
  76.                 activity.txtCity = activity.FindViewById < TextView > (Resource.Id.txtCity);  
  77.                 activity.txtLastUpdate = activity.FindViewById < TextView > (Resource.Id.txtLastUpdate);  
  78.                 activity.txtDescription = activity.FindViewById < TextView > (Resource.Id.txtDescription);  
  79.                 activity.txtHumidity = activity.FindViewById < TextView > (Resource.Id.txtHumidity);  
  80.                 activity.txtTime = activity.FindViewById < TextView > (Resource.Id.txtTime);  
  81.                 activity.txtCelsius = activity.FindViewById < TextView > (Resource.Id.txtCelsius);  
  82.                 activity.imgView = activity.FindViewById < ImageView > (Resource.Id.imageView);  
  83.                 //Add Data   
  84.                 activity.txtCity.Text = $ "{openWeatherMap.name},{openWeatherMap.sys.country}";  
  85.                 activity.txtLastUpdate.Text = $ "Last Updated: {DateTime.Now.ToString("  
  86.                 dd MMMM yyyy HH: mm ")}";  
  87.                 activity.txtDescription.Text = $ "{openWeatherMap.weather[0].description}";  
  88.                 activity.txtHumidity.Text = $ "Humidity: {openWeatherMap.main.humidity} %";  
  89.                 activity.txtTime.Text = $ "{Common.Common.UnixTimeStampToDateTime(openWeatherMap.sys.sunrise).ToString("  
  90.                 HH: mm ")}/{Common.Common.UnixTimeStampToDateTime(openWeatherMap.sys.sunset).ToString("  
  91.                 HH: mm ")}";  
  92.                 activity.txtCelsius.Text = $ "{openWeatherMap.main.temp} °C";  
  93.                 if (!string.IsNullOrEmpty(openWeatherMap.weather[0].icon)) {  
  94.                     Picasso.With(activity.ApplicationContext).Load(Common.Common.GetImage(openWeatherMap.weather[0].icon)).Into(activity.imgView);  
  95.                 }  
  96.             }  
  97.         }  
  98.     }  
  99. }   
Step11
 
We need some permissions from device. Let's open Solution Explorer and go to Properties-> AndroidManifest and add the following code inside application tags.
  1. <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />  
  2. <uses-permission android:name="android.permission.INTERNET" />  
  3. <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />  
  4. <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />  
  5. <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />  
  6. <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />  
  7. <uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES" />   
Finally, we have done our Weather app just rebuild and run the project. You will have the result like below.
 
Output
 
  

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs