Android weather app: JSON, HTTP and Openweathermap

Topics covered

How to develop weather app

HTTP connection

JSON Parsing

Openweathermap API

I've released a new WeatherLib for Android that simplifies the weather app coding helping you in many app details. This lib supports Openweathermap and other weather provider. If you are interested give a look here

You can even join the new community to talk about it.


In this post I want to describe how to create an android weather app that gives current weather information. This android app will use JSON, HTTP connection and AsyncTask to get this information.. As weather provider I will use OpenWeatherMap a free weather service that provides some interesting API really easy to use.I will guide you through the steps necessary to build up a working android weather app. For more information about API, you can visit the OpenWeatherMap web site.
You can give a look here to know how to retrieve current user position and the corresponding city name.
I will show to you the final result so you can have an idea about what we will do in this post.






Current weather info – Android HTTP Request and JSON Response

OpenWeatherMap offers several API to use to get weather information. We want to use the one that gives us the current weather info. The URL to call to get this info is:
http://api.openweathermap.org/data/2.5/weather?q=city,country
Let’s suppose we want to know the weather in Rome, IT. Using our browser we can have:

weather_api_search
As we can see we have JSON response. Formatting the response we have
{
  "coord":{"lon":12.4958,"lat":41.903},
  "sys":{"country":"Italy","sunrise":1369107818,"sunset":1369160979},
  "weather":[{
        "id":802,"main":"Clouds","description":"scattered clouds",
         "icon":"03d"}],
   "base":"global stations",
   "main":{
           "temp":290.38,
           "humidity":68,
           "pressure":1015,
           "temp_min":287.04,
           "temp_max":293.71},
    "wind":{ 
           "speed":1.75,
           "deg":290.002},
    "clouds":{"all":32},
    "dt":1369122932,
    "id":3169070,
    "name":"Rome",
    "cod":200
}
So the first thing we need to do is creating our data model so that we can parse the response and convert it into Java classes. Analyzing the response we have different “main” tags that we can use as class in Java:
  • coord (object)
  • sys (object)
  • weather (array)
  • main (object)
  • wind (object)
  • name: (String)

The response is quite simple and we can convert it manually. The UML class diagram for the model is shown below:



Android JSON Weather Parser

Once we have created our model we have to parse it. We can create a specific class that handles this task. First we have to create the “root” object that receive as input the entire string containing all the JSON response:
// We create out JSONObject from the data
JSONObject jObj = new JSONObject(data);

Then we start parsing each piece of the response:
// We start extracting the info
Location loc = new Location();

JSONObject coordObj = getObject("coord", jObj);
loc.setLatitude(getFloat("lat", coordObj));
loc.setLongitude(getFloat("lon", coordObj));

JSONObject sysObj = getObject("sys", jObj);
loc.setCountry(getString("country", sysObj));
loc.setSunrise(getInt("sunrise", sysObj));
loc.setSunset(getInt("sunset", sysObj));
loc.setCity(getString("name", jObj));
weather.location = loc;

In the line 4,8 we create two “sub” object (coordObj and sysObj) having as parent the jObj as it clear from the JSON response. As we can see we use some helper methods to get String,int and float values:
private static JSONObject getObject(String tagName, JSONObject jObj)  throws JSONException {
    JSONObject subObj = jObj.getJSONObject(tagName);
    return subObj;
}

private static String getString(String tagName, JSONObject jObj) throws JSONException {
    return jObj.getString(tagName);
}

private static float  getFloat(String tagName, JSONObject jObj) throws JSONException {
    return (float) jObj.getDouble(tagName);
}

private static int  getInt(String tagName, JSONObject jObj) throws JSONException {
    return jObj.getInt(tagName);
}

And then we finally parse the weather information. We have to remember that weather tag is an array so we have to handle it differently
// We get weather info (This is an array)
JSONArray jArr = jObj.getJSONArray("weather");

// We use only the first value
JSONObject JSONWeather = jArr.getJSONObject(0);
weather.currentCondition.setWeatherId(getInt("id", JSONWeather));
weather.currentCondition.setDescr(getString("description", JSONWeather));
weather.currentCondition.setCondition(getString("main", JSONWeather));
weather.currentCondition.setIcon(getString("icon", JSONWeather));

JSONObject mainObj = getObject("main", jObj);
weather.currentCondition.setHumidity(getInt("humidity", mainObj));
weather.currentCondition.setPressure(getInt("pressure", mainObj));
weather.temperature.setMaxTemp(getFloat("temp_max", mainObj));
weather.temperature.setMinTemp(getFloat("temp_min", mainObj));
weather.temperature.setTemp(getFloat("temp", mainObj));

