Lookout — Air Quality Index app
This blog encircles my entire (initially enticing 😛) journey of starting off with android development and then moving on to develop my very first android application using Java.
I participated in Season of Code ‘2019 (SOC) which is an annual competition organized by our institute’s Mobile Development Group every year to recruit students from freshmen and sophomore year. Though I couldn’t make for unfortunate reasons but it was a fantastic journey overall and I learnt a lot.
Link to the final application in my GitHub repository: Lookout
Inspiration
The first task for us participants was to draft a proposal with an idea for an app and an essential point to include was to why we want to go forward with this idea.
It was pretty easy for me figuring out an idea since I always wanted to make such an application through which (in some way) I could help my parents. A little heads up, I live in Delhi-NCR in India and air pollution has long been an issue with the country’s capital region. I still remember suggesting my dad to shift to some other place and settling there. This was, of course, not possible given the professional constraints.
Building an app which constantly monitors and shows the user the latest info about air pollution and could also suggest suitable precautions? Boom 💥 idea is ready!
Link to my proposal: SOC: Lookout proposal
Design — UI/UX and Layout
I used Figma for designing my application prototype. Honestly, Figma is awesome and is my go-to tool for any kind of UI/UX task which I need to accomplish. Being my first ever project involving designing work, I studied the basics.
Link to my Figma board: design board. The UI-UX Primer is an amazing blog written by Christine Yeh and is a good resource for someone who is just getting started.
Starting with the basics
I started off the Udacity Android-Basics NanoDegree courses for learning android and they are amazing for anyone who wants to start off with android. I’ll mention them in their further coming respective sentences. They develop your concepts right from the basics like: layouts, views and basic android UI components to the advanced stuff like Data Storage and Networking.
Then comes basic programming tasks revolving around OOPS(Object Oriented Programming Language) in Java, Gradle, adding logic to your app and taking input from the user. I used Android Studio as my primary IDE for developing the app. It’s a feature-packed IDE by JetBrains having tons of features to develop a nice and robust android application.
I also formulated a layout for the working of my project before entering the development phase:
Development Phase
Then came the development phase when I finished all the tutorials and started off with the coding of the application.
The frontend of the app is created through XML (Extensible Markup Language) in the form of XML layout files. Check official guide from Google on XML user interfaces for android here.
I used the BottomNavigationView Activity style as I had three independent type of screens to show to the user including the home page, AQI page for searching cities(where the user will spend the most time) and finally the screen for showing a world map wherein all cities are marked by different colours (according to their AQI).
API
One major component the application requires for functioning is an API (Application Programming Interface). According to Wikipedia :
An Application Programming Interface (API) is a set of functions, procedures, methods or classes used by computer programs to request services from the operating system, software libraries or any other service providers running on the computer. A computer programmer uses the API to make application programs.
Here I’ve used Airvisual and AQICN API. Both these organisations have hardware components in various cities across the world feeding live data into the server which the Api fetches for us. Consuming data from an API requires an HTTP operation. The primary and most-commonly-used HTTP operations (or methods, as they are properly called) are POST, GET, PUT, PATCH, and DELETE. You can get to know more about these here.
To use the API, our application requires Networking implementation. We have many libraries available in Android for making networking calls over the internet. The most famous ones are Retrofit, HttpURLConnection and OkHTTP. HttpURLConnection is the one more basic and old among them. I used HttpURLConnection for my work. Code follows:
urlConnection = (HttpURLConnection) url.openConnection(); urlConnection.setRequestMethod("GET"); urlConnection.setRequestProperty("Authorization", "Token xxxxxxxx"); urlConnection.setRequestProperty("Content-Type", "application/json"); urlConnection.connect();According to the official Android documentation networking calls cannot be made directly through the UI thread instead it required asynchronous calls:
To avoid creating an unresponsive UI, don’t perform network operations on the UI thread. By default, Android 3.0 (API level 11) and higher requires you to perform network operations on a thread other than the main UI thread; if you don’t, a NetworkOnMainThreadException is thrown.
Asynchronous Operations
Here, at this point, I was introduced to the concept of threads and asynchronous (short for ASync) operation. This is something with which every developer is familiar since it’s an essential part of many background operations of applications and software.
Asynchronous ops is essential in a way because you don’t want to block your UI if (let’s say) an image is not downloaded? or maybe some data is not fetched from the database yet? Async operations use a simultaneous yet entirely separate thread for communicating with an external service (most commonly Database and networking calls). Hence they don’t interfere with the main(UI) thread and update it whenever the data is ready.
There are many ways to implement Asynchronous operations in Android and one of them is AsyncTask (though it’s deprecated now).
class DownloadFilesTask extends AsyncTask <URL, Integer, Long> {protected Long doInBackground(URL... urls) {// this function executes the desired Async operation which cannot // be performed on UI thread.} protected void onProgressUpdate(Integer... progress) {// executed if any any operation has to be done on the data // obtained from the ASync call.} protected void onPostExecute(Long result) {// this function returns the final data obtained after the ASync // call.}
}
This above Asynchronous operation can be triggered through:
new DownloadFilesTask().execute(url1, url2, url3);Search functionality using ArrayAdapter
In this app, user can search the name of the city he/she wants to see the AQI. The order goes like this as seen in the flowchart shown: Country name then it’s states followed by the chosen state’s cities.
ArrayAdapter is used to transfer the Arraylist data to a dropdown.:
ArrayAdapter<String> Country = new ArrayAdapter<>(getActivity(), android.R.layout.simple_dropdown_item_1line, countryList);
countrySearch.setAdapter(adapterCountry);World Map page
To display maps in android apps, the best way is to use the Maps API of the Google Maps Android SDK. It provides a ton of features and is pretty easy to use given the methods. SupportMapFragment class enables us to implement the maps:
SupportMapFragment mapFragment = getSupportFragmentManager()
.findFragmentById(R.id.map); mapFragment.getMapAsync(this);OnMapReady method needs to be overridden in order to control various features of the maps. For example: using custom markers, zoom to a particular coordinate at the start etc.
This is what the app looked at the end:
So, that’s pretty much it! Thanks for staying till the end and share if you like it 😄
Peace out 🙌
