Awesome

Xamarin Animated Circle Loading View

C# Port of the Android Java library AnimatedCircleLoadingView by jlmd

A determinate/indeterminate loading view animation. Based on android-watch-loading-animation by Nils Banner

Namespace: Xama.JTPorts.AnimatedCircleLoadingView

!gif

Outstanding Tasks:

Ensure Interfaces are implemented as per OOP standards.
Apply standard capitalizations across the library as per .Net guidelines.
Fix xml attributes
Replace android 'listeners' with events.
Replace colour implementations to match Xamarin.Android property requirements.
Ensure that non-optional parameters are all auto-populated if not supplied for the OO implementation.
Check for missing functionality in ported library and task out implementation.
Create NuGet package.
Fill basic usage information.

How to Install

NuGetIcon

Simply add the NuGet package directly to your Xamarin.Android solution, or use one of the following:

Package Manager:

Install-Package Xama.JTPorts.AnimatedCircleLoadingView -Version 1.0.1

.NET CLI:

dotnet add package Xama.JTPorts.AnimatedCircleLoadingView --version 1.0.1

Basic Usage:

Create control in your xml layout:

<Xama.JTPorts.AnimatedCircleLoadingView.AnimatedCircleLoadingView
  android:id="@+id/circle_loading_view_indeterminate"
  android:layout_width="250dp"
  android:layout_height="250dp"
  android:background="@color/white" />

Indeterminate Progress

Get control and assign the colors, this is important as currently the control can't infer these if not provided

AnimatedCircleLoadingView animatedCircleLoadingView = FindViewById<AnimatedCircleLoadingView>(Resource.Id.circle_loading_view_indeterminate);

animatedCircleLoadingView.MainColor = Resource.Color.colorPrimaryDark;
animatedCircleLoadingView.SecondaryColor = Resource.Color.risualOrange;
animatedCircleLoadingView.TextColor = Resource.Color.colorAccent;
animatedCircleLoadingView.CheckMarkTintColor = Color.White;

You can define a center body of text to sit inside of the loading view if needed

animatedCircleLoadingView.TitleText = "Loading";

Then simply start the animation

animatedCircleLoadingView.StartIndeterminate();

Determinate Progress

Get control and assign the colors, this is important as currently the control can't infer these if not provided

AnimatedCircleLoadingView animatedCircleLoadingView = FindViewById<AnimatedCircleLoadingView>(Resource.Id.circle_loading_view_indeterminate);

animatedCircleLoadingView.MainColor = Resource.Color.colorPrimaryDark;
animatedCircleLoadingView.SecondaryColor = Resource.Color.risualOrange;
animatedCircleLoadingView.TextColor = Resource.Color.colorAccent;
animatedCircleLoadingView.CheckMarkTintColor = Color.White;

Start the animation

animatedCircleLoadingView.StartDeterminate();

Then simply set the percentage using this method (takes an integer value)

animatedCircleLoadingView.SetPercentage(50);

Currently when the control hits 100 percent it automatically adds the FinishedOK view, but you can also fire this manually.

animatedCircleLoadingView.StopOk();

or the failed view

animatedCircleLoadingView.StopFailure();

Support 💎

If you want to support the work that I do and you find any of these libraries useful? Consider supporting it by joining stargazers for this repository. :telescope: :stars:

<br/>

or alternatively if you want to you can also buy me a coffee.

<a href="https://www.buymeacoffee.com/JTT" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-red.png" alt="Buy Me A Coffee" tyle="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>

You know, only if you want to.