// Wind
JSONObject wObj = getObject("wind", jObj);
weather.wind.setSpeed(getFloat("speed", wObj));
weather.wind.setDeg(getFloat("deg", wObj));

// Clouds
JSONObject cObj = getObject("clouds", jObj);
weather.clouds.setPerc(getInt("all", cObj));

At the end we have our Weather class filled with the data retrieved.

Android HTTP Request and Response

Now we have to exchange information between our android app and the remote server using HTTP protocol. We have to send information and then read the response. We covered this topic in the previous post(Android HTTP Client: GET, POST, Download, Upload, Multipart Request) so we won’t describe it again, we simply show the code:
public class WeatherHttpClient {

    private static String BASE_URL = "http://api.openweathermap.org/data/2.5/weather?q=";
    private static String IMG_URL = "http://openweathermap.org/img/w/";

    
    public String getWeatherData(String location) {
        HttpURLConnection con = null ;
        InputStream is = null;

        try {
            con = (HttpURLConnection) ( new URL(BASE_URL + location)).openConnection();
            con.setRequestMethod("GET");
            con.setDoInput(true);
            con.setDoOutput(true);
            con.connect();
            
            // Let's read the response
            StringBuffer buffer = new StringBuffer();
            is = con.getInputStream();
            BufferedReader br = new BufferedReader(new InputStreamReader(is));
            String line = null;
            while (  (line = br.readLine()) != null )
                buffer.append(line + "\r\n");
            
            is.close();
            con.disconnect();
            return buffer.toString();
        }
        catch(Throwable t) {
            t.printStackTrace();
        }
        finally {
            try { is.close(); } catch(Throwable t) {}
            try { con.disconnect(); } catch(Throwable t) {}
        }

        return null;
                
    }
    
    public byte[] getImage(String code) {
        HttpURLConnection con = null ;
        InputStream is = null;
        try {
            con = (HttpURLConnection) ( new URL(IMG_URL + code)).openConnection();
            con.setRequestMethod("GET");
            con.setDoInput(true);
            con.setDoOutput(true);
            con.connect();
            
            // Let's read the response
            is = con.getInputStream();
            byte[] buffer = new byte[1024];
            ByteArrayOutputStream baos = new ByteArrayOutputStream();
            
            while ( is.read(buffer) != -1)
                baos.write(buffer);
            
            return baos.toByteArray();
        }
        catch(Throwable t) {
            t.printStackTrace();
        }
        finally {
            try { is.close(); } catch(Throwable t) {}
            try { con.disconnect(); } catch(Throwable t) {}
        }
        
        return null;
        
    }
}


Android Weather App

Finally, it is the time for our Activity. The layout is very simple and of course it is just a skeleton you need to improve it if you want to have a production app.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <TextView
        android:id="@+id/cityText"
        style="?android:attr/textAppearanceMedium"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true" />

    <ImageView
        android:id="@+id/condIcon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@id/cityText" />

    <TextView
        android:id="@+id/condDescr"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/condIcon"
        android:layout_alignLeft="@id/condIcon" 
       />

    <TextView
        android:id="@+id/temp"
        style="@style/tempStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="12dp"
        android:layout_alignBaseline="@id/condDescr"
        android:layout_toRightOf="@id/condDescr"/>

    <TextView
        android:id="@+id/pressLab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@id/condDescr"
        android:text="Pressure"
        android:layout_marginTop="15dp" />

    <TextView
        android:id="@+id/press"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@id/pressLab"
        android:layout_toRightOf="@id/pressLab" 
        style="@style/valData"/>

    <TextView
        android:id="@+id/humLab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@id/pressLab"
        android:text="Humidity" />

    <TextView
        android:id="@+id/hum"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@id/humLab"
        android:layout_toRightOf="@id/humLab" 
        android:layout_marginLeft="4dp"
        style="@style/valData"/>

    <TextView
        android:id="@+id/windLab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@id/humLab"
        android:text="Wind" />

    <TextView
        android:id="@+id/windSpeed"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@id/windLab"
        android:layout_toRightOf="@id/windLab"
        android:layout_marginLeft="4dp"
        style="@style/valData" />

    <TextView
        android:id="@+id/windDeg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@id/windLab"
        android:layout_toRightOf="@id/windSpeed"
        android:layout_marginLeft="4dp" 
        style="@style/valData"/>

</RelativeLayout>

