Populating Data in Xamarin.Android Carousel (SfCarousel)

28 May 20214 minutes to read

DataSource property is used to populate the collection of SfCarouselItem which can be either the collection of Image or custom view.

DataSource with collection of images

SfCarousel items can be populated with a collection of image data. For example, a user may wants to create a SfCarousel control which will display a list of images.

  • c#
  • SfCarousel carousel = new SfCarousel(this);
    	
    List<SfCarouselItem> tempCollection = new List<SfCarouselItem>();
    
    for (int i = 1; i <= 6; i++)
    {
    	SfCarouselItem sfCarouselItem = new SfCarouselItem(this);
    	sfCarouselItem.ImageName = "image" + i.ToString();
    	tempCollection.Add(sfCarouselItem);
    }
    
    carousel.SelectedIndex = 2;
    carousel.DataSource = tempCollection;
    SetContentView(carousel);

    DataSource with collection of custom view

    ContentView property used to populate with a collection of custom view.

  • c#
  • SfCarousel carousel = new SfCarousel(this);
    
    List<SfCarouselItem> tempCollection = new List<SfCarouselItem>();
    
    List<int> arrayList = new List<int>();
    arrayList.Add(Resource.Drawable.image1);
    arrayList.Add(Resource.Drawable.image2);
    arrayList.Add(Resource.Drawable.image3);
    arrayList.Add(Resource.Drawable.image4);
    
    
    for (int i = 0; i <4; i++)
    {
    	FrameLayout frameLayout = new FrameLayout(this);
    	SfCarouselItem sfCarouselItem = new SfCarouselItem(this);
    	ImageView imageView = new ImageView(this);
    	imageView.LayoutParameters = new Android.Views.ViewGroup.LayoutParams(carousel.ItemWidth, carousel.ItemHeight);
    	imageView.SetImageResource(arrayList[i]);
    	imageView.SetScaleType(ImageView.ScaleType.FitXy);
    	frameLayout.AddView(imageView);
    	sfCarouselItem.ContentView = frameLayout;
    	tempCollection.Add(sfCarouselItem);
    }
    
    carousel.SelectedIndex = 2;
    
    carousel.DataSource = tempCollection;
    
    SetContentView(carousel);

    Instead of giving the collection of desired SfCarouselItem, we can pass the single view which connects with some kind of DataSource.

    Create an adapter class by inheriting CarouselAdapter

    By extending the CarouselAdapter class, we can have Adapter support in Carousel with getItemView method.

  • c#
  • public class AdapterTestingClass:CarouselAdapter
    {
    	Context context1;
    
    	List<int> listOfArray;
    
    	public AdapterTestingClass(Context context, List<int> arrayList)
    	{
    		context1 = context;
    		listOfArray = arrayList;
    	}
    
    	public override Android.Views.View GetItemView(SfCarousel p0, int p1)
    	{
    		FrameLayout frameLayout = new FrameLayout(context1);
    		SfCarouselItem sfCarouselItem = new SfCarouselItem(context1);
    		ImageView imageView = new ImageView(context1);
    		imageView.LayoutParameters = new Android.Views.ViewGroup.LayoutParams(p0.ItemWidth, p0.ItemHeight);
    		imageView.SetImageResource(listOfArray[p1]);
    		imageView.SetScaleType(ImageView.ScaleType.FitXy);
    		frameLayout.AddView(imageView);
    		return frameLayout;
    	}
    }
  • c#
  • SfCarousel carousel = new SfCarousel(this);
    
    List<int> arrayList = new List<int>();
    arrayList.Add(Resource.Drawable.image1);
    arrayList.Add(Resource.Drawable.image2);
    arrayList.Add(Resource.Drawable.image3);
    arrayList.Add(Resource.Drawable.image4);
    
    //Adapter class initialization
    
    AdapterTestingClass testingClass = new AdapterTestingClass(this, arrayList);
    carousel.Adapter = testingClass;
    
    List<SfCarouselItem> carouselList = new List<SfCarouselItem>();
    carouselList.Add(new SfCarouselItem(this));
    carouselList.Add(new SfCarouselItem(this));
    carouselList.Add(new SfCarouselItem(this));
    carouselList.Add(new SfCarouselItem(this));
    
    carousel.DataSource = carouselList;
    
    carousel.SelectedIndex = 2;
    
    SetContentView(carousel);

    SelectedIndex

    It gets or sets the Selected Item index value of SfCarousel control to bring the particular item to center of the screen.

    NOTE

    The SelectedIndex property will be 0 by default.

  • c#
  • SfCarousel carousel = new SfCarousel(this);
    carousel.SelectedIndex=2;

    Load images from SD card or internal storage to carousel view sample available in this link.