For quite a long time, on a list with article ideas there is “instagram style animation in Xamarin”. Back in time, Instagram images were loading with shimmer. After all those years, I decided it’s a time to do it. So I did. Below you can find quick article how to get Shimmer animation in Xamarin.Forms.

Get a list of your items

To begin with, you will need to create a visual element to host your list. It can be either ListView or CollectionView. I prefer the latest but it’s up to you which one you want to use. In my case the view will look like this.

<CollectionView
    ItemsSource="{Binding Users}"
    HorizontalOptions="Fill"
    Margin="20"
    HorizontalScrollBarVisibility="Never"
    VerticalScrollBarVisibility="Never">

    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid
                ColumnDefinitions="Auto, *"
                ColumnSpacing="12"
                RowSpacing="2"
                HeightRequest="100"
                RowDefinitions="Auto, Auto">

                <BoxView
                    Grid.Row="0"
                    Grid.RowSpan="2"
                    Grid.Column="0"
                    CornerRadius="25"
                    HeightRequest="50"
                    WidthRequest="50"
                    BackgroundColor="#d4d4d4"
                    Margin="0,2" />

                <Label
                    Grid.Row="0"
                    Grid.Column="1"
                    HeightRequest="25"
                    HorizontalOptions="Fill"
                    Margin="0,0,64,0"
                    Text="{Binding FullName}" />

                <Label
                    Grid.Row="1"
                    Grid.Column="1"
                    HeightRequest="25"
                    HorizontalOptions="Fill"
                    Margin="0,0,64,0"
                    Text="{Binding Title}"
                    TextColor="#808080" />

            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

Normal collection view.

Library we gonna use

Now it’s time to install NuGet package that simplify stuff for use. It’s this package.

If you want to check the source code on Github it’s available here.

Being honest, after seeing that the last update was done 2 years ago, I was quite upset. That changed when I took a deeper look into the code. The package simply recreates the content of your view and redraws it in Skia (more or less it works like this). Even if something goes side ways, I should be able to recreate it on my own.

It was a nice idea Dionysis to do it in Skia. Chapeau bas!

Usage

It’s really simple. Just recreate your UI with simple elements and you will get a nice effect. In my case the code would look like this.

<CollectionView
    ItemsSource="{Binding Users}"
    HorizontalOptions="Fill"
    Margin="20"
    HorizontalScrollBarVisibility="Never"
    VerticalScrollBarVisibility="Never">

    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid
                ColumnDefinitions="Auto, *"
                ColumnSpacing="12"
                RowSpacing="2"
                HeightRequest="100"
                RowDefinitions="Auto, Auto">

                <BoxView
                    Grid.Row="0"
                    Grid.RowSpan="2"
                    Grid.Column="0"
                    CornerRadius="25"
                    HeightRequest="50"
                    WidthRequest="50"
                    BackgroundColor="#d4d4d4"
                    Margin="0,2" />

                <Label
                    Grid.Row="0"
                    Grid.Column="1"
                    HeightRequest="25"
                    HorizontalOptions="Fill"
                    Margin="0,0,64,0"
                    Text="{Binding FullName}" />

                <Label
                    Grid.Row="1"
                    Grid.Column="1"
                    HeightRequest="25"
                    HorizontalOptions="Fill"
                    Margin="0,0,64,0"
                    Text="{Binding Title}"
                    TextColor="#808080" />

            </Grid>
            <CollectionView.Footer>
                <controls:ShimmerLayout Angle="-45" GradientSize=".1" IsLoading="True"
                                        BackgroundGradientColor="#dadada"
                                        ForegroundGradientColor="#808080">
                    <Grid
                        ColumnDefinitions="Auto, *"
                        ColumnSpacing="12"
                        RowSpacing="2"
                        RowDefinitions="Auto, Auto">

                        <BoxView
                            Grid.Row="0"
                            Grid.RowSpan="2"
                            Grid.Column="0"
                            CornerRadius="25"
                            HeightRequest="50"
                            WidthRequest="50"
                            Margin="0,2" />

                        <BoxView
                            Grid.Row="0"
                            Grid.Column="1"
                            HeightRequest="25"
                            HorizontalOptions="Fill"
                            Margin="0,0,64,0"
                            CornerRadius="4" />

                        <BoxView
                            Grid.Row="1"
                            Grid.Column="1"
                            HeightRequest="25"
                            HorizontalOptions="Fill"
                            Margin="0,0,64,0"
                            CornerRadius="4" />

                    </Grid>
                </controls:ShimmerLayout>
            </CollectionView.Footer>

        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

As you can see, I only added a footer with empty BoxViews. Of course, you can play with angle or gradient & colours. What’s more, you can bind IsLoading to your property that indicates something is happening in background.

Hope that helped! Looking forward to your feedback if you have different ideas how to tackle this 😇