Centering an Activityindicator on Xamarin.Forms

Question

I have the XAML above code and I am trying to put an ActivityIndicator on the center of the page after click the Button. I tried using examples of the web, but not succesful.

<ScrollView>
  <StackLayout>
    <StackLayout Padding="30" Spacing="2" VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand">
      <Label x:Name="lblUsuario" Text="ID do Usuário" TextColor="#555" FontSize="20" FontAttributes="Bold"/>
      <Entry x:Name="EntUsuario" Keyboard="Numeric" Placeholder="Digite usuário" PlaceholderColor="#CCC" FontSize="20" TextColor="#555" />
      <Label x:Name="lblSenha" Text="Senha de acesso" TextColor="#555" FontSize="20" FontAttributes="Bold"/>
      <Entry x:Name="EntSenha" Placeholder="Digite sua senha" Keyboard="Default" IsPassword="True" FontSize="20" PlaceholderColor="#CCC" TextColor="#555" />   
    </StackLayout>
    <StackLayout Padding="30" VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand">  
      <Button x:Name="BtnLogin" Text="Login" BorderColor="#CB9600" BackgroundColor="#F4B400" />
    </StackLayout> 
  </StackLayout>
</ScrollView>

This is the beggining of the code:

public partial class LoginPage : ContentPage
    {
        public LoginPage()
        {
            IsBusy = false;
            InitializeComponent();

            int contadorErroLogin = 0;
            string result = null;

            BtnLogin.Clicked += async (sender, e) =>
                {
                    IsBusy = true;

When starts IsBusy = false but the screen seems like were true .

Answer 1

Try using this :

<AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">

       <StackLayout AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
           <ScrollView>
              <StackLayout>
                  <StackLayout Padding="30" Spacing="2" VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand">
                    <Label x:Name="lblUsuario" Text="ID do Usuário" TextColor="#555" FontSize="20" FontAttributes="Bold"/>
                    <Entry x:Name="EntUsuario" Keyboard="Numeric" Placeholder="Digite usuário" PlaceholderColor="#CCC" FontSize="20" TextColor="#555" />
                    <Label x:Name="lblSenha" Text="Senha de acesso" TextColor="#555" FontSize="20" FontAttributes="Bold"/>
                    <Entry x:Name="EntSenha" Placeholder="Digite sua senha" Keyboard="Default" IsPassword="True" FontSize="20" PlaceholderColor="#CCC" TextColor="#555" />   
               </StackLayout>
               <StackLayout Padding="30" VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand">  
                    <Button x:Name="BtnLogin" Text="Login" BorderColor="#CB9600" BackgroundColor="#F4B400" />
               </StackLayout> 
             </StackLayout>
            </ScrollView>

        </StackLayout>

       <StackLayout IsVisible="{Binding IsBusy}" Padding="12"
                 AbsoluteLayout.LayoutFlags="PositionProportional"
                 AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1">

       <ActivityIndicator IsRunning="{Binding IsBusy}" Color ="#80000000"/>

       <Label Text="Loading..." HorizontalOptions="Center" TextColor="White"/>

        </StackLayout>

 </AbsoluteLayout>

Answer 2

You can try to encapsulate the your ScrollViewer inside a Grid and under your ScrollViewer insert an ÀctivityIndicator` centered vertically and horizontally.

Like this:

<Grid>
    <ScrollView>
      <StackLayout>
        <StackLayout Padding="30" Spacing="2" VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand">
          <Label x:Name="lblUsuario" Text="ID do Usuário" TextColor="#555" FontSize="20" FontAttributes="Bold"/>
          <Entry x:Name="EntUsuario" Keyboard="Numeric" Placeholder="Digite usuário" PlaceholderColor="#CCC" FontSize="20" TextColor="#555" />
          <Label x:Name="lblSenha" Text="Senha de acesso" TextColor="#555" FontSize="20" FontAttributes="Bold"/>
          <Entry x:Name="EntSenha" Placeholder="Digite sua senha" Keyboard="Default" IsPassword="True" FontSize="20" PlaceholderColor="#CCC" TextColor="#555" />
        </StackLayout>
        <StackLayout Padding="30" VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand">
          <Button x:Name="BtnLogin" Text="Login" BorderColor="#CB9600" BackgroundColor="#F4B400" />
        </StackLayout>
      </StackLayout>
    </ScrollView>

    <ActivityIndicator x:Name="activityIndicator" IsRunning="False" VerticalOptions="Center" HorizontalOptions="Center" />
  </Grid>

And the code behind this view:

public MainPage()
{
    this.InitializeComponent();
    this.BtnLogin.Clicked += BtnLogin_Clicked;
}

private void BtnLogin_Clicked(object sender, EventArgs e)
{
    this.activityIndicator.IsRunning = true;
    // TODO: do stuff here
}

When I click on the BtnLogin I say that the activityIndicator should run.

What happen in the grid is that all controls within the grid take the Grid.Column and Grid.Row 0 by default. So all controls are the one on the other.

EDIT:

If you trying to have a MVVM approach, you can define your current view has BindingContext

View:

  <Grid>
    <ScrollView>
      <StackLayout>
        <StackLayout Padding="30" Spacing="2" VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand">
          <Label x:Name="lblUsuario" Text="ID do Usuário" TextColor="#555" FontSize="20" FontAttributes="Bold"/>
          <Entry x:Name="EntUsuario" Keyboard="Numeric" Placeholder="Digite usuário" PlaceholderColor="#CCC" FontSize="20" TextColor="#555" />
          <Label x:Name="lblSenha" Text="Senha de acesso" TextColor="#555" FontSize="20" FontAttributes="Bold"/>
          <Entry x:Name="EntSenha" Placeholder="Digite sua senha" Keyboard="Default" IsPassword="True" FontSize="20" PlaceholderColor="#CCC" TextColor="#555" />
        </StackLayout>
        <StackLayout Padding="30" VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand">
          <Button x:Name="BtnLogin" Text="Login" BorderColor="#CB9600" BackgroundColor="#F4B400" />
        </StackLayout>
      </StackLayout>
    </ScrollView>

    <!-- The '{Binding IsBusy}' is going to search the 'IsBusy' property inside the 'BindingContext'. In our case, is the code behind -->
    <ActivityIndicator x:Name="activityIndicator" IsRunning="{Binding IsBusy}" VerticalOptions="Center" HorizontalOptions="Center" />
  </Grid>

Code behind:

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        this.InitializeComponent();

        // Define the binding context
        this.BindingContext = this;

        // Set the IsBusy property
        this.IsBusy = false;

        // Login button action
        this.BtnLogin.Clicked += BtnLogin_Clicked;
    }

    private void BtnLogin_Clicked(object sender, EventArgs e)
    {
        this.IsBusy = true;
    }
}

Hope it helps.