Xamarin Forms : How to fix Activity Indicator in Centre of Screen in Scrollview

Question

I have a ScrollView over AbsoluteLayout.. I need to Fix the postion of the ActivityIndicator in centre of screen. I tried following code.

<ScrollView>
    <AbsoluteLayout VerticalOptions="FillAndExpand"
                    HorizontalOptions="FillAndExpand">
        <StackLayout BackgroundColor="White"
                     Padding="50,20,50,20"
                     Spacing="5"
                     AbsoluteLayout.LayoutBounds="0,0,1,1"
                     AbsoluteLayout.LayoutFlags="All"> 
            // have set of elements..
        </StackLayout>
        <ActivityIndicator IsVisible="{Binding IsBusy}"
                           IsRunning="{Binding IsBusy}"
                           Color="Black"
                           AbsoluteLayout.LayoutBounds="0.5,0.5,0.1,0.1"
                           AbsoluteLayout.LayoutFlags="All"/>
    </AbsoluteLayout>
</ScrollView>

and I find the result as its in the centre of the ScrollView.

I tried by placing the ActivityIndicatorout side the ScrollViewit simply gives white screen as output.

How do I fix the position of the ActivityIndicator in centre of screen ?

Answer 1

As @Vahid said, if you want the ActivityIndicator over the ScrollView, you need to put both inside an AbsoluteLayout, like this:

<AbsoluteLayout VerticalOptions="FillAndExpand"
                HorizontalOptions="FillAndExpand">
    <ScrollView AbsoluteLayout.LayoutBounds="0,0,1,1"
                AbsoluteLayout.LayoutFlags="All"
                VerticalOptions="FillAndExpand"
                HorizontalOptions="FillAndExpand">
        <StackLayout BackgroundColor="White"
                     Padding="50,20,50,20"
                     Spacing="5">
            // Your stuff goes here
        </StackLayout>
    </ScrollView>
    <AbsoluteLayout BackgroundColor="#22000000"
                    AbsoluteLayout.LayoutBounds="0.5,0.5,1,1"
                    AbsoluteLayout.LayoutFlags="All"
                    IsVisible="{Binding IsBusy}">
        <ActivityIndicator Color="Black"
                           AbsoluteLayout.LayoutBounds="0.5,0.5,0.1,0.1"
                           AbsoluteLayout.LayoutFlags="All"
                           IsVisible="True"
                           IsRunning="True"/>
    </AbsoluteLayout>
</AbsoluteLayout>

Notice that I added an extra AbsoluteLayout that works like a 'wait overlay' over the ScrollView only - not the whole screen.

Answer 2

Create a grid page with one row and one column. Define both your ActivityIndicatorLayout and ScrollLayout to be in row 0 and column 0. I add the Content before the Activity Indicator.