Spinner with Text and Icons

Question

In my app, I have a Spinner, that can be filled with two Arrays of Strings, stored in my values/strings.xml resource. Depending on the state of two RadioButtons, the values from the correct Array is selected and my Spinner gets filled.

For each Array of Strings, I have an Array of Icons which have the same size. All of my icons start with an "A" and are followed by a number. I can't change this, it's stored like that in the database. I have an Array in Strings.xml with all the numbers I require to draw the icons. All the actual icons can be found in the drawable resource folder.

Now I want to show the corresponding item next to the String from the list which was selected by the Spinner. When an item gets selected, I just need to see the text.

I have searched the Internet for a good tutorial, but with what I have found I have not succeeded in doing this. I'm just beginning in Android programming so I think I need a little help. I hope that somebody can guide me in the right direction.

I put my String Array within actual Arrays, such as:

// Arrays with each function in text
arbeiderjobs = getResources().getStringArray(R.array.arbeiders);
bediendejobs = getResources().getStringArray(R.array.bediende);

// Arrays with each function ID
arbeiderjobsid = getResources().getIntArray(R.array.arbeidersid);
bediendejobsid = getResources().getIntArray(R.array.bediendeid);

When one of the RadioButtons gets selected, I use the following event handler code:

// RadioButton 'Arbeider': If a value gets chosen in this list, 
// the corresponding ID is put in the below variable 
RadioButton rbArbeider = (RadioButton) findViewById(R.id.rbArbeider);
rbArbeider.setOnCheckedChangeListener(new OnCheckedChangeListener() 
{
  public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) 
  {
    if (isChecked)
    {
      showSpinner(arbeiderjobs, R.id.cmbFuncties);
      s.setOnItemSelectedListener(new OnItemSelectedListener() 
      {
        public void onItemSelected(AdapterView<?> parentView, 
                                   View selectedItemView, int position, long id)
        {
          functie = arbeiderjobsid[position];
          statuut = 1;
          visible = false;  
        }
      });

      visible = true;
    }
  } // s.setOnItemSelectedListener

}); // rbArbeider.setOnCheckedChangeListener

This is my showSpinner method:

private void showSpinner(String [] jobs, int id)
{    
  MyCustomAdapter adapter = new MyCustomAdapter
  (
    FindJob.this, 
    R.layout.spinnerrow, 
    jobs
  );

  adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);

  for (int i = 0; i < jobs.length; i++)
  {
    adapter.add(jobs[i]);
  }

  Spinner s = (Spinner) findViewById(id);
  s.setClickable(true);
  s.setAdapter(adapter);
}

I've made a custom adapter based on this tutorial, but I'm kind of tangled in it... I need some help:

public class MyCustomAdapter extends ArrayAdapter<String>
{

  public MyCustomAdapter(Context context, int textViewResourceId, 
                         String[] objects) 
  {
    super(context, textViewResourceId, objects);
  }

  @Override
  public View getDropDownView(int position, View convertView, ViewGroup parent) 
  {
    return getCustomView(position, convertView, parent, 
                         arbeiderjobs, arbeiderjobsid);
  }

  @Override
  public View getView(int position, View convertView, ViewGroup parent) 
  {
    return getCustomView(position, convertView, parent, 
                         arbeiderjobs, arbeiderjobsid);
  }

  public View getCustomView(int position, View convertView, ViewGroup parent,                                                         
                            String jobs[], int jobsid[]) 
  {
    // return super.getView(position, convertView, parent);

    LayoutInflater inflater = getLayoutInflater();
    View row = inflater.inflate(R.layout.spinnerrow, parent, false);
    TextView label = (TextView) findViewById(R.id.functie);
    label.setText(jobs[position]);

    ImageView icon = (ImageView) row.findViewById(R.id.icon);

    String uri = "@drawable/a" + jobsid[position];
    int imageResource = getResources().getIdentifier
    (  
      uri, 
      null, 
      getPackageName()
    );
    icon.setImageResource(imageResource);

    if (visible)
    {
      icon.setVisibility(View.GONE);
    }

    return row;
  }

}

This is what I would want it to look like:

Answer 1

You need to implement a custom Adapter and define a custom layout for the list items. Check this tutorial.

UPDATE

Try the following. I haven't tested the code but I think it should work like that.

public class MyCustomAdapter extends ArrayAdapter<String>{

    private String[] mIcons;

    public MyCustomAdapter(Context context, int textViewResourceId,
    String[] objects, String[] icons) {
        super(context, textViewResourceId, objects);
        mIcons = icons;
    }

    @Override
    public View getDropDownView(int position, View convertView, ViewGroup parent) {
        return getCustomView(position, convertView, parent);
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        return getCustomView(position, convertView, parent);
    }

    public View getCustomView(int position, View convertView, ViewGroup parent) {

       LayoutInflater inflater=getLayoutInflater();
       View row=inflater.inflate(R.layout.spinnerrow, parent, false);
       TextView label=(TextView) findViewById(R.id.functie);
       label.setText(getItem(position);

       ImageView icon=(ImageView)row.findViewById(R.id.icon);

       String uri = "@drawable/a" + mIcons[position];
       int imageResource = getResources().getIdentifier(uri, null, getPackageName());
       icon.setImageResource(imageResource);

       return row;
    }
}