Android Custom Layout for listview

Question

I am using a list view as follows

String[] Shows = new String[] { "Dexter", "Breaking Bad", "The Big Bang Theory", "Leverage"};
ListView tv_show_list = (ListView) view_tvshowAddNew.findViewById(R.id.lv_tv_show_list);

ArrayAdapter<String> showNameAdapter = new ArrayAdapter<String>(getActivity(), R.layout.tv_show_each_show_name, Shows);

tv_show_list.setAdapter(showNameAdapter);

Now my tv_show_each_show_name XML is like below

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="58dp" 
    android:background="@drawable/ic_launcher" 

    > 
</TextView>

What I want to do now is make each show name associated with a picture and maybe put that in a map, like :-

Map mMap = new HashMap();
mMap.put("Dexter", "imageDexter.png");
mMap.put("Breaking Bad", "imageDexter.png");

and while loading the list view i will show the name from this map and set the associated image background taking the image name from this map and loading it from the drawable folder.

How to do this?

Hopping like a layout as follows

Answer 1

Here is a tutorial for your custom Listview

Now for setting different images with respect to each item ,inside your getView() method of adapter

@Override
  public View getView(int position, View convertView, ViewGroup parent) {
    LayoutInflater inflater = (LayoutInflater) context
        .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    View rowView = inflater.inflate(R.layout.rowlayout, parent, false);
    TextView textView = (TextView) rowView.findViewById(R.id.label);
    ImageView imageView = (ImageView) rowView.findViewById(R.id.icon);
    textView.setText(values[position]);
    // Change the icon for Windows and iPhone
    String s = values[position];
    imageView.setImageResource(images[position]);
    return rowView;
  }

Where your image array will be like this

 int[] images={R.drawable.green_button,R.drawable.ic_launcher,R.drawable.shape,R.drawable.splash};

Also make sure your the length of your 'images' array must be same as your items in list.

Answer 2

Look at this Adding 2 buttons to the text view You basically need a custom adapter for your list and need to override the getView method of it, where you can specify the item's UI layout.

For the code you've posted, instead of using an instance of ArrayAdapter, create your own adapter derived from ArrayAdapter YourData should be a class to contain reference to item's text and item's image.

Now override the getView method in your custom Adapter class. The method is used to populate the UI for an item using the position argument from

View getView(int position, View convertView, ViewGroup parent)

You can get that item using ArrayAdapter.getItem

For more details refer to the link above and http://developer.android.com/reference/android/widget/ArrayAdapter.html