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.
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"?> 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 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:
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 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:
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 Adapterpublic 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 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); }} |

