How to Create a COVID-19 Tracker Android App to See Details of any City and State in India?

Difficulty Level : Hard
Last Updated : 08 Sep, 2020

In the previous article, we have discussed How to create a COVID-19 Tracker Android App which shows only the Global Stats. In this article, we will learn how to create a COVID-19 Tracker Android App which will show the details of any city in any State in India. Details like – Total Active cases, Cured Cases, Deaths, and the total number of confirmed cases of any respective city. Here in this App, let’s track demo of 5 cities and one can change according to his/her needs.

demo screenshot

Approach

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.

Step 2: Now Add Some Files Before writing the XML and Java Code

Go to app -> res -> values -> colors.xml section and set the colors for the app.
These Colors are Used In the apps In various Places.

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#024265</color>
    <color name="colorPrimaryDark">#024265</color>
    <color name="colorAccent">#05af9b</color>
  
    <color name="color_one">#fb7268</color>
    <color name="color_white">#ededf2</color>
    <color name="color_two">#E3E0E0</color>
  
    <color name="cases">#FFA726</color>
    <color name="recovered">#66BB6A</color>
    <color name="deaths">#EF5350</color>
    <color name="active">#29B6F6</color>
</resources>

Go to Gradle Scripts -> build.gradle (Module: app) section and import the following dependencies and click the “Sync Now” button to Sync the APP.
To Learn More About Volley Library Click Here.

implementation ‘com.android.volley:volley:1.1.1’

Now Go to the app -> manifests -> AndroidManifests.xml section and allow “Internet Permission” because this App will use Internet Permission.

AndroidManifests.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.statewise">
    <uses-permission android:name="android.permission.INTERNET"/>
  
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
  
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
  
</manifest>

Step 3: Use JSON Parsing to fetch data from the website

Click on this URL- https://api.covid19india.org/state_district_wise.json
It will Show Data of the whole Country and in this, We Are Going to fetch data from here Only.

Step 4: Design the Layout of the activity_main.xml

Go to app -> res -> layout -> activity_main.xml
Add A TextView To the layout: To display GEEKSFORGEEKS at the top of the screen.
Add A ListView To the Layout: To display the list of cities tracking details on the screen.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
  
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="17dp"
        android:text="GEEKSFORGEEKS"
        android:textColor="@color/recovered"
        android:textSize="24sp" />
  
    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="550dp"
        android:layout_alignParentTop="true"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="10dp"
        android:layout_marginTop="60dp"
        android:layout_marginEnd="10dp"
        android:layout_marginBottom="10dp" />
    
</RelativeLayout>

Output UI:

Layout for The activity_main.xml

Step 5: Design the Layout for The ListView

Create A new Layout by right click on the layout folder inside res Folder
Then Click Layout Resource File and Set the name testing.xml
Click Finish To save
Click testing.xml and Start Design UI Layout for the ListView
The Drawable file used in testing.xml is “arrow upward“. Go to drawable -> New -> Vector Asset and search for “arrow upward” and add it to your file.

testing.xml

