How to create a COVID-19 Tracker Android App

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.



  1. 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.
  2. 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

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      <?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>

      chevron_right

      
      

    • 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)

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

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

      chevron_right

      
      

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

      AndroidManifests.xml

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

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

      chevron_right

      
      

  3. Step3: Designing the UI
    • Below is the code for the xml file.

      actibity_main.xml

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      <?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>

      chevron_right

      
      

    • After using this code in .xml file, the UI will be like:

  4. 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);

    • Creat 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.
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

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

      chevron_right

      
      

    • 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.

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

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

      chevron_right

      
      

    • 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.

    Below is the complete code for MainActivity.java file:

    MainActivity.java

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    package com.example.covid_19tracker;
      
    import androidx.appcompat.app.AppCompatActivity;
      
    import android.os.Bundle;
    import android.widget.TextView;
    import android.widget.Toast;
      
    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;
      
    public class MainActivity
        extends AppCompatActivity {
      
        // Create the object of TextView
        TextView tvCases, tvRecovered,
            tvCritical, tvActive,
            tvTodayCases, tvTotalDeaths,
            tvTodayDeaths,
            tvAffectedCountries;
      
        @Override
        protected void onCreate(Bundle savedInstanceState)
        {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
      
            // 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);
      
            // Creating a method fetchdata()
            fetchdata();
        }
      
        private void fetchdata()
        {
      
            // 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<String>() {
                        @Override
                        public void onResponse(String response)
                        {
      
                            // 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();
                            }
                        }
                    },
                    new Response.ErrorListener() {
                        @Override
                        public void onErrorResponse(VolleyError error)
                        {
                            Toast.makeText(
                                     MainActivity.this,
                                     error.getMessage(),
                                     Toast.LENGTH_SHORT)
                                .show();
                        }
                    });
      
            RequestQueue requestQueue
                = Volley.newRequestQueue(this);
            requestQueue.add(request);
        }
    }

    chevron_right

    
    

Output:

java-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : AmiyaRanjanRout