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