<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context=".MainActivity">
  
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:background="@color/color_white"
        android:orientation="vertical">
  
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:orientation="horizontal"
            android:weightSum="2">
  
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_gravity="center_vertical"
                android:layout_weight="1"
                android:orientation="vertical">
  
                <!--Text view to display City name-->
                <TextView
                    android:id="@+id/state"
                    android:layout_width="210dp"
                    android:layout_height="match_parent"
                    android:gravity="center_vertical"
                    android:text="City Name"
                    android:textColor="@color/colorAccent"
                    android:textSize="14sp"
                    android:textStyle="bold" />
            </LinearLayout>
  
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:orientation="vertical">
  
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="horizontal">
  
                    <!--Text view to display Active Cases-->
                    <TextView
                        android:layout_width="107dp"
                        android:layout_height="match_parent"
                        android:gravity="center_horizontal"
                        android:text="Active- "
                        android:textStyle="bold" />
  
                    <!--Text view to display Active Cases in Numbers-->
                    <TextView
                        android:id="@+id/active"
                        android:layout_width="72dp"
                        android:layout_height="wrap_content"
                        android:text="2323223 "
                        android:textColor="@color/active"
                        android:textStyle="bold" />
  
                    <!--Image view to display increase in Cases -->
                    <ImageView
                        android:layout_width="17dp"
                        android:layout_height="match_parent"
                        android:src="@drawable/change" />
  
                    <!--Text view to display Todays Active Cases in Numbers-->
                    <TextView
                        android:id="@+id/incactive"
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:gravity="center_horizontal"
                        android:text="32"
                        android:textColor="@color/active"
                        android:textStyle="bold" />
                </LinearLayout>
  
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="horizontal">
  
                    <!--Text view to display Cured Cases -->
                    <TextView
                        android:layout_width="107dp"
                        android:layout_height="match_parent"
                        android:gravity="center_horizontal"
                        android:text="Cured- "
                        android:textStyle="bold" />
  
                    <!--Text view to display Total Cured Cases in Numbers -->
                    <TextView
                        android:id="@+id/cured"
                        android:layout_width="72dp"
                        android:layout_height="wrap_content"
                        android:text="2323223 "
                        android:textColor="@color/recovered"
                        android:textStyle="bold" />
  
                    <!--Image view to display increase in Cases -->
                    <ImageView
                        android:layout_width="18dp"
                        android:layout_height="match_parent"
                        android:src="@drawable/change" />
  
                    <!--Text view to display Todays Cured Cases in Numbers -->
                    <TextView
                        android:id="@+id/inccured"
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:gravity="center_horizontal"
                        android:text="32"
                        android:textColor="@color/recovered"
                        android:textStyle="bold" />
  
                </LinearLayout>
  
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="horizontal">
  
                    <!--Text view to display deths Cases -->
                    <TextView
                        android:layout_width="107dp"
                        android:layout_height="match_parent"
                        android:gravity="center_horizontal"
                        android:text="death- "
                        android:textStyle="bold" />
  
                    <!--Text view to display total death Cases in Numbers -->
                    <TextView
                        android:id="@+id/death"
                        android:layout_width="72dp"
                        android:layout_height="wrap_content"
                        android:text="2323223 "
                        android:textColor="@color/deaths"
                        android:textStyle="bold" />
  
                    <!--Image view to display increase in Cases -->
                    <ImageView
                        android:layout_width="18dp"
                        android:layout_height="match_parent"
                        android:src="@drawable/change" />
  
                    <!--Text view to display todays death Cases in Numbers -->
                    <TextView
                        android:id="@+id/incdeath"
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:gravity="center"
                        android:text="32"
                        android:textColor="@color/deaths"
                        android:textStyle="bold" />
  
                </LinearLayout>
  
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="horizontal">
  
                    <!--Text view to display total Number of cases Cases  -->
                    <TextView
                        android:layout_width="107dp"
                        android:layout_height="match_parent"
                        android:gravity="center_horizontal"
                        android:text="total- "
                        android:textStyle="bold" />
  
                    <!--Text view to display total Number of cases Cases in Numbers -->
                    <TextView
                        android:id="@+id/total"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="2323223 "
                        android:textStyle="bold" />
  
                </LinearLayout>
  
            </LinearLayout>
  
        </LinearLayout>
  
    </LinearLayout>
  
    <View
        android:layout_width="391dp"
        android:layout_height="6dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true"
        android:layout_marginStart="11dp"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="113dp"
        android:layout_marginEnd="10dp"
        android:layout_marginRight="20dp"
        android:background="@color/color_two" />
  
</RelativeLayout>

Output UI:

Output UI

Step 6: Create a New JAVA Class to fetch the data we want to fetch from the Website

Create a new JAVA class name it as Model.java
Use getters and setters functions to create a function for the data you want to fetch from the website.

Model.java

public class Model {
    private String name, total, death, cured, active, incAct, incDec, incRec;
  
    public Model(String name, String total, String death, String cured,
                 String active, String incAct, String incDec, String incRec)
    {
        this.name = name;
        this.total = total;
        this.death = death;
        this.cured = cured;
        this.active = active;
        this.incAct = incAct;
        this.incDec = incDec;
        this.incRec = incRec;
    }
  
