How to create a custom ViewHolder to spinner like in a RecyclerView?

Question

I want to create the following-like layout spinner -

what I currently have -

my code -

private MiniProductModel selectedProduct;
private Map<String, List<String>> selectedProductAttributesMap;
.
.
.
.
@Override
    public void setProductPurchaseAttributes() {
        selectedProductAttributesMap = selectedProduct.getAttributesList();
        int startingIndex = 6;
        if (!isProductAvailable) return;
        for (Map.Entry<String, List<String>> entry : selectedProductAttributesMap.entrySet()) {
            //creating the linear layout
            LinearLayout linearLayout = new LinearLayout(this);
            linearLayout.setOrientation(LinearLayout.HORIZONTAL);
            //creating the layout params
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
            params.setMargins(25,30,25,0);
            linearLayout.setLayoutParams(params);
            //creating the text view
            TextView textView = new TextView(this);
            textView.setText(entry.getKey().concat(":"));
            textView.setLayoutParams(params);
            //creating the spinner
            Spinner spinner = new Spinner(this);
            spinner.setLayoutParams(params);
            ArrayAdapter<String> adapter = new ArrayAdapter<>(getApplicationContext(), android.R.layout.simple_spinner_dropdown_item, entry.getValue());
            adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
            spinner.setAdapter(adapter);
            //adding to the linear layout
            linearLayout.addView(textView);
            linearLayout.addView(spinner);
            //adding linear layout to root view
            productDetailsViewGroup.addView(linearLayout, startingIndex);
            startingIndex++;
        }
    }

I am using the default array adapter which gives me a list of ViewHolders that contain only a TextView.

I am looking to have the ability to edit each holder as I want, so I can display images like the picture in eBay.

How can I do that given my code?

Answer 1

You need to use a custom array adapter for your class:

public class SpinnerArrayAdapter extends ArrayAdapter<Spinnermodelwithimage>
{
    int groupid;
    public View v;
    public List<Spinnermodelwithimage> list ;
    Context _activity;
    LayoutInflater inflator;

    public SpinnerArrayAdapter(@NonNull Context context, @LayoutRes int resource, @IdRes int textViewResourceId, @NonNull List <Spinnermodelwithimage>list) {
        super(context, resource, textViewResourceId, list);
        this._activity=context;
        this.list=list;
        this.inflator=(LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        this.groupid=resource;
    }

    public View getView1(int position, View convertView, ViewGroup parent ){
        View itemView=inflator.inflate(groupid,parent,false);
        ImageView imageView=(ImageView)itemView.findViewById(R.id.imagespinnertribe);
        TextView textView=(TextView)itemView.findViewById(R.id.company);
        if (list.get(position).getImagepath().isEmpty())
        {
            imageView.setVisibility(View.GONE);

        }

        else {
            imageView.setVisibility(View.VISIBLE);
            Glide.with(_activity).load(list.get(position).getImagepath()).into(imageView);
        }

        textView.setText(list.get(position).getName());
        return itemView;
    }

    @Override
    public View getView(int pos, View convertView, ViewGroup parent){
        this.v = convertView;
        if(v==null) {
            LayoutInflater vi = (LayoutInflater)_activity.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            v=vi.inflate(R.layout.spinner_item, null);
        }



        return v;
    }
    @Override
    public View getDropDownView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
        return getView1(position,convertView,parent);
    }

}
`

spinner model

public class Spinnermodelwithimage {
    private String name;
    private String imagepath;

    public void setImagepath(String imagepath) {
        this.imagepath = imagepath;
    }

    public String getImagepath() {
        return imagepath;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getName() {
        return name;
    }
}

spinner_item_new

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:gravity="center_vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <ImageView
            android:layout_width="50dp"
            android:visibility="gone"
            android:src="@drawable/logo"
            android:id="@+id/imagespinnertribe"
            android:layout_height="50dp"
            />
        <TextView
            android:id="@+id/company"
            android:visibility="gone"
            android:layout_toRightOf="@+id/imagespinnertribe"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:layout_width="match_parent"
            android:layout_height="40dp"

            android:layout_marginTop="2dip"
            android:gravity="bottom"
            android:textSize="15dp"

            android:padding="3dip"

            android:textColor="@color/black"
            />
    </RelativeLayout>

    <ImageView
        android:layout_width="match_parent"
        android:background="@color/black"
        android:id="@+id/imageLine"
        android:visibility="gone"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_height="1dp" />

</LinearLayout>

spinner_item

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"

    >

    <TextView
        android:layout_width="match_parent"
        android:textSize="15sp"
        android:paddingLeft="5dp"
        android:visibility="invisible"
        android:id="@+id/textspinner"
        android:gravity="bottom"
        android:textColor="@color/black"
        android:padding="5dip"
        android:layout_height="50dp" />
</LinearLayout>

and in your calling activity

adapter=new SpinnerArrayAdapter(getContext(),R.layout.spinner_item_new,R.id.company,listspinnerwithimage);
        mspinner.setAdapter(adapter);