The exquisite features of Android mobile operating system have driven smartphones users towards it. Today, Google Play is loaded with hundreds and thousands of apps that allow you to perform ample number of activities while on a move. Right from checking out the latest news to making important calls, Android smartphone frees you from the worries of operating your laptop/desktop every now and then. While most of the Android apps available on Google Play are free-to-download, many others require download permissions. If you’re creatively inclined and intend to build your own weather app for your Android device then this is a blog that will tel you all. Here, I’ve shown you the steps that are involved in building a weather app for the Android mobile operating system. So, let’s get started.
A look at the prerequisites
Being involved with a reputable Android development Company, prior to delving into the process of creating a weather app, make sure you’ve the following set up:
- Eclipse ADT Bundle – This can be downloaded at the Android Developer website.
- OpenWeatherMap API Key– This is free and can be obtained by signing up at the OpenWeatherMap website.
- Icons – It is recommended to download the weather icons from a popular website. Here, you need to download the TTF file because it will further be used in the native app. The font would be used for rendering different icons on the basis of the weather conditions.
And now, the steps that you need to take for creating a weather app:
Step 1:
Assign a suitable name to the app. In this post, I’ve named the app as SimpleWEather. After this, enter a unique package name, followed by setting the minimum required SDK to Android 2.2 and setting the target SDK to Android 4.4. Also, here, I’ve set the theme as ‘Holo Dark’. The app that I’m planning to create here will have only one Activity and will be based on the Blank Activity template as shown in the below screen-shot:
Step 2:
Now, name the Activity as ‘WeatherActivity’. I will be using a Fragment inside this Activity. The layout for the Activity will be defined as activity_weather.xml and the layout for the Fragment will be defined as fragment_weather.xml.
Step 3: Adding custom font
Here, simply copy the weathericons-regular-webfont.ttf file to your project’s assets/fonts directory and rename the same to weather.ttf.
Step 4: Editing the manifest
For setting the app’s permission, android.permission.INTERNET would be used as explained below:
<uses-permission android:name=”android.permission.INTERNET”/>
Step 5: Editing Activity’s Layout
With not much to change in the activity_weather.xml, all you need to do here is add an extra property that would be used for changing the color of the background to #FF0099CC.
Step 6: Editing the Fragment’s Layout
In order to edit the fragment_weather.xml, just add five TextView tags that would display details such as: city, country, current temperature, an icon that displays the current weather condition, a timestamp that tells the user when the weather information was last updated, weather description and humidity. For this, you can use a RelativeLayout for arranging the text views.
Step 7: Editing strings.xml
Here, all you need to do is simply add the following to the values/strings.xml file:
<?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">Simple Weather</string> <string name="change_city">Change city</string> <!-- Put your own APP ID here --> <string name="open_weather_maps_app_id">11111</string> <string name="weather_sunny"></string> <string name="weather_clear_night"></string> <string name="weather_foggy"></string> <string name="weather_cloudy"></string> <string name="weather_rainy"></string> <string name="weather_snowy"></string> <string name="weather_thunder"></string> <string name="weather_drizzle"></string> <string name="place_not_found">Sorry, no weather data found.</string> </resources>
The Edit strings.xml file will render the weather icons.
Step 8: Adding a Menu Item
This is being done by any skilled Android App Developers to enable the user to choose the city whose weather he/she wants to view. Here, you need to edit menu/weather.xml file by adding an item as explained below:
<menu xmlns:android="chemas.android.com/apk/res/android" xmlns:app="schemas.android.com/apk/res-auto" xmlns:tools="schemas.android.com/tools" tools:context="ah.hathi.simpleweather.WeatherActivity" > <item android:id="@+id/change_city" android:orderInCategory="1" android:title="@string/change_city" app:showAsAction="never"/> </menu>
Step 9: Fetching data from OpenWeatherMap
You can get the weather details of a city formatted as JSON with the help of OpenWeatherMap API. All you need to do is simply pass the city’s name and metric system in the query string. For example, in order to fetch the current weather information for Denmark, using the metric system, all you need to do is send a request to
api.openweathermap.org/data/2.5/weather q=Denmark&units=metric
Step 10: Storing City as a Preference
This is being done to eliminate the hassles of specifying the city name every time the Android consumer wants to use the app. As an app developer, you can use SharedPreferences for storing the city as a preference. Instead of directly accessing the preferences from the Activity class, a separate class is being created.
Step 11: Editing the Activity
Here, simply replace the default implementation of the onCreate method with the one mentioned below in which there’s a good usage of the WeatherFragment:
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_weather); if (savedInstanceState == null) { getSupportFragmentManager().beginTransaction() .add(R.id.container, new WeatherFragment()) .commit(); } }
With this, you’re done with your weather app. Now, simply build the project and deploy it to an Android device for testing purpose.
Wrapping Up
Now that you’re familiar with the steps of building a fully-functional weather application, its time for you to explore the OpenWeatherMap API to boost the overall performance of your application. For this, you can proceed ahead by making proper use of stunning weather icons.