Skip to content
Related Articles

Related Articles

Improve Article

How to create a COVID-19 Tracker Android App

  • Difficulty Level : Hard
  • Last Updated : 15 Jul, 2021

Pre-requisites:
 

 

The world is facing one of the worst epidemics, the outbreak of COVID-19, you all are aware of that. So during this lockdown time let’s create a COVID-19 Tracker Android App using REST API which will track the Global Stats only.
 



 

Step1: Opening a new project 

  • Open a new project just click of File option at topmost corner in left.
  • Then click on new and open a new project with whatever name you want.
  • Now we gonna work on Empty Activity with language as Java. Leave all other options as untouched.
  • You can change the name of project as per your choice.
  • By default, there will be two files activity_main.xml and MainActivity.java.

Step 2: Before going to the coding section first you have to do some pre-task.

  • Go to app->res->values->colors.xml section and set the colors for your app.

    colors.xml




    <?xml version="1.0" encoding="utf-8"?>
    <resources>
        <color name="colorPrimary">#42C14B</color>
        <color name="colorPrimaryDark">#3BC545</color>
        <color name="colorAccent">#05af9b</color>
      
        <color name="color_one">#fb7268</color>
        <color name="color_white">#ededf2</color>
    </resources>
  • Go to Gradle Scripts->build.gradle (Module: app) section and import following dependencies and click the “sync Now” on the above pop up.

    build.gradle (:app)




    // Volley library
      implementation 'com.android.volley:volley:1.1.1'

  • Go to app->manifests->AndroidManifests.xml section and allow “Internet Permission“.
    &

    AndroidManifests.xml




    <!--Allow Internet Permission-->
       <uses-permission android:name="android.permission.INTERNET" />

Step3: Designing the UI

  • Below is the code for the xml file.

    actibity_main.xml






    <?xml version="1.0" encoding="utf-8"?>
    <ScrollView
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/color_white"
        android:orientation="vertical"
        tools:context=".MainActivity">
      
      
        <!--Linear Layout to display all the details-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="20dp"
            android:orientation="vertical">
      
            <!--Text view to display Global stats-->
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Global Stats"
                android:textColor="#050505"
                android:textAllCaps="true"
                android:textAlignment="center"
                android:textSize="35sp"
                android:textStyle="bold"/>
      
                <!--Text view to display Total Cases-->
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:fontFamily="sans-serif-light"
                    android:layout_marginTop="20dp"
                    android:text="Total Cases"
                    android:textAlignment="center"
                    android:textStyle="bold"
                    android:textSize="30sp"/>
      
                <!--Text view to display the updated number when data
                 will fetch from the API. For now default set to 0 -->
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="0"
                    android:id="@+id/tvCases"
                    android:textAlignment="center"
                    android:textSize="25sp"
                    android:textColor="@color/color_one"
                    android:textStyle="bold"
                    android:fontFamily="sans-serif-light" />
      
            <!--Text view to display Recovered Cases-->
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fontFamily="sans-serif-light"
                android:text="Recovered"
                android:textAlignment="center"
                android:textStyle="bold"
                android:textSize="30sp"/>
      
            <!--Text view to display the updated number when data
             will fetch from the API. For now default set to 0 -->
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="0"
                android:id="@+id/tvRecovered"
                android:textAlignment="center"
                android:textSize="25sp"
                android:textColor="@color/color_one"
                android:textStyle="bold"
                android:fontFamily="sans-serif-light" />
      
            <!--Text view to display Critical Cases-->
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fontFamily="sans-serif-light"
                android:text="Critical"
                android:textAlignment="center"
                android:textStyle="bold"
                android:textSize="30sp"/>
      
            <!--Text view to display the updated number when data
             will fetch from the API. For now default set to 0 -->
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="0"
                android:id="@+id/tvCritical"
                android:textAlignment="center"
                android:textSize="25sp"
                android:textColor="@color/color_one"
                android:textStyle="bold"
                android:fontFamily="sans-serif-light" />
      
            <!--Text view to display Active Cases-->
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fontFamily="sans-serif-light"
                android:text="Active"
                android:textAlignment="center"
                android:textStyle="bold"
                android:textSize="30sp"/>
      
            <!--Text view to display the updated number when data
             will fetch from the API. For now default set to 0 -->
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="0"
                android:id="@+id/tvActive"
                android:textAlignment="center"
                android:textSize="25sp"
                android:textColor="@color/color_one"
                android:textStyle="bold"
                android:fontFamily="sans-serif-light" />
      
            <!--Text view to display Today Cases-->
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fontFamily="sans-serif-light"
                android:text="Today Cases"
                android:textAlignment="center"
                android:textStyle="bold"
                android:textSize="30sp"/>
      
            <!--Text view to display the updated number when data
             will fetch from the API. For now default set to 0 -->
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="0"
                android:id="@+id/tvTodayCases"
                android:textAlignment="center"
                android:textSize="25sp"
                android:textColor="@color/color_one"
                android:textStyle="bold"
                android:fontFamily="sans-serif-light" />
      
            <!--Text view to display Total Deaths-->
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fontFamily="sans-serif-light"
                android:text="Total Deaths"
                android:textAlignment="center"
                android:textStyle="bold"
                android:textSize="30sp"/>
      
            <!--Text view to display the updated number when data
             will fetch from the API. For now default set to 0 -->
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="0"
                android:id="@+id/tvTotalDeaths"
                android:textAlignment="center"
                android:textSize="25sp"
                android:textColor="@color/color_one"
                android:textStyle="bold"
                android:fontFamily="sans-serif-light" />
      
            <!--Text view to display Today Deaths-->
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fontFamily="sans-serif-light"
                android:text="Today Deaths"
                android:textAlignment="center"
                android:textStyle="bold"
                android:textSize="30sp"/>
      
            <!--Text view to display the updated number when data
             will fetch from the API. For now default set to 0 -->
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="0"
                android:id="@+id/tvTodayDeaths"
                android:textAlignment="center"
                android:textSize="25sp"
                android:textColor="@color/color_one"
                android:textStyle="bold"
                android:fontFamily="sans-serif-light" />
      
            <!--Text view to display Affected Countries-->
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fontFamily="sans-serif-light"
                android:text="Affected Countries"
                android:textAlignment="center"
                android:textStyle="bold"
                android:textSize="30sp"/>
      
            <!--Text view to display the updated number when data
             will fetch from the API. For now default set to 0 -->
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="0"
                android:id="@+id/tvAffectedCountries"
                android:textAlignment="center"
                android:textSize="25sp"
                android:textColor="@color/color_one"
                android:textStyle="bold"
                android:fontFamily="sans-serif-light" />
      
            </LinearLayout>
      
    </ScrollView>
  • After using this code in .xml file, the UI will be like:

