Subscribe Us

How to develop Xamarin Forms Covid-19 Tracker Visual Studio 2019 - By Manoj Tyagi

Introduction:
Covid-19 Xamarin Forms Tracker


In this article we will develop Xamarin Forms Real Time Covid 19 Tracker Appication for Android and IPhone.

Description:

Step1#

Create Xamarin project with the name Covid19Tracker

How to develop Xamarin Forms Covid 19 Tracker



Covid 19 Tracker Xamarin Forms



Create Blank Project

 Step2#

 Create a new folder with the name Models

Add new class CovidModel

using System;
using System.Collections.Generic;
using System.Text;

namespace Covid19Tracker.Models
{
    public class CasesTimeSery
    {
        public string dailyconfirmed { get; set; }
        public string dailydeceased { get; set; }
        public string dailyrecovered { get; set; }
        public string date { get; set; }
        public string totalconfirmed { get; set; }
        public string totaldeceased { get; set; }
        public string totalrecovered { get; set; }
    }

    public class Statewise
    {
        public string active { get; set; }
        public string confirmed { get; set; }
        public string deaths { get; set; }
        public string deltaconfirmed { get; set; }
        public string deltadeaths { get; set; }
        public string deltarecovered { get; set; }
        public string lastupdatedtime { get; set; }
        public string recovered { get; set; }
        public string state { get; set; }
        public string statecode { get; set; }
        public string statenotes { get; set; }
    }

    public class Tested
    {
        public string individualstestedperconfirmedcase { get; set; }
        public string positivecasesfromsamplesreported { get; set; }
        public string samplereportedtoday { get; set; }
        public string source { get; set; }
        public string testpositivityrate { get; set; }
        public string testsconductedbyprivatelabs { get; set; }
        public string testsperconfirmedcase { get; set; }
        public string testspermillion { get; set; }
        public string totalindividualstested { get; set; }
        public string totalpositivecases { get; set; }
        public string totalsamplestested { get; set; }
        public string updatetimestamp { get; set; }
    }

    public class Example
    {
        public IList<CasesTimeSery> cases_time_series { get; set; }
        public IList<Statewise> statewise { get; set; }
        public IList<Tested> tested { get; set; }
    }
}

Step3#

Create New folder Services
Add new class using Covid19Tracker.Models;

using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Net.Http;
using System.Text;
using System.Threading.Tasks;

namespace Covid19Tracker.Services
{
    public static class ApiService
    {
        static string apiUl = "";

        public static async Task<Example> GetData()
        {
            var httpClient = new HttpClient();          
            var response = await httpClient.GetStringAsync($"{apiUl}");
            return JsonConvert.DeserializeObject<Example>(response);

        }
    }
}

Step4#

Create new folder with the name Pages
Create new content page HomePage

HomePage.Xaml

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="Covid19Tracker.Pages.HomePage"
             xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
             android:TabbedPage.ToolbarPlacement="Bottom"
             xmlns:pages="clr-namespace:Covid19Tracker.Pages"          
             BarBackgroundColor="#001970"
             SelectedTabColor="White"
             UnselectedTabColor="White" NavigationPage.HasNavigationBar="False">
    <pages:StateWisePage Title="State" IconImageSource="explore.png" />
    <pages:CaseTimePage Title="Daily" IconImageSource="explore.png" />
    <pages:TestPage Title="Test" IconImageSource="explore.png" />
</TabbedPage>

HomePage.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace Covid19Tracker.Pages
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class HomePage : TabbedPage
    {
        public HomePage()
        {
            InitializeComponent();
        }
    }
}

Step5#

Go to App.Xaml and paste below code
<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="Covid19Tracker.App">
    <Application.Resources>

    </Application.Resources>
</Application>

Go to App.Xaml.cs

using Covid19Tracker.Pages;
using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace Covid19Tracker
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();

            //MainPage = new MainPage();

            MainPage = new NavigationPage(new HomePage());
        }

        protected override void OnStart()
        {
        }

        protected override void OnSleep()
        {
        }

        protected override void OnResume()
        {
        }
    }
}

Step6#
Create a page in pages folder StateWisePage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="Covid19Tracker.Pages.StateWisePage">
    <ContentPage.Content>
        <AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
            <StackLayout AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
                <!--< Your control design goes here >-->
                <ListView  HasUnevenRows="True" BackgroundColor="White"  x:Name="covidListView" Grid.Row="1">
                    <ListView.Header>
                        <ContentView Padding="0,5" BackgroundColor="White">
                            <Label FontSize="Large" TextColor="BlueViolet"
                   Text="Covid 19 Tracker (State Wise Report)" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
                        </ContentView>
                    </ListView.Header>
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition />
                                        <ColumnDefinition  />
                                    </Grid.ColumnDefinitions>
                                    <StackLayout VerticalOptions="FillAndExpand" Padding="5" Grid.Column="0">
                                        <Label FontSize="17"  Text="{Binding state}" />
                                        <Label FontSize="12" Text="{Binding confirmed, StringFormat='Confirmed: {0}'}" />
                                        <Label FontSize="12" Text="{Binding active, StringFormat='Active: {0}'}" />
                                    </StackLayout>
                                    <StackLayout VerticalOptions="End"  Padding="5"  Grid.Column="1">
                                        <Label  FontSize="12"  Text="{Binding recovered, StringFormat='Recovered: {0}'}" />
                                        <Label  FontSize="12"  Text="{Binding deaths, StringFormat='Death: {0}'}" />
                                    </StackLayout>
                                </Grid>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </StackLayout>
            <StackLayout IsVisible="{Binding IsBusy}" Padding="12"
             AbsoluteLayout.LayoutFlags="PositionProportional"
             AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1">
                <ActivityIndicator x:Name="activity" 
                       IsRunning="False" 
                       IsEnabled="False" 
                       IsVisible="False" 
                       Color="Blue" 
                       HorizontalOptions="Center" VerticalOptions="Center"
                       BackgroundColor="Transparent"/>
            </StackLayout>
        </AbsoluteLayout>
    </ContentPage.Content>
</ContentPage>

StateWise.xaml.cs

using Covid19Tracker.Services;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace Covid19Tracker.Pages
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class StateWisePage : ContentPage
    {
        public StateWisePage()
        {
            InitializeComponent();
        }

        protected async override void OnAppearing()
        {

            activity.IsEnabled = true;
            activity.IsRunning = true;
            activity.IsVisible = true;

            base.OnAppearing();          

            var response = await ApiService.GetData();

            covidListView.ItemsSource = response.statewise;

            activity.IsEnabled = false;
            activity.IsRunning = false;
            activity.IsVisible = false;
        }
    }
}

Step7#
Now run the application an you will see the result.

State wise report







 Daily Test Report



Summary:

In this article we learn how to develop Xamarin Forms Real Time Covid 19 Tracker Appication for Android and IPhone

Post a Comment

0 Comments