Skip to main content

Refresh Indicator for ListView Color in Xamarin.Forms

·2 mins

For a project I am working on, I needed to change the color of the spinner which is shown when you pull to refresh on a _ListView_. To my big surprise, this isn’t available by default. So, I thought I would add it so other people could benefit as well. In this post, I will share what the colored refresh indicator is and how to use it.

Implementation #

The implementation was quite easy. Also, because it was just implemented for iOS and Android. Other platforms do not have a loading indicator like these two platforms that could be colored. As I have explained in previous posts, implementing features or fixing bugs in Xamarin.Forms, especially controls, usually involve the renderer. That was also the case here.

First, I introduced a new property on the ListView control, namely the RefreshControlColor which takes a Color. Then inside the renderer, I check to see what the color is and then change it on the native control. For instance, on iOS you do this by setting the TintColor of the refresh control.

All details of this PR can be found here: https://github.com/xamarin/Xamarin.Forms/pull/2961. If you have no idea what I am talking about in general, here is the refresh indicator in action:

Refresh Indicator on ListView

Refresh Indicator on ListView

Refresh Indicator Color Usage #

Usage of this new feature is pretty straight-forward as you would expect. You can now simply do this, see code underneath, on your ListView control.

Of course, we do need to await the Xamarin.Forms package containing this update at the time of writing, but when you run this, you will see that the refresh control will color red! It goes without saying that you can do the same from C# code. Remember to set IsPullToRefreshEnabled to true as well.

Summary #

And just like that another (small) feature was implemented! I hope you will find some good use for the colored refresh indicator on your ListView. Of course, in the near future we will all be looking at the CollectionView, which should replace the ListView, but in the meantime this is now available for you to use.