Loading when searching JSON

Question

I need to create a "Loading" when I click on a search button for JSON information on a site. Loading needs to be in the middle of the screen.

Code:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FoodSuppy.Tela.PesquisaCidade">

    <AbsoluteLayout>
        <StackLayout BackgroundColor="Bisque">

            <StackLayout HorizontalOptions="CenterAndExpand" 
                         BackgroundColor="HotPink">
            <!-- Pesquisa -->
                <SearchBar x:Name="MainSearchBar"
                       SearchButtonPressed="MainSearchBar_OnSearchButtonPressed"
                       Placeholder="Digite o nome da cidade..." 
                       TextColor="Black"/>
            </StackLayout>

            <StackLayout BackgroundColor="Aqua">
                <ListView x:Name="lstCidade" 
                          HasUnevenRows="True">
                    <ListView.ItemTemplate>
                        <!-- DataTemplate  = exibe dados de uma coleção de objetos em um ListView -->
                        <DataTemplate>
                            <ViewCell>
                                <StackLayout Orientation="Horizontal">
                                    <Label Text="{Binding IBGE}" 
                                       TextColor="Blue" 
                                       FontSize="0" 
                                       HorizontalOptions="Start"/>
                                    <Label Text="{Binding CIDADE}" 
                                       TextColor="Blue" 
                                       FontSize="Large" 
                                       HorizontalOptions="End"/>
                                </StackLayout>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </StackLayout>

            <!-- Loading -->
            <StackLayout x:Name="LoadingStack"  
                            AbsoluteLayout.LayoutBounds="0, 0, 1, 1"
                            AbsoluteLayout.LayoutFlags="All" 
                            Opacity="0.5"
                            HeightRequest="500">

                <!-- Loading -->
                <ActivityIndicator x:Name="actInd"
                                    Color="Blue"
                                    HeightRequest="20"
                                    WidthRequest="20"
                                    BackgroundColor="Transparent"
                                    HorizontalOptions="CenterAndExpand"
                                    VerticalOptions="CenterAndExpand">
                </ActivityIndicator>

            </StackLayout>
        </StackLayout>
    </AbsoluteLayout>
</ContentPage>

Answer 1

One of my friends sent me a code solving the problem, I’ll post it in case someone needs it:

<AbsoluteLayout>
    <StackLayout BackgroundColor="Green"  HorizontalOptions="FillAndExpand"
                     VerticalOptions="FillAndExpand"
                     AbsoluteLayout.LayoutBounds="1, 1, 1, 1"
                     AbsoluteLayout.LayoutFlags="All">

        <StackLayout HorizontalOptions="CenterAndExpand" 
                     BackgroundColor="Red">
            <!-- Pesquisa -->
            <Label Text="Parte 1" />
            <SearchBar x:Name="MainSearchBar"
                       HeightRequest="30" HorizontalOptions="FillAndExpand"
                   SearchButtonPressed="MainSearchBar_OnSearchButtonPressed"
                   Placeholder="Digite o nome da cidade..." 
                   TextColor="Black"
                       Text="XW" />
        </StackLayout>

        <StackLayout BackgroundColor="Yellow">
            <Label Text="Parte 1" />
            <ListView x:Name="lstCidade" 
                      HasUnevenRows="True">
                <ListView.ItemTemplate>
                    <!-- DataTemplate  = exibe dados de uma coleção de objetos em um ListView -->
                    <DataTemplate>
                        <ViewCell>
                            <StackLayout Orientation="Horizontal">
                                <Label Text="{Binding IBGE}" 
                                   TextColor="Blue" 
                                   FontSize="0" 
                                   HorizontalOptions="Start"/>
                                <Label Text="{Binding CIDADE}" 
                                   TextColor="Blue" 
                                   FontSize="Large" 
                                   HorizontalOptions="End"/>
                            </StackLayout>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
    </StackLayout>

    <!-- Loading -->
    <StackLayout x:Name="LoadingStack" IsVisible="{Binding Loading}"
                        AbsoluteLayout.LayoutBounds="0, 0, 1, 1"
                        AbsoluteLayout.LayoutFlags="SizeProportional" 
                        BackgroundColor="White"
                        Opacity="0.5">

        <!-- Loading -->
        <ActivityIndicator x:Name="actInd"
                           IsVisible="True"
                           IsRunning="True"
                                Color="Blue"
                                HeightRequest="20"
                                WidthRequest="20"
                                BackgroundColor="Transparent"
                                HorizontalOptions="CenterAndExpand"
                                VerticalOptions="CenterAndExpand">
        </ActivityIndicator>

    </StackLayout>
</AbsoluteLayout>

Answer 2

Using AbsoluteLayout, the property LayoutBounds receives the arguments in that order:

• Horizontal positioning
• Vertical positioning
• Width
• Height

These values can be relative (to the parent element) or absolute. This is determined by the property LayoutFlags.

In your case, specifying "0,0,1,1" and All, you’re saying the last StackLayout has all relative values (position and size), is positioned at the beginning of the parent element and will occupy all its size.

Relative values vary from 0 (representing the position/size of the start of the axis) to 1 (representing the position/size of the end of the axis). To illustrate, in its configuration the ActivityIndicator would be on point A and you want him on point B, imagining that this is the AbsoluteLayout where he is:

  0 ______0.5_______1 ← X
   |A              |
   |               |
   |               |
   |               |
   |               |
   |               |
0.5|       B       | 
   |               |
   |               |
   |               |
   |               |
   |               |
  1¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
  ↑
  Y

To position it correctly, replace your last StackLayout by this code*:

<ActivityIndicator x:Name="actInd"
                   Color="Blue"
                   AbsoluteLayout.LayoutBounds="0.5, 0.5, 1, 1"
                   AbsoluteLayout.LayoutFlags="All" 
                   Opacity="0.5"
                   HeightRequest="20"
                   WidthRequest="20"
                   BackgroundColor="Transparent"
                   HorizontalOptions="CenterAndExpand"
                   VerticalOptions="CenterAndExpand">
</ActivityIndicator>

* It is interesting to avoid using the StackLayout when it will have only one child element. Almost always it can be replaced by the element itself. Check out some tips to explore the best of performance with Xamarin.Forms in that article