Introducing Shimmer in Xamarin.Forms

In an application, a user should see that data is being loaded when it really is. Otherwise, it might look like the application is not responding. In older times, we mostly used loading indicators such as progress bars to notify users that data loading is in progress. Now, the shimmering effect replaces these loading indicators. This new UI element not only indicates that data loading is in progress but also provides an overview of how the data is going to be presented in the UI using a skeleton.

To achieve this in Xamarin.Forms, we are introducing a new component, Shimmer for iOS and Android platforms, for the 2019 Volume 3 release. This control is available as part of the Syncfusion.Xamarin.Core NuGet package. It contains six built-in shimmer types along with the support for any kind of custom view.

In this article, I will walk you through the features available in this new Shimmer component.

How Shimmer works

Shimmer is a container control that can accept any kind of view as its content. When the shimmer is loaded, the shimmering effect will run for as long as the IsActive property is set to true. You can set IsActive to false, to stop the shimmering effect and show the actual content.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ShimmerSample"
             xmlns:shimmer="clr-namespace:Syncfusion.XForms.Shimmer;assembly=Syncfusion.Core.XForms"
             x:Class="ShimmerSample.MainPage">   
        <shimmer:SfShimmer
            IsActive="False" ...>
            <Grid>......</Grid>
        </shimmer:SfShimmer>
</ContentPage>

Built-in types

There are six built-in types supported in Shimmer:

• Persona
• Profile
• Article
• Video
• Feed
• Shopping

You can set the Type property to these values based on your requirement.

Customization

You can customize the color, wave color, wave width, animation duration, and animation direction of the shimmer.

        <shimmer:SfShimmer
             AnimationDuration="2000"
             Type="Video"
             Color="#CECEEF"
             WaveColor="#E7E7F9"
             WaveWidth="100">
            <Grid>......</Grid>
        </shimmer:SfShimmer>

Custom view

In addition to the built-in shimmer types, you can also set any type of custom view. Please have a look at the following code example for a better idea.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ShimmerSample"
             xmlns:shimmer="clr-namespace:Syncfusion.XForms.Shimmer;assembly=Syncfusion.Core.XForms"
             x:Class="ShimmerSample.MainPage">
   
   <shimmer:SfShimmer>
       <shimmer:SfShimmer.CustomView>
           <Grid
               Padding="20"
               ColumnSpacing="15"
               RowSpacing="10"
               VerticalOptions="Center">
               <Grid.ColumnDefinitions>
                   <ColumnDefinition Width="Auto" />
                   <ColumnDefinition Width="*" />
               </Grid.ColumnDefinitions>
               <Grid.RowDefinitions>
                   <RowDefinition Height="15" />
                   <RowDefinition Height="15" />
                   <RowDefinition Height="15" />
               </Grid.RowDefinitions>
               <border:SfBorder
                        Grid.RowSpan="3"
                        Margin="0"
                        BorderColor="Transparent"
                        CornerRadius="10"
                        VerticalOptions="Fill"
                        WidthRequest="65" />
               <border:SfBorder
                        Grid.Row="0"
                        Grid.Column="1"
                        HorizontalOptions="FillAndExpand" />
               <border:SfBorder
                        Grid.Row="1"
                        Grid.Column="1"
                        WidthRequest="200" />
               <border:SfBorder
                        Grid.Row="2"
                        Grid.Column="1"
                        WidthRequest="100" />
           </Grid>
         </shimmer:SfShimmer.CustomView>
      </shimmer:SfShimmer>

Conclusion

In this blog post, we walked through our new Xamarin.Forms Shimmer component and its features. Try this control with our 2019 Volume 3 release. To learn more about this component, refer to our UG documentation. You can drop your comments in the section below if you need any clarification about this component.

Try our Shimmer component with the sample project available in this GitHub location.

If you need support for specific features in this component or have any questions, contact us through our support forum, Direct-Trac, or feedback portal. We are waiting to hear your feedback about this new component!

We have introduced a few new Xamarin components for this release. Check out these links to learn more about them:

• Effects View
• Avatar View
• Rich Text Editor