xamarin.android-docs/xamarin-android/SfPullToRefresh/getting-started.md

layout	title	description	platform	control	documentation
post	Getting Started | SfPullToRefresh |Xamarin.Android | Syncfusion	Learn here about getting started with Syncfusion Essential Xamarin.Android SfPullToRefresh Control, and more.	Xamarin.Android	SfPullToRefresh	ug

Getting Started with Xamarin.Android SfPullToRefresh

This section provides a quick overview for working with SfPullToRefresh in Xamarin.Android. Walk through the entire process of creating a simple application with this control.

Assembly deployment

After installing Essential Studio for Xamarin, all the required assemblies can be found in {Syncfusion Essential Studio Installed location}\Essential Studio\1{{ site.releaseversion }}\Xamarin\lib this installation folder.

e.g., C:\Program Files (x86)\Syncfusion\Essential Studio{{ site.releaseversion }}\Xamarin\lib

N> Assemblies can be found in unzipped package location in Mac.

NuGet installation

To install the required NuGet for the SfPullToRefresh control in the application, first you have to configure the NuGet packages of the Syncfusion components.

Refer to the following KB to configure the NuGet package of the Syncfusion components:

How to configure package source and install Syncfusion NuGet packages in an existing project?

The following NuGet package should be installed to use SfPullToRefresh control in the application:

Project	Required packages
Xamarin.Android	Syncfusion.Xamarin.SfPullToRefresh.Android

Adding SfPullToRefresh Reference

Syncfusion Xamarin components are available in nuget.org. To add SfPullToRefresh to your project, open the NuGet package manager in Visual Studio, and search for Syncfusion.Xamarin.SfPullToRefresh.Android,and then install it.

To know more about obtaining our components, refer to this link. Also, if you prefer to manually refer the assemblies instead of NuGet, refer the list of assemblies mentioned in the table below.

Project	Required assembly
Xamarin.Android	android\Syncfusion.Xamarin.SfPullToRefresh.Android.dll

I> Starting with v16.2.0.x, if you reference Syncfusion assemblies from trial setup or from the NuGet feed, you also have to include a license key in your projects. Please refer to this link to know about registering Syncfusion license key in your Xamarin application to use our components.

Create a sample application with SfPullToRefresh

SfPullToRefresh control can be configured entirely in C# code. To create a sample application for this control, follow the topics:

In this walk through, you will create a new application with SfPullToRefresh.

• Creating the project
• Adding SfPullToRefresh in Xamarin.Android
• Adding a simple layout as the PullableContent
• Refreshing the view
• TransitionType Customization
• Final Output of the sample
• Sample Link

Creating the project

Create a new Android application in Xamarin Studio or Visual Studio for Xamarin.Android.

Adding SfPullToRefresh using designer page

1. Add a new xaml file inside the layout folder.
2. Open the newly added file and switch to designer tab.
3. Drag the SfPullToRefresh control from toolbox and drop it into the designer page. Preview will not be shown since it is a hosting control. You can only see the PullToRefresh when deployed in the device.
4. Open the properties window of SfPullToRefresh and set the required properties.

{% tabs %} {% highlight axml %}

<Syncfusion.SfPullToRefresh.SfPullToRefresh android:minWidth="25px" android:minHeight="25px" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/sfPullToRefresh1" custom:transitionType="push" custom:progressStrokeColor="@android:color/black" custom:progressBackgroundColor="@android:color/blue"/> {% endhighlight %}

{% highlight c# %} using Syncfusion.SfDataGrid; using Syncfusion.SfPullToRefresh; namespace Designer_PullToRefresh { [Activity(Label = "Designer_PullToRefresh", MainLauncher = true, Icon = "@mipmap/icon")] public class MainActivity : Activity { SfDataGrid sfDataGrid; SfPullToRefresh sfPullToRefresh; OrderInfoRepository viewModel; protected override void OnCreate(Bundle savedInstanceState) { base.OnCreate(savedInstanceState);

        // Set our view from the "main" layout resource
        SetContentView(Resource.Layout.Main);
        viewModel = new OrderInfoRepository();
        sfDataGrid = new SfDataGrid(this);
        sfDataGrid.ItemsSource = viewModel.OrderInfoCollection;
        sfPullToRefresh = FindViewById<SfPullToRefresh>(Resource.Id.sfPullToRefresh1);
        sfPullToRefresh.PullableContent = sfDataGrid;
    }
}

}

{% endhighlight %} {% endtabs %}

You can download the entire source code for this sample here.

Refer this link to know the properties that can be configured using designer for SfPullToRefresh.

Adding SfPullToRefresh in Xamarin.Android using C# code

