Introducing Shimmer in Xamarin.Forms
Tags: android, csharp, dotnet, ios
Published: 2019-10-18 12:47:24

---
title: Introducing Shimmer in Xamarin.Forms
published: true
date: 2019-10-14 11:00:41 UTC
tags: android, csharp, dotnet, ios
canonical_url: https://www.syncfusion.com/blogs/post/introducing-xamarin-forms-shimmer.aspx
cover_image: https://thepracticaldev.s3.amazonaws.com/i/8gnyyhtw5kmm4jvoxgx2.jpg
---

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](https://www.syncfusion.com/xamarin-ui-controls/xamarin-shimmer) for iOS and Android platforms, for the [2019 Volume 3](https://www.syncfusion.com/forums/148058/essential-studio-2019-volume-3-release-v17-3-0-14-is-available-for-download) release. This control is available as part of the [Syncfusion.Xamarin.Core](https://www.nuget.org/packages/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.

```xml
<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](https://www.syncfusion.com/blogs/wp-content/uploads/2019/09/ShimmerOverview.gif)<figcaption>Shimmer – Xamarin.Forms</figcaption>

## Built-in types

There are six built-in types supported in Shimmer:

- Persona
- Profile
- Article
- Video
- Feed
- Shopping

![Built-in types - Xamarin.Forms Shimmer](https://www.syncfusion.com/blogs/wp-content/uploads/2019/10/shimmertypes.gif)<figcaption>Built-in types – Xamarin.Forms Shimmer</figcaption>

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.

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

![Customization - Xamarin.Forms Shimmer](https://www.syncfusion.com/blogs/wp-content/uploads/2019/10/AnimationDuration.gif)<figcaption>Customization – Xamarin.Forms Shimmer</figcaption>

## 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.

```xml
<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](https://www.syncfusion.com/blogs/wp-content/uploads/2019/10/CustomView.gif)<figcaption>Custom view – Xamarin.Forms Shimmer</figcaption>

## Conclusion

In this blog post, we walked through our new [Xamarin.Forms Shimmer](https://www.syncfusion.com/xamarin-ui-controls/xamarin-shimmer) component and its features. Try this control with our [2019 Volume 3](https://www.syncfusion.com/forums/148058/essential-studio-2019-volume-3-release-v17-3-0-14-is-available-for-download) release. To learn more about this component, refer to our [UG documentation](https://help.syncfusion.com/xamarin/sfshimmer/getting-started). 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](https://github.com/syncfusion/xamarin-demos/tree/master/Forms/Shimmer).

If you need support for specific features in this component or have any questions, contact us through our support [forum](https://www.syncfusion.com/forums), [Direct-Trac](https://www.syncfusion.com/support/directtrac/), or [feedback portal](https://www.syncfusion.com/feedback/xamarin-forms). 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](https://dev.to/vijays/introducing-the-effects-view-control-for-xamarin-forms-ddk-temp-slug-63805)
- [Avatar View](https://www.syncfusion.com/xamarin-ui-controls/xamarin-avatar-view)
- [Rich Text Editor](https://www.syncfusion.com/xamarin-ui-controls/xamarin-richtexteditor)

The post [Introducing Shimmer in Xamarin.Forms](https://www.syncfusion.com/blogs/post/introducing-xamarin-forms-shimmer.aspx) appeared first on [Syncfusion Blogs](https://www.syncfusion.com/blogs).