Take a look at the Full Source of this Tutorial
What you learn: You will learn how to access the Google Weather API an parse the XML-Result using a SAXParser.
Designed/Tested with sdk-version: m5-rc14
What this contains:
- Access the Google Weather API
- Load data from the web :src: Separate/Extended Tutorial
- Parse XML Files (Streams) using the SAXParser :src: Separate/Extended Tutorial
- Create a Custom View (extends LinearLayout) :src: Separate/Extended Tutorial
Difficulty: 3.5 of 5
I did this within 2 hours of coding (half for the xml-layout ). This once again shows the power and flexibility of the Android-Platform
Questions/Problems: Simply post below...
What it will look like:
0.) In this tutorial we are going to use the Google (iGoogle) Weather API. We will simply call an URL with the following style:
// Working Examples ( Note: that " "(space) has to be replaced with its html-expression "%20"
// Your browser manages that conversion automatically )
http://www.google.com/ig/api?weather=Sc ... im,Germany
The response is always like the following (when the city could be found):
Note: Originally the xml-code responded comes without LineFeeds + I added comments
If we call the Google Weather API with an not existing town, like:
The "error" xml-return-code for such a bad query is like:
1.) So as we need to extract the information out of the XML-code returned, we have to choose a XML-parser. I decided to use an SAX-Parser (Wiki-Info). SAX stands for Simple API for XML, so it is perfect for us
So the parsing-part follows that Tutorial (one line above). It will parse the XML-Data returned by the Weather API and in the end it "presents" the following Object to us:
It simply contains two sub-objects: WeatherCurrentCondition which contains the parsed data from the xml-tag <current_conditions> and a list of WeatherForecastInfoSet which contains the parsed data from all the xml-tags <forecast_conditions>.
2.) Lets take a look at the Layout. The layout is a bit more complex as what has been done previously.
This it how it is cascaded:
I'm using so much TableLayouts, because they can easily stretch its child-Views.
The small entities with the Image and the Temperature-TextView are a customized View ("SingleWeatherInfoView"), which extends LinearLayout.
By extending LinearLayout we've got the ability to set the android:orientation-Attribute to ="horizontal" or to ="vertical" You can see that feature in the picture. The lonely "SingleWeatherInfoView" which shows the WeatherCondition of today, was coded with android:orientation="horizontal". You can see that the "inner" Views appear next to each other. The four "SingleWeatherInfoView" were xml-defined with: android:orientation="vertical", you can see that its "inner" Views appear below each other. This once again shows the power of object-orientated programming at its best
The layout part is finished now (see the full source for the actual code).
3.) So 90% of the work is done now. The last thing we have to do is to put all the parts together.
We apply an OnClickListener to the Submit-Button, which will do the following, when clicked:
- Call the Google Weather API with what the user typed to the EditText
- Create a SAXParser and parse the result of the previous step
- Display the parsed data in the five "SingleWeatherInfoView".
:arrow: Take a look at the Full Source of this Tutorial