In onCreate method we simply get the reference to the Views inside the layout so that we can populate them later after the request is completed.
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    String city = "Rome,IT";
    
    cityText = (TextView) findViewById(R.id.cityText);
    condDescr = (TextView) findViewById(R.id.condDescr);
    temp = (TextView) findViewById(R.id.temp);
    hum = (TextView) findViewById(R.id.hum);
    press = (TextView) findViewById(R.id.press);
    windSpeed = (TextView) findViewById(R.id.windSpeed);
    windDeg = (TextView) findViewById(R.id.windDeg);
    imgView = (ImageView) findViewById(R.id.condIcon);
    
    JSONWeatherTask task = new JSONWeatherTask();
    task.execute(new String[]{city});
}

and we start an AsyncTask, because as we already know network operations are time consuming so we can run them in the main thread otherwise we could have an ANR problem. The JSONWeatherTask is very simply
protected Weather doInBackground(String... params) {
    Weather weather = new Weather();
    String data = ( (new WeatherHttpClient()).getWeatherData(params[0]));

    try {
        weather = JSONWeatherParser.getWeather(data);
        
        // Let's retrieve the icon
        weather.iconData = ( (new WeatherHttpClient()).getImage(weather.currentCondition.getIcon()));
        
    } catch (JSONException e) {                
        e.printStackTrace();
    }
    return weather;

    }

At line 3 we make the HTTP request and then we parse it at line 6.

At line 9 we retrieve the icon that shows the weather condition.
Running the code we have:


The source code available @github.




70 commenti

Great tut. thx man

Reply
rohan kandwal mod

Thanks man

Reply

Thank you for the great tutorials and open source code. It has been a huge help for me in learning parsing.

Reply

When I enter "JSONObject coordObj = getObject("coord", jObj);" in the mainactivity I get the error: "Unhandled exception: org.json.JSON.exception". While the getObject method is also implemented and org.json.JSONException is imported.

Reply
survivingwithandroid mod

Have you tried to log the JSON response you get from the server? Is there coord obj?

Reply

Thank You for this tutorial, it helped me alot

Reply
AndroidDev101 mod

Thanks, great tutorial! Could you tell me how to use the forecast feature as well? For example displaying the 5 day forecast?

Reply
touchwood Inc mod

Do you have any video tutorial for this??

Reply
survivingwithandroid mod

What kind of tutorial would you like to see? Can you give to me some hints? Thx

Reply
survivingwithandroid mod

I'm planning to write a post about next days forecast. Many people are asking for it.
Be patient please! Thx

Reply
touchwood Inc mod

video tutorial of this weather application

Reply

Great tutorial, thanks. A little remark: the absulute zero is 273.15, not 275.15

Reply
survivingwithandroid mod

Ops let me correct it! :)

Reply
AndroidDev101 mod

thank you, that would be amazing! Any eta?

Reply
survivingwithandroid mod

a few days!

Reply

thank,

Reply

Awesome job. How would you change the location though? I'm trying to make a weather app so I want to be able to change the location using the gps. Thanks in advance.

Reply
survivingwithandroid mod

You should get the gps location coord and then make a query using lat and long parameters. Check the openweathermap api for more information

Reply

This tutorial is very helpful, but one problem I have is the weather icon doesn't show up. In the onPostExecute() method the if statement never runs. Do you have any idea why that's happening?

Reply
survivingwithandroid mod

As far as i know, there are some weather code that doesn't have an icon. You should map weather code with your icon weather set.

Reply

I'm using your code exactly and it works great but icons don't show up. I can see the icons in your screenshots, can you give us the code you use?

Reply
survivingwithandroid mod

It can be there are some codes that doesnt much the icon

Reply

Hi, this is a great example, thanks for this.

I just don't know for what purpose
" con.setDoInput(true); -> Line 48
con.setDoOutput(true); -> Line 49"


these two lines are added, but when i removed these two lines weatherhttpclient, the icon showed up on the app. When these line are used the server is returning File Not Found Exception

Reply

In Main activity i think the conversion to centigrade, needs to be "temp.setText("" + Math.round((weather.temperature.getTemp() - 273.15)) + "°C"); instead of "temp.setText("" + Math.round((weather.temperature.getTemp() - 275.15)) + "°C");

Reply
survivingwithandroid mod

setDoInput means that the app wants to use the connection as input, so it wants to read data. AFAIK the default value is true so if you remove it i guess the result doesn't change. setDoOutput means the app wants to write to the connection. The default value is false. In my experience this two parameters doesn't affect the icon download. If you look at my app in the app store it download icons correctly. Anyway i guess the problem happens when there's some weather code that doesn't match an icon. Let me know if you have an example that helps me.

Reply
survivingwithandroid mod

Yes, Artem (see below) showed to me the same error. I forgot to correct it. Thx

Reply

Great Tutorial Thanks! I was trying your example and I am getting an error while downloading the weather icons. I get the following exception

