Show a activity indicator while View content is loading in Xamarin Forms

Question

Is there a way to show an activity indicator while Page content view is rendering or loading?, i ask this because when i've a lot of controls in a page, and i want to navigate to that page, it takes few second to go to the page. So i'd like to kwow if there is a way to navigate the page instant and when the page appear show activity indicator loading the content, and when the content get loaded, show it.

Answer 1

Is there a way to show an activity indicator while Page content view is rendering or loading?

1. we need to create service name ILodingPageService interface in PCL.

   public interface ILodingPageService
    {
   void InitLoadingPage(ContentPage loadingIndicatorPage = null);
   void ShowLoadingPage();
   void HideLoadingPage();
   
    }
   

2.creating Transparent Page to display Activity indicator.

<ContentPage.Content>
    <StackLayout
        Padding="30"
        BackgroundColor="Black"
        HorizontalOptions="Center"
        VerticalOptions="Center">

        <ActivityIndicator IsRunning="True" Color="White" />

        <Label
            FontAttributes="Bold"
            Text="Loading..."
            TextColor="White" />

    </StackLayout>
</ContentPage.Content>

3.implement ILodingPageService interface in Android platform.

[assembly: Xamarin.Forms.Dependency(typeof(LodingPageServiceDroid))]

namespace IndicatorApp.Droid {
public class LodingPageServiceDroid : ILodingPageService {

    private Android.Views.View _nativeView;
    private Dialog _dialog;
    private bool _isInitialized;
    public void HideLoadingPage()
    {
        // Hide the page

        _dialog.Hide();
    }

    public void InitLoadingPage(ContentPage loadingIndicatorPage = null)
    {
        // check if the page parameter is available
        if (loadingIndicatorPage != null)
        {
            // build the loading page with native base
            loadingIndicatorPage.Parent = Xamarin.Forms.Application.Current.MainPage;
            loadingIndicatorPage.Layout(new Rectangle(0, 0,
            Xamarin.Forms.Application.Current.MainPage.Width,
            Xamarin.Forms.Application.Current.MainPage.Height));
            var renderer = loadingIndicatorPage.GetOrCreateRenderer();
            _nativeView = renderer.View;
            _dialog = new Dialog(CrossCurrentActivity.Current.Activity);

            _dialog.RequestWindowFeature((int)WindowFeatures.NoTitle);

            _dialog.SetCancelable(false);

            _dialog.SetContentView(_nativeView);

            Window window = _dialog.Window;

            window.SetLayout(ViewGroup.LayoutParams.MatchParent, ViewGroup.LayoutParams.MatchParent);

            window.ClearFlags(WindowManagerFlags.DimBehind);

            window.SetBackgroundDrawable(new ColorDrawable(Android.Graphics.Color.Transparent));
            _isInitialized = true;
        }
    }

    public void ShowLoadingPage()
    {
        // check if the user has set the page or not
        if (!_isInitialized)
            InitLoadingPage(new LoadingIndicatorPage1()); // set the default page

        // showing the native loading page

        _dialog.Show();
    }
}
internal static class PlatformExtension
{
    public static IVisualElementRenderer GetOrCreateRenderer(this VisualElement bindable)
    {
        var renderer = XFPlatform.GetRenderer(bindable);
        if (renderer == null)
        {
            renderer = XFPlatform.CreateRendererWithContext(bindable, CrossCurrentActivity.Current.Activity);

            XFPlatform.SetRenderer(bindable, renderer);

        }

        return renderer;

    }

}

}

I create new simple at githun, you can download it.

https://github.com/CherryBu/activityindicator

If my reply solve your issue, please remember to mark answer for my reply, thanks.

The screenshot is here:

Answer 2

1. In your view model, add a boolean property to indicate if the page is loading.
2. Implement INotifyPropertyChanged in the model and fire PropertyChanged event when you change the property (at setter code).
3. Bind the "IsRunning" property of your activity indicator to the property you added in the first step.

now, at the time your content starts loading set it to true and when you finish loading set it to false.