How to implement Android Pull-to-Refresh Layout in Xamarin.Android C#?

Are you looking for Android Pull-to-Refresh Layout like Email Inbox or Social media to refresh the email or post? Here is the example for Pull-to-Refresh layout in Android using Xamarin C# to understand how to implement SwipeRefreshLayout (i.e. Pull-to-Refresh Layout).

Lets understand SwipeRefreshLayout first.

The SwipeRefreshLayout should be used whenever the user can refresh the contents of a view via a vertical swipe gesture. The activity that instantiates this view should add an OnRefreshListener to be notified whenever the swipe to refresh gesture is completed. – as per https://developer.android.com/

Here are some steps you can follow to create the demo app.

Step 1: Create a new Android project in Visual Studio or Xamarin Studio.

Open Visual Studio -> New Project -> Templates -> Visual C# -> Android-> Blank App -> Select Blank App and give a project name. (here i give name as PullToRefreshDemo)

Step 2: If you project already have Xamarin.Android.Support.Design library then no need to add any extra library for this project or SwipeRefreshLayout. Else you can add “Android Support Library V4” using NuGet Package manager.

Step 3: Update your main activity layout with the folowing code.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.v4.widget.SwipeRefreshLayout  
        android:id="@+id/pullToRefresh"    
        android:layout_width="match_parent"    
        android:layout_height="match_parent"      
        android:layout_alignParentTop="true">    
        <ListView    
        android:minWidth="25px"    
        android:minHeight="25px"    
        android:layout_width="match_parent"    
        android:layout_height="match_parent"    
        android:id="@+id/listView1" />    
        </android.support.v4.widget.SwipeRefreshLayout> 
</RelativeLayout>

In above code we added “ListView” within “SwipeRefreshLayout”.

Step 4: Create variable for SwipeRefreshLayout and ListView

Go to your MainActivity and add the following code before your OnCreate method.

private Android.Support.V4.Widget.SwipeRefreshLayout pullToRefresh;
        private ListView listview;
        private List<string> items;

Step 5: Update your OnCreate method with the following code.

protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
            // Set our view from the "main" layout resource
            SetContentView(Resource.Layout.activity_main);

            pullToRefresh = FindViewById<Android.Support.V4.Widget.SwipeRefreshLayout>(Resource.Id.pullToRefresh);
            
            //set the color scheme of your SwipeRefreshLayout
            pullToRefresh.SetColorSchemeResources(Resource.Color.Red, Resource.Color.Blue, Resource.Color.Yellow, Resource.Color.Green);

            listview =FindViewById<ListView> (Resource.Id.listView1);

            //Add dummy items in the list
            items = new List<string>();
            items.Add("Item 1");
            items.Add("Item 2");
            items.Add("Item 3");
            items.Add("Item 4");
            items.Add("Item 5");
            items.Add("Item 6");
            items.Add("Item 7");
            items.Add("Item 8");
            items.Add("Item 9");
            items.Add("Item 10");
            updateListview(items);

            pullToRefresh.Refresh += PullToRefresh_Refresh;
        }

Here pullToRefresh.Refresh call the method PullToRefresh_Refresh when he user can refresh the contents of a view via a vertical swipe gesture.

Please read comment within code for more details about the logic.

Step 6: Implement the PullToRefresh_Refreshmethod.

You can write the below code after OnCreate method.

private void PullToRefresh_Refresh(object sender, EventArgs e)
        {
            //Data Refresh Place  
            //You can replace this code with your logic for refresh the list
            Task.Run(() => {
                Thread.Sleep(3000);
                if(items !=null && items.Count>0)
                {
                    items.Add("Item " + (items.Count + 1));// Add new item on refresh
                }
                else
                {
                    items = new List<string>();
                    items.Add("Item 1");
                }
                updateListview(items);
                pullToRefresh.Refreshing = false;
            });
        }
        private void updateListview(List<string> items)
        {
            RunOnUiThread(() => {
            ArrayAdapter<string> liststring = new ArrayAdapter<string>(this, Android.Resource.Layout.SimpleExpandableListItem1, items);
            listview.Adapter = liststring;
            });

        }

For easy understand you can also replace the above method like this

private void PullToRefresh_Refresh(object sender, EventArgs e)
    {
      //Data Refresh Place 
      Task.Run(() => {
        YourBackgroundTask();
        pullToRefresh.Refreshing = false;
      });
 }

Please note that here following code is used to set the color scheme of your SwipeRefreshLayout

pullToRefresh.SetColorSchemeResources(Resource.Color.Red, Resource.Color.Blue, Resource.Color.Yellow, Resource.Color.Green);

You can remove the above list or add four color in your value -> color.xml like this

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#2c3e50</color>
    <color name="colorPrimaryDark">#1B3147</color>
    <color name="colorAccent">#3498db</color>
  <!--color for refresh-->
  <color name="Blue">#4285F4</color>
  <color name="Red">#EA4335</color>
  <color name="Green">#34A853</color>
  <color name="Yellow">#FBBC05</color>
</resources>

All are done. you can run your Android application using mobile or emulator. 

Output

Please refer the  below  linkf the complete project code.

https://github.com/Jignesh-Darji/Pull-to-Refresh-Xanarin-Demo-Using-SwipeRefreshLayout