Most apps that deal with online data have implemented a refresh mechanism. If you want to enable your users to trigger this on their own, providing a “swipe to refresh” implementation is a common and intuitive design pattern. Users can pull down from the top of a page to trigger the refresh. This has the best effect when it is added to a scrollable object like ListView or ScrollView.

Backwards compatibility

First make sure that our app is backward compatible. To do so, add the Android Support Library v4 and v7 to your project and make sure that your activity inherits from AppCompatActivity. Additionally you need to use a style that inherits from a Theme.AppCompat version like the Theme.AppCompat.Light.DarkActionBar theme. If you need help with this, check the demo code on GitHub.

Prepare your layout

You do not need much to make your app ready for a swipe to refresh implementation. Just surround your layout with a SwipeRefreshLayout widget that you can find inside the Android Support Library v4. If you use a toolbar make sure to exclude it from the SwipeRefreshLayout to achieve a better optical effect.

After inflating the layout in your code, you have the chance to adjust some things like the colors of the loading indicator. By default it is simply black but you can set upto four colors to cycle through.

You should also add an event listener here to be able to react on the refresh command. As soon as a user pulles the indicator down, the layout fires the Refresh event that you can subscribe to.

Implement your refresh logic

What you want to do when the Refresh event is fired is up to you. Make sure to hide the loading indicator when you are done by setting the Refreshing property of the layout to false.

If you want to use the layout to show the user that your application is currently loading, you also have the opportunity to show the loading indicator without having the user pull it down by setting the Refreshing property manually to true.

Hint: Please consider that this can only be set when the SwipeRefreshLayout has been completely loaded. If you want to show the indicator when your app starts, you need to wait until the layout is loaded and activate the refreshing afterwards to make it work. Use the Post() method to delay the command until the control has been loaded.

Take a look at our demo code on GitHub if you need a working sample or want to take a look at the full code.

Robin-Manuel Thiel

At daylight, Robin-Manuel talks about new IT trends and development. But at night he turns into a tinker and developer which sometimes leads to insufficient sleep. He loves cool technologies, cross-platform and everything with a power-plug or IP address.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.