12-19 00:15:39.049: W/System.err(1295): java.io.FileNotFoundException: http://openweathermap.org/img/w/01n



when I type this url in the browser I am able to see the weather icon but in the android emulator this fails. Any idea?

Reply
Sagar Sadavarte mod

This is not full example..............

Reply
Sagar Sadavarte mod

could you please give the application structure,and in which code write in which class

Reply

somebody can hellp me and tell me how to do it? what is the name of class for each of the codes???

Reply

https://github.com/survivingwithandroid/Surviving-with-android/tree/master/WeatherApp

Reply

MUY GRACIAS SIR..............

Reply
survivingwithandroid mod

You can check the source code available at github

Reply
survivingwithandroid mod

What do u want to know? The weather codes?

Reply
Sagar Sadavarte mod

thanks for reply..........
It's working now.............................

Reply
Rushikesh Gomekar mod

how to download the icon ??

Reply

How can I use my own icons and refresh data?, thanks in advance, great tutorial, you are a great help.

Reply
Rushikesh Gomekar mod

i'm getting null from this method :


weather.iconData = ( (new WeatherHttpClient()).getImage(weather.currentCondition.getIcon()));

Reply
survivingwithandroid mod

You should try first to use the link u get in getIcon in your browser and check if the icon is shown.

Reply
survivingwithandroid mod

You can create a map between the weather code condition and a resource id related to the icon you want to show.

Reply
Сергей Ласкин mod

I can't load icon too. I tried to load getIcon in to string, but App is crashed.
"java.io.FileNotFoundException: http://openweathermap.org/img/w/04n"
full log: https://drive.google.com/file/d/0B__pUHHwIRArQ29FeEtFY1A2Vzg/edit?usp=sharing

Reply

Ok, thanks

Reply

How can I change the condition language?, or call condition text from strings.xml?

Reply
Сергей Ласкин mod

U can use lang parametr in URL, read api's manual

Reply
Сергей Ласкин mod

I can't load too, and app is crashed, when i haven't Internet connection, what i must to do?

Reply

Ok, Thank you.

Reply

Hi, could you tell how to create map for custom icons, please?, I am new to java

Reply

What types of weather conditions returns the API?

Reply
survivingwithandroid mod

The API returns the current weather and the forecast

Reply

Ok, but how many types of weather's description are there? for example:

Clouds, broken clouds, light rain, etc..

Reply
davide dellai mod

Anyone knows why my location is always London instead Vicenza (Italy)? I tried to download the source and run the apk but always returns that i am in London.. Doesn't recognize the geolocation?

Reply
survivingwithandroid mod

In the tutorial source code, the geolocation is not implemented. If you look at line 59 of the MainActivity class you can notice there is:

String city = "London,UK";



for that it loads by default London weather condition. Hope it helps you.

Reply
davide dellai mod

Ah ok.. because i really need the code with geolocation and i can't find anything on the web.. I need very little informations like only : condition and temperature nothing more. Of course using location. But actually i can't do it. Can i contact you via hangout?

Reply

How can I create a "iconData" resource reference for new icons? I put in the line:

if (weather.iconData != null && weather.iconData.length > 0){
-> here I put the icon reference with if statement, am I right?
}
I appreciate any help

Reply

I am hoping you can help, I get some user crashes on 4.4.2 on a few devices. Hoping you could point me in the right direction.

I am using open weather, per your http client

private static String BASE_URL = "http://api.openweathermap.org/data/2.5/weather?";

"message" and "gust" are not part of you tutorial, but I do not get a crash on my devices even they return this. I am not familair with parse outside of your tutorial.

Line 44

JSONObject jObj = new JSONObject(data);

Thanks

On data, I get the following,

WEATHER DATA

{"coord":{"lon":-99.04,"lat":34.17},"sys":{"message":0.037,"country":"US","sunrise":1397218143,"sunset":1397264699},"weather":[{"id":800,"main":"Clear","description":"Sky is Clear","icon":"01n"}],"base":"cmc stations","main":{"temp":292.06,"pressure":1011,"temp_min":291.15,"temp_max":293.15,"humidity":31},"wind":{"speed":3.6,"gust":5.65,"deg":18},"clouds":{"all":0},"dt":1397188520,"id":4716202,"name":"Oklaunion","cod":200}

java.lang.RuntimeException: An error occured while executing doInBackground()
at android.os.AsyncTask$3.done(AsyncTask.java:300)
at java.util.concurrent.FutureTask.finishCompletion(FutureTask.java:355)
at java.util.concurrent.FutureTask.setException(FutureTask.java:222)
at java.util.concurrent.FutureTask.run(FutureTask.java:242)
at android.os.AsyncTask$SerialExecutor$1.run(AsyncTask.java:231)
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1112)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:587)
at java.lang.Thread.run(Thread.java:841)