Step4: Working with Java file

  • Open the MainActivity.java file there within the class, first of all create the object of TextView class
     

    // Create the object of TextView Class 
    TextView tvCases, tvRecovered, tvCritical, tvActive, tvTodayCases, tvTotalDeaths, tvTodayDeaths, tvAffectedCountries; 
     

  • Secondly inside onCreate() method, we have to link those objects with their respective id’s that we have given in .XML file.

    link those objects with their respective id’s that we have given in .XML file 
    tvCases = findViewById(R.id.tvCases); 
    tvRecovered = findViewById(R.id.tvRecovered); 
    tvCritical = findViewById(R.id.tvCritical); 
    tvActive = findViewById(R.id.tvActive); 
    tvTodayCases = findViewById(R.id.tvTodayCases); 
    tvTotalDeaths = findViewById(R.id.tvTotalDeaths); 
    tvTodayDeaths = findViewById(R.id.tvTodayDeaths); 
    tvAffectedCountries = findViewById(R.id.tvAffectedCountries); 
     

  • Create a private void fetchdata() method outside onCreate() method and define it.
  • Inside fetchdata() method the most important task is going to happen that is how we fetch the data from a third party API and implement it in our app. My request is please read thoroughly the two articles Volley Library in Android and REST API (Introduction) to understand the following concepts.
  • Create a String request using Volley Library and assign the “url” with “https://corona.lmao.ninja/v2/all” link.

    Java




    // Create a String request using Volley Library
      
    String url = "https:// corona.lmao.ninja/v2/all";
      
    StringRequest request
        = new StringRequest(
            Request.Method.GET,
            url,
            new Response.Listener() {
                @Override
                public void onResponse(
                    String response)
                {
                }
            },
            new Response.ErrorListener() {
                @Override
                public void onErrorResponse(
                    VolleyError error)
                {
                }
            });
      
    RequestQueue requestQueue
        = Volley.newRequestQueue(this);
    requestQueue.add(request);

  • Please refer this website to take a look at the requested data are in JSON format.
     

  • So the next thing you have to do is, inside the onResponse() method create the object of “JSONObject” class then set the data in text view which are available in JSON format with the help of “jsonobject”. Make sure that you have to do these things inside a “try” block. Remember that the parameter inside the getString() must match with the name given in JSON format.

    Java




    // Handle the JSON object and handle it inside try and catch
      
    try {
        // Creating object of JSONObject
        JSONObject jsonObject
            = new JSONObject(
                response.toString());
      
        // Set the data in text view
        // which are available in JSON format
        // Note that the parameter
        // inside the getString() must match
        // with the name given in JSON format
        tvCases.setText(
            jsonObject.getString("cases"));
        tvRecovered.setText(
            jsonObject.getString("recovered"));
        tvCritical.setText(
            jsonObject.getString("critical"));
        tvActive.setText(
            jsonObject.getString("active"));
        tvTodayCases.setText(
            jsonObject.getString("todayCases"));
        tvTotalDeaths.setText(
            jsonObject.getString("deaths"));
        tvTodayDeaths.setText(
            jsonObject.getString("todayDeaths"));
        tvAffectedCountries.setText(
            jsonObject.getString("affectedCountries"));
    }
    catch (JSONException e) {
        e.printStackTrace();
    }

  • And inside onErrorResponse() method you have to show a toast message if any error occured.
    Toast.makeText(MainActivity.this, 
                   error.getMessage(), 
                   Toast.LENGTH_SHORT)
         .show();
  • At last invoke the fetchdata() method inside onCreate() method. 

Output:
 

 

Want a more fast-paced & competitive environment to learn the fundamentals of Android?
Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!



My Personal Notes arrow_drop_up
Recommended Articles
Page :