Activity Indicator In Xamarin.Forms Application For Android And UWP

A visual control used to indicate that something is ongoing.

Before reading this article, please go through the following articles.

How To Create And Use XAML Content Page In Xamarin Forms Application For Android And Universal Windows Platform

Reading this article, you will learn how to use an Activity Indicator in Xamarin Forms application for Android and Universal Windows Platform with XAML and Visual C# in cross platform application development. Also, learn how to change the Activity Indicator colour while clicking the button.

The following important tools are required for developing UWP,

Windows 10 (Recommended)
Visual Studio 2015 Community Edition (It is a free software available online)
Using Visual Studio 2015 Installer, Enable the Xamarin and C#/.NETwhile installing /modifying Visual Studio 2015.

Now, we can discuss step by step app development.

Step 1

Open Visual Studio 2015. Go to Start -> New Project-> Select Cross-Platform (under Visual C#-> Blank App (Xamarin.Forms Portable)-> Give a suitable name for your app (XamFormActInd) ->OK.

XAML

Step 2

Now, creating project “XamFormActInd_Droid” … and Choose the target and minimum platform versions for your Universal Windows Project.

XAML

Step 3

creating project “XamFormActInd_UWP” ….

XAML

Step 4

After that, Visual Studio creates 6 projects and displays Getting Started.Xamarin Page. Now, we have to update the Xamarin.forms reference for portable project and XamFormActInd_Droid project.

(Please refer How To Create And Use XAML Content Page In Xamarin Forms Application For Android And Universal Windows Platform)

Step 5

Add an XAML page for Activity Indicator Demo. Right click XamFormActInd(Portable) project, select ADD-> NewItem, and Select ->CrossPlatform-> FormXamlPage-> Give the relevant name.

XAML

Step 6

For Activity Indicator demo, add ActivityIndicator Tag, 1 Button, and 1 Label in ActIndDemo.xaml.

<StackLayout>
<Label x:Name="lblTitle" Text="Activity Indicator Xamarin Forms - Demo" Font="Large" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" />
<ActivityIndicator x:Name="ActInd" Color="Red" IsRunning="True" />
<Button x:Name="btnChgcolr" Text=" Click to Change the Color in Activity Indicator!..." HorizontalOptions="Center" VerticalOptions="CenterAndExpand" Clicked="OnButtonClicked" />
</StackLayout>

Step 7

In ActIndDemo.xaml.cs, add the following code for Activity Indicator colour change.

void OnButtonClicked(object sender, EventArgs args) {
ActInd.Color = Color.Green;
}

Step 8

Open (double click) the file App.cs in the Solution Explorer-> XamFormActInd(portable) and set the Root Page.

XAML

Step 9

We will test Android and UWP. So, we can set the Multiple Startup Projects as XamFormActInd.Droid and XamFormActInd.UWP (Universal Windows).

XAML

Step 10

Change the Configuration Manager settings. Go to Build -> Configuration Manager. Uncheck all the "Build" and "Deploy" options except for Droid and UWP.

XAML

Step 11

Deploy your app in Local Machine. The output of the XamFormActInd app is,

XAML

After clicking the "Click to Change the Color in Activity Indicator!"... Button,

XAML

Summary

Now, you have successfully created and tested Activity Indicator in Xamarin.Forms application, using Visual C# and Xamarin.