Caused by: java.lang.NullPointerException
at org.json.JSONTokener.nextCleanInternal(JSONTokener.java:116)
at org.json.JSONTokener.nextValue(JSONTokener.java:94)
at org.json.JSONObject.(JSONObject.java:155)
at org.json.JSONObject.(JSONObject.java:172)
at com.survivingwithandroid.weatherapp.model.JSONWeatherParser.getWeather(JSONWeatherParser.java:44)

Reply

My post was cutoff at the bottom

java.lang.RuntimeException: An error occured while executing doInBackground()
at android.os.AsyncTask$3.done(AsyncTask.java:300)
at java.util.concurrent.FutureTask.finishCompletion(FutureTask.java:355)
at java.util.concurrent.FutureTask.setException(FutureTask.java:222)
at java.util.concurrent.FutureTask.run(FutureTask.java:242)
at android.os.AsyncTask$SerialExecutor$1.run(AsyncTask.java:231)
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1112)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:587)
at java.lang.Thread.run(Thread.java:841)

Caused by: java.lang.NullPointerException
at org.json.JSONTokener.nextCleanInternal(JSONTokener.java:116)
at org.json.JSONTokener.nextValue(JSONTokener.java:94)
at org.json.JSONObject.(JSONObject.java:155)
at org.json.JSONObject.(JSONObject.java:172)
at com.survivingwithandroid.weatherapp.model.JSONWeatherParser.getWeather(JSONWeatherParser.java:44)
atnet.RollMeOver.RollMeOver.RollMeOverActivity$JSONWeatherTask.doInBackground(RollMeOverActivity.java:3896)
at net.RollMeOver.RollMeOver.RollMeOverActivity$JSONWeatherTask.doInBackground(RollMeOverActivity.java:1)
at android.os.AsyncTask$2.call(AsyncTask.java:288)
at java.util.concurrent.FutureTask.run(FutureTask.java:237)
at android.os.AsyncTask$SerialExecutor$1.run(AsyncTask.java:231)
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1112)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:587)
at java.lang.Thread.run(Thread.java:841)

Reply
survivingwithandroid mod

At line 44 where you get the error in my code there's a comment in the code so can you send me the line where u get the error? Otherwise have u checked the new weather lib i developed at github? (https://github.com/survivingwithandroid/WeatherLib). It is ready to use lib and you can integrate it in your code easily.

Reply

Line 44 is

JSONObject jObj = new JSONObject(data);

The only comment preceding it was
// We create out JSONObject from the data



I had a longer first post, (above is second) which I provided more detail, I assume you read and deleted it? Thanks for the quick response.

Reply
survivingwithandroid mod

I tried to get the current weather condition for your city, using 4.4.2 as you suggested.
This is the result https://www.flickr.com/photos/122998807@N06/
By the way i'm not using the same lib because i used the one in github (as i suggested before), but the main code is the same so it should work for you too. Let me know

Reply
Prashanth Puranik mod

Remove the con.setDoOutput(true); statement in getImage(). Not sure exactly why, but it does to trick.

PS: Without this it gives 405 status code, which means server refused to send data probably due to some headers it didn't expect tosee in request (just a guess). You can read info on error 405 here - http://www.checkupdown.com/status/E405.html

Reply
survivingwithandroid mod

If you don't want to use the standard icons provided by openweathermap you can load you resources, otherwise you can download them from remote server.

I suggest to you to join https://plus.google.com/communities/117946761543584564970 my community where we can talk about it and i've developed a new ready-to-use lib that helps you in several aspects while developing a weather app.

Reply
survivingwithandroid mod

I've created a new lib that can help you, it provides geolocation too. Look here https://github.com/survivingwithandroid/WeatherLib

Reply

Thank you very much, I look to the community.

Reply
survivingwithandroid mod

You can find all the information here (http://www.survivingwithandroid.com/2014/05/how-to-develop-android-weather-app.html)

Reply

i am getting the result,good job...

Reply

alguien podría facilitar el .zip del proyecto. MUchas Gracias

Reply
Deepak Kanyan mod

Is Any Limits Of Yahoo weather Api For Android




(Like Any No. Of hits Per Day.)

Reply

I seem to be a bit late to the party but when I run the source code (from github) the app stops working immediately.. Any ideas?

Reply

I seem to be a bit late to the party but when I run the source code (from github) the app stops working immediately.. Any ideas?

Reply

Post a Comment