How can I use this library (smarteist Android-Image-Slider) with xamarin android?

Question

I am Beginner in xamarin and trying to use this library (smarteist Android-Image-Slider) on android xamarin .

Library Sources:

NuGet:

https://www.nuget.org/packages/Karamunting.Android.Smarteist.AutoImageSlider/1.3.2

GitHub:

https://github.com/smarteist/Android-Image-Slider

It is working on android xamarin but I don't know how to use it, there is only android studio sample.

This class "SliderAdapterExample" is working fine now

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Smarteist.AutoImageSlider;
using BumpTech.GlideLib;


namespace PriceChecker
{
    public class SliderAdapterExample : SliderViewAdapter
    {
        private Context context;
        private int mCount;
        public SliderAdapterExample(Context context)
        {
            this.context = context;
        }

        public void setCount(int count)
        {
            this.mCount = count;
        }
        public int getCount()
        {
            //slider view count could be dynamic size
            return mCount;
        }

        public override int Count => 4;


        public override void OnBindViewHolder(Java.Lang.Object viewHolder, int position)
        {
            SliderAdapterVH _viewHolder = (SliderAdapterVH)viewHolder;
            _viewHolder.textViewDescription.Text = "This is slider item " + position;

            switch (position)
            {
                case 0:
                    Glide.With(_viewHolder.itemView)
                            .Load("https://images.pexels.com/photos/218983/pexels-photo-218983.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260")
                            .Into(_viewHolder.imageViewBackground);
                    break;
                case 1:
                    Glide.With(_viewHolder.itemView)
                            .Load("https://images.pexels.com/photos/747964/pexels-photo-747964.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260")
                            .Into(_viewHolder.imageViewBackground);
                    break;
                case 2:
                    Glide.With(_viewHolder.itemView)
                            .Load("https://images.pexels.com/photos/929778/pexels-photo-929778.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260")
                            .Into(_viewHolder.imageViewBackground);
                    break;
                default:
                    Glide.With(_viewHolder.itemView)
                            .Load("https://images.pexels.com/photos/218983/pexels-photo-218983.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260")
                            .Into(_viewHolder.imageViewBackground);
                    break;

            }
        }

        public override Java.Lang.Object OnCreateViewHolder(ViewGroup parent)
        {
            View inflate = LayoutInflater.From(parent.Context).Inflate(Resource.Layout.image_slider_layout_item, null);
            return new SliderAdapterVH(inflate);
        }


        class SliderAdapterVH : SliderViewAdapter.ViewHolder
        {

            public View itemView;
            public ImageView imageViewBackground;
            public TextView textViewDescription;

            public SliderAdapterVH(View itemView) : base(itemView)
            {

                imageViewBackground = itemView.FindViewById<ImageView>(Resource.Id.iv_auto_image_slider);
                textViewDescription = itemView.FindViewById<TextView>(Resource.Id.tv_auto_image_slider);
                this.itemView = itemView;

            }
        }
    }
}

But now I have many errors in the Activity in the image

image

how far did you get? were you not even able to include the nuget package in your application, or did u get stuck on the class extention? — Joachim Haglund, Oct 30 '19 at 12:30
I already install the nuget package and its working in the interface but the code behind and the adapter class is different in android xamarin — husham14, Oct 30 '19 at 13:38

Joachim Haglund · Accepted Answer · 2019-10-31T09:22:13.837

it is unfortunate when the distributor does not provide sample code for xamarin to their nuget package. Usually the code looks pretty similar though, so you can guess/try your way there using the android code samples.

start by extending the class

public class SliderAdapterExample : SliderViewAdapter<SliderAdapterExample.SliderAdapterVH> {

}

and then you can type "public override" inside it and visual studio will supply a list of possible methods to override, then you pick the one that seems to match the one in the android code sample. Generally in Xamarin the methods will start with a capital letter as opposed to android where they start with a lowercase letter.

you can also type "SliderViewAdapter" into a class where you have imported the library and then command click on it to open the nuget implementation abstract, which can give you some more information on which parts are available and how they are named and should be implemented.

recreated the sample code in xamarin like this:

