Loading Icon for layout screen Xamarin android

Question

I want to find out if there is any good ideas/tutorials on how to add loading gif to an android layout when processing happens and when a page layout navigates to another page layout.

I have tried using this - AndHud

But it seems like it doesn't work well with Portal Class Librarys (PCL) and services inside the PCL. I couldn't find a lot of examples with this component.

I see android uses a progress dialog for this but I was hoping for a Xamarin version in C# or any other clever way of doing this.

Answer 1

Add AndHUD to the Android project and BTProgressHUD to your iOS project.

Then you just need to create an interface in the PCL like this:

public enum MaskType
{
    None = 1,
    Clear,
    Black,
    Gradient
}

public interface IHudService
{
    void Show(string message, MaskType maskType, int progress = -1);
    void Dismiss();
    void ShowToast(string message, bool showToastCentered = true, double timeoutMs = 1000);
    void ShowToast(string message, MaskType maskType, bool showToastCentered = true, double timeoutMs = 1000);
}

and concrete implementations in each of the projects (iOS example):

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using BigTed;
using Foundation;
using MyExample.Services;
using UIKit;

[assembly: Xamarin.Forms.Dependency(typeof(MyExample.iOS.Services.HudService))]

namespace MyExample.iOS.Services
{
    public class HudService : IHudService
    {
        public HudService()
        {
        }

        #region IHudService Members

        public void Show(string message, MaskType maskType, int progress)
        {
            float p = (float)progress / 100f;
            BTProgressHUD.Show(message, p, (ProgressHUD.MaskType)maskType);
        }

        public void Dismiss()
        {
            BTProgressHUD.Dismiss();
        }

        public void ShowToast(string message, bool showToastCentered = true, double timeoutMs = 1000)
        {
            BTProgressHUD.ShowToast(message, showToastCentered, timeoutMs);
        }

        public void ShowToast(string message, MaskType maskType, bool showToastCentered = true, double timeoutMs = 1000)
        {
            BTProgressHUD.ShowToast(message, (ProgressHUD.MaskType)maskType, showToastCentered, timeoutMs);
        }

        #endregion
    }
}

And, on Android:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using AndroidHUD;
using MyExample.Services;
using Xamarin.Forms;
using XHUD;

[assembly: Xamarin.Forms.Dependency(typeof(MyExample.Android.Services.HudService))]

namespace MyExample.Android.Services
{
    public class HudService : IHudService
    {
            //Although, not well documented, for Xamarin.Forms, "Forms.Context" is the current activity

        public HudService()
        {
        }

        #region IHudService Members

        public void Show(string message, MyExample.Services.MaskType maskType, int progress)
        {
            AndHUD.Shared.Show(Forms.Context, message, progress, (AndroidHUD.MaskType)maskType);
        }

        public void Dismiss()
        {
            AndHUD.Shared.Dismiss(Forms.Context);
        }

        public void ShowToast(string message, bool showToastCentered = true, double timeoutMs = 1000)
        {
            AndHUD.Shared.ShowToast(Forms.Context, message, (AndroidHUD.MaskType)MyExample.Services.MaskType.Black, TimeSpan.FromSeconds(timeoutMs / 1000), showToastCentered);
        }

        public void ShowToast(string message, MyExample.Services.MaskType maskType, bool showToastCentered = true, double timeoutMs = 1000)
        {
            AndHUD.Shared.ShowToast(Forms.Context, message, (AndroidHUD.MaskType)maskType, TimeSpan.FromSeconds(timeoutMs / 1000), showToastCentered);
        }

        #endregion
    }

}

This is basically just a copy of the XHUD.HUD facade which was added to both libraries to smooth the API differences.

Then, register your service at the entry point for the platform-specific projects (in this case, AppDelegate.cs) and call it from the PCL. In my case, I am using Xamarin.Forms.Labs so your method of registering it may vary.

public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
    SetupIocContainer();
    Forms.Init();
    FormsMaps.Init();
    window = new UIWindow(UIScreen.MainScreen.Bounds);
    window.RootViewController = App.GetMainPage().CreateViewController();
    window.MakeKeyAndVisible();
    return true;
}

private void SetupIocContainer()
{
    var resolverContainer = new SimpleContainer();
    var app = new XFormsAppiOS();
    app.Init(this);

    resolverContainer.Register<IDevice>(t => AppleDevice.CurrentDevice)
        .Register<IDisplay>(t => t.Resolve<IDevice>().Display)

        //EDIT: this does not seem necessary after all and actually
        //causes it to crash on Android (but works on iOS) 
        //not sure why
        //.Register<IHudService>(t => t.Resolve<IHudService>())

        .Register<IXFormsApp>(app)
        .Register<IDependencyContainer>(t => resolverContainer);

    Resolver.SetResolver(resolverContainer.GetResolver());
}

In the PCL, you can instantiate it and do something like this:

private IHudService hudService;
public IHudService HudService
{
    get
    {
        if(hudService == null)
        {
            hudService = DependencyService.Get<IHudService>();
        }
        return this.hudService;
    }
}


private async Task Setup()
{
    this.HudService.Show("Long operation occurring", MaskType.Black);

    await Operation();

    this.HudService.Dismiss();
}