1. Add the required assembly references to the project as mentioned in the Assembly deployment section or install the NuGet as mentioned in the NuGet installation section.

2. Import SfPullToRefresh control under the namespace Syncfusion.SfPullToRefresh.

3. Create an instance of SfPullToRefresh control and set as the ContentView of the Activity. Refer to the following code example to add this control to the application:

{% tabs %} {% highlight c# %}

using Syncfusion.SfPullToRefresh;

public class MainActivity : Activity { SfPullToRefresh pullToRefresh;

protected override void OnCreate (Bundle bundle) 
{
    base.OnCreate (bundle); 
    pullToRefresh = new SfPullToRefresh (this); 
    SetContentView (pullToRefresh); 
} 

}

{% endhighlight %} {% endtabs %}

Adding a simple layout as the PullableContent

Any view can be added as the pullable content using the SfPullToRefresh.PullableContent property to refresh it. Refer to the following code example in which a simple linear layout is added as pullable content:

{% tabs %} {% highlight c# %}

//MainActivity.cs

protected override void OnCreate(Bundle bundle) { .... LinearLayout linearLayout = (LinearLayout)LayoutInflater.Inflate(Resource.Layout.pullToRefresh, null); //For Axml you can get the LinearLayout from axml using Identity name of the view. LinearLayout linearLayout = FindViewById(Resource.id.linearLayout); //Setting the PullableContent of the SfPullToRefresh. pullToRefresh.PullableContent = linearLayout; ....

}

{% endhighlight %}

{% highlight xml %}

//pullToRefresh.xml

{% endhighlight %}

{% endtabs %}

Refreshing the view

To refresh the view, hook the SfPullToRefresh.Refreshing event. The SfPullToRefresh.Refreshing event will be fired, once the pulling progress reaches 100% and touch is released. You can do the required operations to refresh the view and once the view is refreshed, set the RefreshingEventArgs.Refreshed as true to stop the refreshing animation.

Refer to the following code example illustrating hooking of the SfPullToRefresh.Refreshing event and refreshing the view:

{% tabs %} {% highlight c# %}

public class MainActivity : Activity { ImageView weatherImage; TextView weatherData; Random random; string[] temperatures = new string[] { "22.01°", "23.11°", "22.50°", "22.77°", "22.20°", "22.00°", "24.01°" }; int[] weatherImages = new int[] { Resource.Drawable.Cloudy, Resource.Drawable.Humid, Resource.Drawable.Rainy, Resource.Drawable.Warm, Resource.Drawable.Windy };

protected override void OnCreate(Bundle bundle)
{
    ....
    weatherImage = linearLayout.FindViewById<ImageView>(Resource.Id.weatherImage);
    weatherData = linearLayout.FindViewById<TextView>(Resource.Id.weatherData);
    //Hooking the Refreshing event.
    pullToRefresh.Refreshing += PullToRefresh_Refreshing;
    random = new Random();
    ....
}

private async void PullToRefresh_Refreshing(object sender, RefreshingEventArgs e)
{
    await Task.Delay(3000);
    weatherImage.SetImageResource(weatherImages[random.Next(0, 4)]);
    weatherData.Text = temperatures[random.Next(1, 5)].ToString() + " degrees";
    //Setting the e.Refreshed = true, to indicate that the view is refreshed and the SfPullToRefresh can stop the refreshing animation.
    e.Refreshed = true;
}

}

{% endhighlight %} {% endtabs %}

TransitionType customization

SfPullToRefresh support two types of transitions. By default, TransitionType.SlideOnTop is enabled.

Refer to the topic TransitionType under Built-in Customization section for more details regarding SfPullToRefresh.TransitionType property.

Refer to the following code example to switch to the TransitionType.Push mode of transition.

{% tabs %} {% highlight c# %}

protected override void OnCreate(Bundle bundle) { .... pullToRefresh.TransitionType = TransitionType.Push; .... }

{% endhighlight %}

{% highlight axml %} <Syncfusion.SfPullToRefresh.SfPullToRefresh xmlns:app="http://schemas.android.com/apk/res-auto" android:minWidth="25px" android:minHeight="25px" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/sfPullToRefresh1" app:transitionType="push"/> {% endhighlight %} {% endtabs %}

Final output of the sample

The following GIF demonstrates the final output of the sample:


Sample link

You can download the source code of this sample here.

Properties configured using designer

Properties	Attribute name
PullingThreshold	pullingThreshold
ProgressStrokeWidth	progressStrokeWidth
ProgressStrokeColor	progressStrokeColor
ProgressBackgroundColor	progressBackgroundColor
ProgressShadowColor	progressShadowColor
RefreshContentRadius	refreshContentRadius
RefreshContentThreshold	refreshContentThreshold
TransitionType	transitionType