    public String getIncAct() 
    {
        return incAct;
    }
  
    public void setIncAct(String incAct) 
    {
        this.incAct = incAct;
    }
  
    public String getIncDec() 
    {
        return incDec;
    }
  
    public void setIncDec(String incDec) 
    {
        this.incDec = incDec;
    }
  
    public String getIncRec() 
    {
        return incRec;
    }
  
    public void setIncRec(String incRec)
    {
        this.incRec = incRec;
    }
  
    public String getName() 
    {
        return name;
    }
  
    public void setName(String name)
    {
        this.name = name;
    }
  
    public String getTotal() 
    {
        return total;
    }
  
    public void setTotal(String total)
    {
        this.total = total;
    }
  
    public String getDeath() 
    {
        return death;
    }
  
    public void setDeath(String death) 
    {
        this.death = death;
    }
  
    public String getCured() 
    {
        return cured;
    }
  
    public void setCured(String cured)
    {
        this.cured = cured;
    }
  
    public String getActive()
    {
        return active;
    }
  
    public void setActive(String active)
    {
        this.active = active;
    }
}

Step 7: Create an Adapter Class

Now create a new JAVA Adapter Class to put the data that have fetched into a ListView that has created before.

Java

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import java.util.List;
  
// Create A Class Adapter
public class Adapter extends ArrayAdapter<Model> {
    private Context context;
    private List<Model> modelList;
      
    public Adapter(Context context, List<Model> modelList) {
        super(context, R.layout.testing, modelList);
          
        this.context = context;
        this.modelList = modelList;
    }
  
    @NonNull
    @Override
    public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
  
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.testing, null,true);
  
        // In this step we connect the XML with Java File
        TextView state = view.findViewById(R.id.state);
        TextView active = view.findViewById(R.id.active);
        TextView cured = view.findViewById(R.id.cured);
        TextView death = view.findViewById(R.id.death);
        TextView total = view.findViewById(R.id.total);
        TextView incactive = view.findViewById(R.id.incactive);
        TextView inccured = view.findViewById(R.id.inccured);
        TextView incdeath = view.findViewById(R.id.incdeath);
  
        // Adding Data to modellist
        state.setText(modelList.get(position).getName());
        active.setText(modelList.get(position).getActive());
        cured.setText(modelList.get(position).getCured());
        death.setText(modelList.get(position).getDeath());
        total.setText(modelList.get(position).getTotal());
        incactive.setText(modelList.get(position).getIncAct());
        inccured.setText(modelList.get(position).getIncRec());
        incdeath.setText(modelList.get(position).getIncDec());
  
        return view;
    }
}

Step 8: Working with MainActivity.java file

In this file, we are going to use the Volley library. Refer to the comments inside the code to understand the code.

MainActivity.java

import android.os.Bundle;
import android.widget.ListView;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
import com.android.volley.Request;
import com.android.volley.RequestQueue;
import com.android.volley.Response;
import com.android.volley.VolleyError;
import com.android.volley.toolbox.StringRequest;
import com.android.volley.toolbox.Volley;
import org.json.JSONException;
import org.json.JSONObject;
import java.util.ArrayList;
import java.util.List;
  
public class MainActivity extends AppCompatActivity {
  
    ListView listView;
  
