Introducing Shimmer in Xamarin.Forms | Syncfusion Blogs
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (174).NET Core  (29).NET MAUI  (207)Angular  (109)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (41)Black Friday Deal  (1)Blazor  (215)BoldSign  (14)DocIO  (24)Essential JS 2  (107)Essential Studio  (200)File Formats  (66)Flutter  (133)JavaScript  (221)Microsoft  (119)PDF  (81)Python  (1)React  (100)Streamlit  (1)Succinctly series  (131)Syncfusion  (915)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (51)Windows Forms  (61)WinUI  (68)WPF  (159)Xamarin  (161)XlsIO  (36)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (8)Business intelligence  (55)Button  (4)C#  (147)Chart  (131)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (63)Development  (628)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (40)Extensions  (22)File Manager  (7)Gantt  (18)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (507)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (43)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (52)Security  (3)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (10)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (387)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (592)What's new  (332)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Introducing Shimmer in Xamarin.Forms

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=""
            IsActive="False" ...>
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.


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

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=""
                   <ColumnDefinition Width="Auto" />
                   <ColumnDefinition Width="*" />
                   <RowDefinition Height="15" />
                   <RowDefinition Height="15" />
                   <RowDefinition Height="15" />
                        WidthRequest="65" />
                        HorizontalOptions="FillAndExpand" />
                        WidthRequest="200" />
                        WidthRequest="100" />
Custom view - Xamarin.Forms Shimmer
Custom view – Xamarin.Forms Shimmer


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:


Share this post:

Comments (7)

[…] 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.

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

Direct- Trac :
Forum :
Feedback :

We will be happy to assist you.


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

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.

Sridhar N


I am implementing CustomView in my project but IsActive property is not working properly in CustomView when I set IsActive=false its shown white screen rather then my content. I downloaded sample project and IsActive property is working .

Please look into this issue and share any suggestion.

Hi Harinder,

Detailed updates are given in the below incident you created.

Comments are closed.

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed