Create overlaying loader on a mobile app using xamarin forms

Question

I am using Xamarin forms and am trying to create an overlaying loader for my screens. From my findings, I need to use an absolute layout, which I have done. I have accomplished for the loader to work on some screens however when the screen is a little more complex (using nested scrollviews, grids, etc.) it doesn't seem to work. Below is a sample of the code that DOES work:

<AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
    <StackLayout Padding="10" Orientation="Vertical" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
      <StackLayout Padding="0,85,0,0">
        <Image Source="myimage.png" HorizontalOptions="Center" VerticalOptions="Start" />
      </StackLayout>

      <StackLayout Orientation="Vertical" Padding="10, 5, 10, 5" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
        <Label Text="This works perfect"></Label>
      </StackLayout>
    </StackLayout>

    <!-- Loader -->
    <ContentView BackgroundColor="#222222"
                Opacity="0.3"
                AbsoluteLayout.LayoutFlags="All"
                AbsoluteLayout.LayoutBounds="0,0,1,1"
                IsVisible="{Binding IsIndicatorActive}">
      <ActivityIndicator AbsoluteLayout.LayoutFlags="All"
                         AbsoluteLayout.LayoutBounds="0,0,1,1"
                         VerticalOptions="{StaticResource LoaderPosition}"
                         HorizontalOptions="{StaticResource LoaderPosition}"
                         IsEnabled="{Binding IsIndicatorActive}"
                         IsRunning="{Binding IsIndicatorActive}"
                         IsVisible="{Binding IsIndicatorActive}" />
    </ContentView>
  </AbsoluteLayout>

The following code is what DOESN'T work:

<AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
    <StackLayout Orientation="Vertical" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
      <ScrollView>
        <StackLayout Padding="0,85,0,0">
            <Image Source="myimage.png" HorizontalOptions="Center" VerticalOptions="Start" />
        </StackLayout>

        <StackLayout Orientation="Vertical" Padding="10, 5, 10, 5" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
            <Label Text="This doesn't work"></Label>
        </StackLayout>
      </ScrollView>

      <Grid HorizontalOptions="FillAndExpand" VerticalOptions="EndAndExpand" ColumnSpacing="0" RowSpacing="0">
        <Grid.RowDefinitions>
          <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="2*" />
          <ColumnDefinition Width="2*" />
        </Grid.ColumnDefinitions>

        <Button Grid.Row="0" Grid.Column="0" HorizontalOptions="FillAndExpand" Text="Button1" Command="{Binding Button2Command}" />
        <Button Grid.Row="0" Grid.Column="1" HorizontalOptions="FillAndExpand" Text="Button2" Command="{Binding Button2Command}" />
      </Grid>
    </StackLayout>

    <!-- Loader -->
    <ContentView BackgroundColor="#222222"
                Opacity="0.3"
                AbsoluteLayout.LayoutFlags="All"
                AbsoluteLayout.LayoutBounds="0,0,1,1"
                IsVisible="{Binding IsIndicatorActive}">
      <ActivityIndicator AbsoluteLayout.LayoutFlags="All"
                         AbsoluteLayout.LayoutBounds="0,0,1,1"
                         VerticalOptions="{StaticResource LoaderPosition}"
                         HorizontalOptions="{StaticResource LoaderPosition}"
                         IsEnabled="{Binding IsIndicatorActive}"
                         IsRunning="{Binding IsIndicatorActive}"
                         IsVisible="{Binding IsIndicatorActive}" />
    </ContentView>
  </AbsoluteLayout>

From my understanding it has something to do with the fact that scrollviews and gridviews are Managed Layouts and absolute layouts are Unmanaged Layouts so I figured if i put a stacklayout occupying the full absolute layout and afterwards the scrollview and gridview instide the stacklayout it would be relative to its parent (the way html handles this). Clearly this isn't handled in such manner (instead i just get a blank screen), which is leaving me stumped as to how I would go about this issue.

Any ideas how I can get around this issue and have my loader display without affecting my screen display? Thanks!

score 0 · Answer 1 · answered May 02 '16 at 23:28

Maybe this will be easier:

https://components.xamarin.com/view/andhud

https://components.xamarin.com/view/btprogresshud

To implement those you only need to use the Dependency Service:

iOS implementation:

http://pastie.org/10821570

Android Implementation:

http://pastie.org/10821571

Interface implementation:

using System;
namespace YourNameSpace
{
    public interface IHudService
    {
        void ShowHud(string ProgressText = "Loading...");
        void HideHud();
        void SetText(string Text);
        void SetProgress(double Progress, string ProgressText = "");
    }
}

And to use it simply use:

DependencyService.Get<IHudService>().ShowHud();
//Your Task...
DependencyService.Get<IHudService>().HideHud();

Create overlaying loader on a mobile app using xamarin forms

1 Answers1