using System;
using Android.Content;
using Android.Views;
using Android.Widget;
using BumpTech.GlideLib;
using Java.Lang;
using Smarteist.AutoImageSlider;

namespace testproject.Droid
{
    public class testclass :  SliderViewAdapter
    {
        private Context context;
        public testclass(Context context)
        {
            this.context = context;
        }

        public override int Count => 4;

        public override void OnBindViewHolder(Java.Lang.Object viewHolder, int position)
        {
            SliderAdapterVH _viewHolder = (SliderAdapterVH)viewHolder;
            _viewHolder.textViewDescription.Text = "This is slider item " + position;

            switch (position)
            {
                case 0:
                    Glide.With(_viewHolder.itemView)
                            .Load("https://images.pexels.com/photos/218983/pexels-photo-218983.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260")
                            .Into(_viewHolder.imageViewBackground);
                    break;
                case 1:
                    Glide.With(_viewHolder.itemView)
                            .Load("https://images.pexels.com/photos/747964/pexels-photo-747964.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260")
                            .Into(_viewHolder.imageViewBackground);
                    break;
                case 2:
                    Glide.With(_viewHolder.itemView)
                            .Load("https://images.pexels.com/photos/929778/pexels-photo-929778.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260")
                            .Into(_viewHolder.imageViewBackground);
                    break;
                default:
                    Glide.With(_viewHolder.itemView)
                            .Load("https://images.pexels.com/photos/218983/pexels-photo-218983.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260")
                            .Into(_viewHolder.imageViewBackground);
                    break;

            }
        }

        public override Java.Lang.Object OnCreateViewHolder(ViewGroup parent)
        {
            View inflate = LayoutInflater.From(parent.Context).Inflate(Resource.Layout.image_slider_layout_item, null);
            return new SliderAdapterVH(inflate);
        }


        class SliderAdapterVH : SliderViewAdapter.ViewHolder
        {

            public View itemView;
            public ImageView imageViewBackground;
            public TextView textViewDescription;

        public SliderAdapterVH(View itemView) : base(itemView)
        {
            imageViewBackground = itemView.FindViewById(Resource.Id.iv_auto_image_slider);
            textViewDescription = itemView.FindViewById(Resource.Id.tv_auto_image_slider);
            this.itemView = itemView;
        }
    }
}
}