    public static List<Model> modelList = new ArrayList<>();
    Model model;
    Adapter adapter;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        listView = findViewById(R.id.listView);
        fetchData();
  
    }
  
    private void fetchData() {
        // The Link Through Which We Can Fetch Data
        String url = "https://api.covid19india.org/state_district_wise.json";
  
        StringRequest request = new StringRequest(Request.Method.GET, url, new Response.Listener<String>() {
            @Override
            public void onResponse(String response) {
  
                try {
                    // Creating JSON Object
                    JSONObject object = new JSONObject(response);
  
                    // From that object we are fetching data
                    JSONObject object1 = object.getJSONObject("Uttar Pradesh");
                    JSONObject object2 = object1.getJSONObject("districtData");
                    JSONObject object3 = object2.getJSONObject("Prayagraj");
                    JSONObject object4 = object3.getJSONObject("delta");
  
  
                    String active = object3.getString("active");
                    String confirmed = object3.getString("confirmed");
                    String deceased = object3.getString("deceased");
                    String recovered = object3.getString("recovered");
  
                    String confInc = object4.getString("confirmed");
                    String confDec = object4.getString("deceased");
                    String confRec = object4.getString("recovered");
  
                    model = new Model("Prayagraj", confirmed, deceased, recovered, active,
                                                                      confInc, confDec, confRec);
                    // placing data into the app using AdapterClass
                    modelList.add(model);
  
                    // Creating JSON Object
                    object3 = object2.getJSONObject("Ballia");
  
                    // From that object we are fetching data
                    active = object3.getString("active");
                    confirmed = object3.getString("confirmed");
                    deceased = object3.getString("deceased");
                    recovered = object3.getString("recovered");
                    object4 = object3.getJSONObject("delta");
                    confInc = object4.getString("confirmed");
                    confDec = object4.getString("deceased");
                    confRec = object4.getString("recovered");
  
                    model = new Model("Ballia", confirmed, deceased, recovered, active,
                                                                   confInc, confDec, confRec);
                    // placing data into the app using AdapterClass
                    modelList.add(model);
  
                    // Creating JSON Object
                    object3 = object2.getJSONObject("Lucknow");
  
                    // From that object we are fetching data
                    active = object3.getString("active");
                    confirmed = object3.getString("confirmed");
                    deceased = object3.getString("deceased");
                    recovered = object3.getString("recovered");
                    object4 = object3.getJSONObject("delta");
  
                    confInc = object4.getString("confirmed");
                    confDec = object4.getString("deceased");
                    confRec = object4.getString("recovered");
  
                    model = new Model("Lucknow", confirmed, deceased, recovered, active,
                                                                    confInc, confDec, confRec);
                    // placing data into the app using AdapterClass
                    modelList.add(model);
  
                    // Creating JSON Object
                    object3 = object2.getJSONObject("Varanasi");
  
                    // From that object we are fetching data
                    active = object3.getString("active");
                    confirmed = object3.getString("confirmed");
                    deceased = object3.getString("deceased");
                    recovered = object3.getString("recovered");
                    object4 = object3.getJSONObject("delta");
  
                    confInc = object4.getString("confirmed");
                    confDec = object4.getString("deceased");
                    confRec = object4.getString("recovered");
  
                    model = new Model("Varanasi", confirmed, deceased, recovered, active,
                                                                    confInc, confDec, confRec);
                    // placing data into the app using AdapterClass
                    modelList.add(model);
  
                    // Creating JSON Object
                    object3 = object2.getJSONObject("Agra");
  
                    // From that object we are fetching data
                    active = object3.getString("active");
                    confirmed = object3.getString("confirmed");
                    deceased = object3.getString("deceased");
                    recovered = object3.getString("recovered");
                    object4 = object3.getJSONObject("delta");
                    confInc = object4.getString("confirmed");
                    confDec = object4.getString("deceased");
                    confRec = object4.getString("recovered");
  
                    model = new Model("Agra", confirmed, deceased, recovered, active,
                                                                 confInc, confDec, confRec);
                    // placing data into the app using AdapterClass
                    modelList.add(model);
  
                    adapter = new Adapter(MainActivity.this, modelList);
                    listView.setAdapter(adapter);
  
                    // In case of error it will run
                }   catch (JSONException e) {
                    e.printStackTrace();
                }
  
            }
        }, new Response.ErrorListener() {
            @Override
            public void onErrorResponse(VolleyError error) {
                // In case of error it will run
                Toast.makeText(MainActivity.this, error.getMessage(), Toast.LENGTH_SHORT).show();
            }
        });
  
        RequestQueue requestQueue = Volley.newRequestQueue(this);
        requestQueue.add(request);
    }
}

Output

final output

My Personal Notes

Related Articles

Table of Contents