Xamarin Forms Loading Screen between long actions Activity Indicator

Question

I am using an activity indicator but it should only display on button click that bit is ok but what is happening is its convering my entire form and not displaying a progress at all.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:telerikPrimitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.XamarinForms.Primitives"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="DeliveryGo.Views.LoginPage"
              BackgroundImage="deliverybanner.jpg"
             >

    <ContentPage.Content>
        <StackLayout Orientation="Vertical" Padding="30" Spacing="40">
            <BoxView HeightRequest="10"/>
            <Label Text="Delivery Go" TextColor="WhiteSmoke" FontSize="Large" FontAttributes="Bold"></Label>
            <Image HorizontalOptions="Center" WidthRequest="300" Source="maco.jpg"/>
            <Frame BackgroundColor="#BF043055" HasShadow="False">


                <StackLayout Orientation="Vertical" Spacing="10">
                    <Label x:Name="lblError" TextColor="Red"></Label>
                    <Entry x:Name="txtUserName" Text="{Binding Email}" Placeholder="Email"   
                           PlaceholderColor="White" HeightRequest="40"   
                           Keyboard="Email"  
                           TextColor="White"/>
                    <Entry x:Name="txtPassword" Text="{Binding Password}" Placeholder="Password"   
                           PlaceholderColor="White" HeightRequest="40"   
                           IsPassword="True"  
                           TextColor="White"/>
                </StackLayout>
            </Frame>
            <Button Command="{Binding SubmitCommand}" Clicked="BtnLogin_Clicked" Text="Login" TextColor="White"  
                    FontAttributes="Bold" FontSize="Large" HorizontalOptions="FillAndExpand"  
                    BackgroundColor="#088da5" />
        </StackLayout>


    </ContentPage.Content>
    <StackLayout HeightRequest="40" VerticalOptions="End">
        <ActivityIndicator IsRunning="{Binding Busy}"
                         IsVisible="{Binding Busy}"
                          HeightRequest="40"
                          VerticalOptions="CenterAndExpand"
                          HorizontalOptions="CenterAndExpand">
            <ActivityIndicator.WidthRequest>
                <OnPlatform x:TypeArguments="x:Double" iOS="100" Android="100" WinPhone="400" />
            </ActivityIndicator.WidthRequest>
            <ActivityIndicator.Color>
                <OnPlatform x:TypeArguments="Color"
                      iOS="#2499CE" WinPhone="#2499CE" />
            </ActivityIndicator.Color>
        </ActivityIndicator>
    </StackLayout>
</ContentPage>

As you see I am using the IsBusy at the page level to set it however the issue is that it is covering my entire screen and not showing any animation what so ever our you to provide your own graphic or should it not display one for you?.

The second image is showing the form as it should look like without the activity indicator code.

So what is wrong with my code?

Answer 1

Cause:

Do not put your Activity Indicator outside the ContentPage.Content, it will overlap your views. That's the cause you can't see anything.

Solution:

Put the Activity Indicator inside ContentPage.Content, you can put it everyWhere you want, for example:

<ContentPage.Content>
    <StackLayout Orientation="Vertical" Padding="30" Spacing="40">
        <BoxView HeightRequest="10"/>
        <Label Text="Delivery Go" TextColor="WhiteSmoke" FontSize="Large" FontAttributes="Bold"></Label>
        <Image HorizontalOptions="Center" WidthRequest="300" Source="maco.jpg"/>
        <Frame BackgroundColor="#BF043055" HasShadow="False">


            <StackLayout Orientation="Vertical" Spacing="10">
                <Label x:Name="lblError" TextColor="Red"></Label>
                <Entry x:Name="txtUserName" Text="Binding Email" Placeholder="Email"   
                   PlaceholderColor="White" HeightRequest="40"   
                   Keyboard="Email"  
                   TextColor="White"/>
                <Entry x:Name="txtPassword" Text="Binding Password" Placeholder="Password"   
                   PlaceholderColor="White" HeightRequest="40"   
                   IsPassword="True"  
                   TextColor="White"/>
            </StackLayout>
        </Frame>
        <Button  Text="Login" TextColor="White"  
            FontAttributes="Bold" FontSize="Large" HorizontalOptions="FillAndExpand"  
            BackgroundColor="#088da5" />

        <StackLayout HeightRequest="40" VerticalOptions="End">
            <ActivityIndicator IsRunning="True"
                 IsVisible="True"
                  HeightRequest="40"
                  VerticalOptions="CenterAndExpand"
                  HorizontalOptions="CenterAndExpand">
                <ActivityIndicator.WidthRequest>
                    <OnPlatform x:TypeArguments="x:Double" iOS="100" Android="100"/>
                </ActivityIndicator.WidthRequest>
                <ActivityIndicator.Color>
                    <OnPlatform x:TypeArguments="Color"
              iOS="#2499CE" />
                </ActivityIndicator.Color>
            </ActivityIndicator>
        </StackLayout>

    </StackLayout>


</ContentPage.Content>