How to show ActivityIndicator in the middle of the screen?

vishgarg picture vishgarg · Mar 23, 2016 · Viewed 10.1k times · Source

I've created an activity indicator and added it to StackLayout and when I make it running, in the emulator it shows in the top right corner Android 4.4 and in iOS no show and in Android 6 phone, it don't show.

var indicator = new ActivityIndicator()
            {
                Color = Color.Blue,
            };
            indicator.SetBinding(ActivityIndicator.IsVisibleProperty, "IsBusy", BindingMode.OneWay);
            indicator.SetBinding(ActivityIndicator.IsRunningProperty, "IsBusy", BindingMode.OneWay);
AbsoluteLayout.SetLayoutFlags(indicator, AbsoluteLayoutFlags.PositionProportional);
            AbsoluteLayout.SetLayoutBounds(indicator, new Rectangle(0.5, 0.5, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));
mainLayout.Children.Add(indicator);

I want to show the activity indicator to the center of the screen because the operation takes time to complete.

Answer

Keith Rome picture Keith Rome · Mar 23, 2016

The indicator that you are seeing in the status bar is the default behavior of the IsBusy property of the base page class. The reason your code isn't working is because you are attempting to bind visibility of your ActivityIndicator to that property - but you aren't specifying a binding source. If you look in your debugger's application output log then you will probably see messages along the lines of "Property 'IsBusy' not found on type 'Object'".

To fix it, you simply need to point the Binding Context of each binding to the form. Give this a try:

public partial class App : Application
{
    public App ()
    {
        var mainLayout = new AbsoluteLayout ();
        MainPage = new ContentPage {
            Content = mainLayout
        };

        var containerPage = Application.Current.MainPage;

        var indicator = new ActivityIndicator() {
            Color = Color.Blue,
        };
        indicator.SetBinding(VisualElement.IsVisibleProperty, new Binding("IsBusy", BindingMode.OneWay, source: containerPage));
        indicator.SetBinding(ActivityIndicator.IsRunningProperty, new Binding("IsBusy", BindingMode.OneWay, source: containerPage));
        AbsoluteLayout.SetLayoutFlags(indicator, AbsoluteLayoutFlags.PositionProportional);
        AbsoluteLayout.SetLayoutBounds(indicator, new Rectangle(0.5, 0.5, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));
        mainLayout.Children.Add(indicator);

        containerPage.IsBusy = true;
    }
}