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 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 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); } } |