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>
Shimmer - Xamarin.Forms
Shimmer – Xamarin.Forms

Built-in types

There are six built-in types supported in Shimmer:

  • Persona
  • Profile
  • Article
  • Video
  • Feed
  • Shopping
Built-in types - Xamarin.Forms Shimmer
Built-in types – Xamarin.Forms Shimmer

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>
Customization - Xamarin.Forms Shimmer
Customization – Xamarin.Forms Shimmer

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>
Custom view - Xamarin.Forms Shimmer
Custom view – Xamarin.Forms Shimmer

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 forumDirect-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:

Tags:

Share this post:

Related Posts

Comments (5)

[…] Introducing Shimmer in Xamarin.Forms (Mohamed Samsudeen) […]

Any sample provided on how to use the IsActive property of the SfShimmer through a viewmodel would be great.
I have tried it but the IsActive Property still remains active even when it hit the IsActive = false property. Any suggestions would be great as well. Nice control though

Hi Pat,

We have prepared a sample for this.

https://www.syncfusion.com/downloads/support/directtrac/general/ze/ShimmerSample665716753

Please check out the sample. If you need further assistance on this, contact us in any one of the below links.

Direct- Trac : https://www.syncfusion.com/support/directtrac/
Forum : https://www.syncfusion.com/feedback/xamarin-forms
Feedback : https://www.syncfusion.com/feedback/xamarin-forms

We will be happy to assist you.

Regards,
Samsudeen

This is great. Can this be available on MVC and JavaScript anytime soon?

Hi Dominic,

We have considered your request and created a feedback link below

https://www.syncfusion.com/feedback/9695/shimmer-component-in-ej2

However, we don’t have any immediate plans and please upvote it. Based on the number of upvotes and priority of other new widgets, we will plan and implement this.

Regards,
Sridhar N

Leave a comment