As a mobile application developer, it is very important to have a good knowledge of consuming web services in mobile application. This is the reason why I have decided to work you through how you can build a weather application from scratch by consuming the OpenWeatherMap API.
OpenWeatherMap is an online service that provides developers with weather data such as the current weather data of a particular place or location, historical data and also weather forecast.
Below is an image of what our final application will look like. We will be able to retrieve the current weather information of our location, as well as search for weather information of other cities around the world.
1. Sign up for an API key from OpenWeatherMap
Visit the OpenWeatherMap website to signup for an API key. The OpenWeatherMap API does not process any request without the API key, therefore, it is very important in order to receive a response from the API.
2. Android App Development in Android Studio
Launch the Android Studio IDE and create a new project by selecting the Empty Activity from the list of available template.
For our networking calls to the OpenWeatherMap API, we will be making use of an asynchronous callback-based HTTP client library for Android. You might want to learn more about the library here.
Open the build.gradle file, which can be found by navigating to app/build.gradle in your current project directory. Add the below code snippet to the list of dependencies and click on ‘Sync‘ in order to update your project dependencies.
(a) Open the colors.xml file and add the below code snippet. This can be found under app/src/main/res/values
(b) Open the strings.xml file under app/src/main/res/value. Edit the file to match up with the code snippet below.
We need to design the screen layout for displaying the weather information, as well as the screen for search weather information of a particular city.
(a) Create a new layout XML file under app/src/main/res and name it activity_weather.xml. Copy and paste the below code snippet.
(b) Create another layout file under app/src/main/res and name it activity_find_city_weather.xml. Copy the below code snippet into the created file.
The next step for us is to download the drawable resource files used in this project. This can be downloaded here. Unzip the downloaded files and copy it to the drawable folder of your Android application.
According to the OpenWeatherMap documentation, whenever we make a request to the API for weather information using geographic coordinates or using the city name, a typical JSON response from the OpenWeatherMap API is shown below. We will discuss more on the process of making the API request in the next step.
As shown above, we can see that there is lots of information about the weather of the city we have just requested, in this case London, GB.
In our application, we will be displaying the Temperature, Wind Speed, Humidity, Pressure, City Name, Country, Weather Description and the Weather Icon from the JSON object response returned by the API.
We therefore need to create a class to model the weather information received from OpenWeatherMap upon every successful request.
Create a new java class named Weather, the below code snippets goes into this file.
The try catch block on Line 22 – 54 is used to get the needed data from the API response. Study this code block very well in comparison to the screen shot above.
There is another static method (determineWeatherIcon) on line 56 – 76. We used this code block to check for the appropriate weather image displayed based on the weather id.
Notice that we are retrieving the weather id on line 28. The list of what each weather id represents can be found here. Our conditional statement in the determineWeatherIcon method has been written based on the interpretation of the weather id by OpenWeatherMap.
Line 78 – 108 is simply a list of getter methods for each of the information received (Temperature, Wind Speed, Humidity, Pressure, City Name, Country, Weather Description) from the API, in order to easily make use of this values in our WeatherActivity.java file.
Create an Android activity for each of the layout XML files created in Step 4
(a) Under the app/src/main/java, create a new Android activity named WeatherActivity. Copy and paste the code snippet below into it.
Now, let’s quickly explain the code blocks above.
(i) We used line 36 to define the api end point that we will be making request to.
(ii) We used line 38 to specify the API Key earlier received when signing up with OpenWeatherMap. Replace the “YOUR_API_KEY” string with the API Key from OpenWeatherMap.
(iii) We used line 44 to specify the Location Provider required from the device. In this case, I have specified to use the NETWORK_PROVIDER. You can also use the GPS_PROVIDER if that is what you want.
(iv) We used line 47 and 48 to create an instance of the LocationManager and the LocationListener.
(v) In the onResume() method, we are simply checking if a city name has already been passed for a search from FindCityWeatherActivity or not. We used the intent.getStringExtra(“city”) to receive the city name entered and passed from the FindCityWeatherActivity.
(vi) In other to get the weather data by city name from OpenWeatherMap, the city name and the API_KEY must be passed along to the end point, as shown on line 82 – 90 with the method getNewCityWeather().
(vi) In our getCurrentLocationWeather() on Line 92, we are making an api call to the OpenWeatherMap endpoint using geographic coordinates, in this case the longitude and latitude of the device. We also passed the API_KEY along with the latitude and longitude value in order to receive a response from the server.
As usual, all applications in Android need to request and be granted permission in order to access the device location. This is what we are doing on line 127 – 153.
(vii) Line 155 – 181 is responsible for the asynchronous HTTP call to the OpenWeatherMap endpoint. The code block on line 163 – 168 will be executed, only if our request is successful, otherwise something must have been wrong with our request. Also, note that we checked to make sure the device has a working internet before making a request to the server by calling the isConnected() method on line 156. Our UI components in activity_weather.xml will be updated with the corresponding weather data from the Weather.java file, once there is a successful response from the server.
(viii) Finally, it is very important to stop the LocationListener whenever your application goes to the background, so as not to drain the device battery. This can make users uninstall your application as fast as possible. Therefore, we stopped the LocationListener in our onPause() method.
(b) Create an Android activity named FindCityWeatherActivity and fill with the below code snippet.
Note that we used the intent.putExtra(“city”, newCityName) on line 27 to pass the city name entered in the EditText box to the WeatherActivity.java. This will allow us fetch the weather information for that city.
We need to create a menu folder to hold the menu resource that will be used in navigating between the WeatherActivity and FindCityWeatherActivity. Create the menu folder under app/src/main/res, as shown below.
Create the menu file and name it main_menu.xml. Copy and paste the below code snippet.
Register the two newly created Android activity(WeatherActivity & FindCityWeatherActivity) in your AndroidManifest.xml file.
We also need to add permission in our application to access the device internet connection, as well as the device location. Your AndroidManifest.xml file should be similar to what we have in the code snippet below.
Finally, build the project and run on a physical device or an Android emulator.
Your final project structure should similar to the image shown below.
For further help, use the comment section below or reach out directly to appdevchannel[at]gmail.com