the problem start from here "SliderViewAdapter" it showing me error — husham14, Oct 31 '19 at 08:45
check my edit. recreated the sample code from gitthub in xamarin — Joachim Haglund, Oct 31 '19 at 09:23
Thank you,I just changed some lines in your code and it is working fine.But now I have new new errors in the activity :( .check my edit — husham14, Oct 31 '19 at 12:08
those methods are properties in the xamarin binding, so instead of x.SliderAdapter(y) you write x.SliderAdapter = y. this goes for all the errors in the image — Joachim Haglund, Oct 31 '19 at 12:38
oh :| ,thank you very much now every thing works very fine.I will share the code down below — husham14, Oct 31 '19 at 14:24

score 0 · Answer 2 · answered Oct 31 '19 at 14:38

thanks to @Joachim Haglund here is the full answer

MyActivity Layout:

<android.widget.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"
    tools:context=".MyActivity"
    android:id="@+id/my_activity">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <com.smarteist.autoimageslider.SliderView
                android:id="@+id/imageSlider1"
                android:layout_width="0dip"
                android:layout_height="match_parent"
                app:sliderAnimationDuration="600"
                app:sliderAutoCycleDirection="back_and_forth"
                app:sliderAutoCycleEnabled="true"
                app:sliderCircularHandlerEnabled="true"
                app:sliderIndicatorAnimationDuration="600"
                app:sliderIndicatorGravity="center_horizontal|bottom"
                app:sliderIndicatorMargin="15dp"
                app:sliderIndicatorOrientation="horizontal"
                app:sliderIndicatorPadding="3dp"
                app:sliderIndicatorRadius="2dp"
                app:sliderIndicatorSelectedColor="#5A5A5A"
                app:sliderIndicatorUnselectedColor="#FFF"
                app:sliderScrollTimeInSec="1"
                app:sliderStartAutoCycle="true"
                android:layout_weight=".5"/>

        </LinearLayout>

</android.widget.RelativeLayout>

SliderAdapterExample Class:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Smarteist.AutoImageSlider;
using BumpTech.GlideLib;


namespace MyApp
{
    public class SliderAdapterExample : SliderViewAdapter
    {
        private Context context;
        private int mCount;
        public SliderAdapterExample(Context context)
        {
            this.context = context;
        }

        public void setCount(int count)
        {
            this.mCount = count;
        }
        public int getCount()
        {
            //slider view count could be dynamic size
            return mCount;
        }

        public override int Count => 4;


        public override void OnBindViewHolder(Java.Lang.Object viewHolder, int position)
        {
            SliderAdapterVH _viewHolder = (SliderAdapterVH)viewHolder;
            _viewHolder.textViewDescription.Text = "This is slider item " + position;

            switch (position)
            {
                case 0:
                    Glide.With(_viewHolder.itemView)
                            .Load("https://images.pexels.com/photos/218983/pexels-photo-218983.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260")
                            .Into(_viewHolder.imageViewBackground);
                    break;
                case 1:
                    Glide.With(_viewHolder.itemView)
                            .Load("https://images.pexels.com/photos/747964/pexels-photo-747964.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260")
                            .Into(_viewHolder.imageViewBackground);
                    break;
                case 2:
                    Glide.With(_viewHolder.itemView)
                            .Load("https://images.pexels.com/photos/929778/pexels-photo-929778.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260")
                            .Into(_viewHolder.imageViewBackground);
                    break;
                default:
                    Glide.With(_viewHolder.itemView)
                            .Load("https://images.pexels.com/photos/218983/pexels-photo-218983.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260")
                            .Into(_viewHolder.imageViewBackground);
                    break;

            }
        }

        public override Java.Lang.Object OnCreateViewHolder(ViewGroup parent)
        {
            View inflate = LayoutInflater.From(parent.Context).Inflate(Resource.Layout.image_slider_layout_item, null);
            return new SliderAdapterVH(inflate);
        }


        class SliderAdapterVH : SliderViewAdapter.ViewHolder
        {

            public View itemView;
            public ImageView imageViewBackground;
            public TextView textViewDescription;

            public SliderAdapterVH(View itemView) : base(itemView)
            {

                imageViewBackground = itemView.FindViewById<ImageView>(Resource.Id.iv_auto_image_slider);
                textViewDescription = itemView.FindViewById<TextView>(Resource.Id.tv_auto_image_slider);
                this.itemView = itemView;


            }
        }
    }
}

MyActivity:

using System;
using System.Collections.Generic;
using System.Drawing;
using System.Linq;
using System.Text;
using Android.App;
using Android.OS;
using Android.Widget;
using Smarteist.AutoImageSlider;

namespace MyApp
{
    [Activity(Label = "MyActivity", MainLauncher = true)]
    public class MyActivity: Activity
    {

        SliderView sliderView;

        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
            SetContentView(Resource.Layout.my_activity);

            sliderView = FindViewById<SliderView>(Resource.Id.imageSlider1);

            SliderAdapterExample adapter = new SliderAdapterExample(this);

            adapter.setCount(25);

            sliderView.SliderAdapter = adapter;

            sliderView.SetIndicatorAnimation(IndicatorAnimations.Slide); //set indicator animation by using SliderLayout.IndicatorAnimations. :WORM or THIN_WORM or COLOR or DROP or FILL or NONE or SCALE or SCALE_DOWN or SLIDE and SWAP!!
            sliderView.SetSliderTransformAnimation(SliderAnimations.CubeInRotationTransformation);
            sliderView.AutoCycleDirection =SliderView.AutoCycleDirectionBackAndForth;
            sliderView.IndicatorSelectedColor = Android.Graphics.Color.White;
            sliderView.IndicatorUnselectedColor = Android.Graphics.Color.Gray;
            sliderView.ScrollTimeInSec=4;
            //sliderView.AutoCycleDirection = SliderAnimations.CubeInRotationTransformation;
            sliderView.StartAutoCycle();

        }
    }
}

How can I use this library (smarteist Android-Image-Slider) with xamarin android?

2 Answers2