Loading 300 images on a custom spinner with images

Question

I have a spinner that it has a custom layout with 5 imageviews and 1 textview. I would like to load it up with 80 rows, so it will display around 300 images (all images are within the app).

Is this a really bad idea?

All the images are loaded this way:

    class CustomAdapter : BaseAdapter
{
    private Context Context;
    private List<ButtonImagesTemplate> ButtonImagesTemplates;
    private LayoutInflater inflater;

    public CustomAdapter(Context context, List<ButtonImagesTemplate> ButtonImagesTemplates)
    {
        this.Context = context;
        this.ButtonImagesTemplates = ButtonImagesTemplates;
    }

    public override Object GetItem(int position)
    {
        return null;
    }

    public override long GetItemId(int position)
    {
        return position;
    }

    public override View GetView(int position, View convertView, ViewGroup parent)
    {
        if (inflater == null)
        {
            inflater = (LayoutInflater)Context.GetSystemService(Context.LayoutInflaterService);
        }

        if (convertView == null)
        {
            convertView = inflater.Inflate(Resource.Layout.SpinnerTemplateModel, parent, false);
        }

        TextView nameTxt = convertView.FindViewById<TextView>(Resource.Id.TemplateNameTextView);
        ImageView img1 = convertView.FindViewById<ImageView>(Resource.Id.TemplateImageView1);
        ImageView img2 = convertView.FindViewById<ImageView>(Resource.Id.TemplateImageView2);
        ImageView img3 = convertView.FindViewById<ImageView>(Resource.Id.TemplateImageView3);
        ImageView img4 = convertView.FindViewById<ImageView>(Resource.Id.TemplateImageView4);
        ImageView img5 = convertView.FindViewById<ImageView>(Resource.Id.TemplateImageView5);

        //BIND
        nameTxt.Text = ButtonImagesTemplates[position].Name;
        var drawable = AppCompatResources.GetDrawable(Context, ButtonImagesTemplates[position].Images[0]);
        img1.SetImageDrawable(drawable);
        img2.SetImageResource(ButtonImagesTemplates[position].Images[1]);
        img3.SetImageResource(ButtonImagesTemplates[position].Images[2]);
        img4.SetImageResource(ButtonImagesTemplates[position].Images[3]);
        img5.SetImageResource(ButtonImagesTemplates[position].Images[4]);

        return convertView;
    }

    public override int Count
    {
        get { return ButtonImagesTemplates.Count; }
    }
}

also the layout here:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="122sp">
    <LinearLayout 
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="50sp">
    <ImageView
        android:layout_width="50sp"
        android:layout_height="50sp"
        android:scaleType="centerInside"
        android:layout_weight="2"
        android:padding="10dp"
        android:layout_gravity="left"
        android:gravity="left"
        android:id="@+id/TemplateImageView1" />
        <ImageView
        android:layout_width="50sp"
        android:layout_height="50sp"
        android:scaleType="centerInside"
        android:layout_weight="2"
        android:padding="10dp"
        android:layout_gravity="left"
        android:gravity="left"
        android:id="@+id/TemplateImageView2" />
        <ImageView
        android:layout_width="50sp"
        android:layout_height="50sp"
        android:scaleType="centerInside"
        android:layout_weight="2"
        android:padding="10dp"
        android:layout_gravity="left"
        android:gravity="left"
        android:id="@+id/TemplateImageView3" />
        <ImageView
        android:layout_width="50sp"
        android:layout_height="50sp"
        android:scaleType="centerInside"
        android:layout_weight="2"
        android:padding="10dp"
        android:layout_gravity="left"
        android:gravity="left"
        android:id="@+id/TemplateImageView4" />
        <ImageView
        android:layout_width="50sp"
        android:layout_height="50sp"
        android:scaleType="centerInside"
        android:layout_weight="2"
        android:padding="10dp"
        android:layout_gravity="left"
        android:gravity="left"
        android:id="@+id/TemplateImageView5" />
</LinearLayout>
    <TextView
style="@style/MyTextStyle"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:layout_width="match_parent"
        android:layout_height="50sp"
        android:padding="10dp"
        android:layout_gravity="center"
        android:textAlignment="textStart"
        android:gravity="center"
        android:id="@+id/TemplateNameTextView" />
<View
            android:layout_width="match_parent"
            android:layout_height="@dimen/LineHeight"
            android:layout_marginTop="@dimen/LineMarginTopBottom"
            android:layout_marginBottom="@dimen/LineMarginTopBottom"
            android:layout_marginLeft="@dimen/ResourceOptionsMarginFromScreen"
            android:layout_marginRight="@dimen/ResourceOptionsMarginFromScreen"
            android:background="@color/dark_grey"/>
</LinearLayout>

I have a list with all the Resource Ids, and all the images are vector .xml files. I tried to load the images with ffimageloading but as far as I am concerned XML are not supported. I added ffimageloading.svg nubegt package and do some tests and the image was not displayed.

So what I would like to ask: is this a bad idea? Should I find a library to load the images like ffimageloading or picasso? If yes, which one?

Answer 1

If do you need load big count image i recommend you using libraries for working with images. Example : glide , picasso. Otherwise, you will experience performance problems. Example code for gllide :

 Glide.With(context)
.Load(R.drawable.resource_id)
.Into(imageView);

Also here you get the values ​​from the array, but you did not check if the number of values ​​in the array

    img2.SetImageResource(ButtonImagesTemplates[position].Images[1]);
    img3.SetImageResource(ButtonImagesTemplates[position].Images[2]);
    img4.SetImageResource(ButtonImagesTemplates[position].Images[3]);
    img5.SetImageResource(ButtonImagesTemplates[position].Images[4]);

Here you can see additional information : https://bumptech.github.io/glide/