How to add image to ListView

Question

Im trying to add some images to this ListView, but i cant find the way of doing it. I also tried making a new ListView (which i saw in YouTube), and i cant make it open another activity xD

private void populateListView() {
    // Create list of items
    String[] items = {"Apps", "Games", "Other"};

    // Build Adapter
    ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, R.layout.mainitem, items);

    // Configure the list view
    ListView list = (ListView) findViewById(R.id.listViewMain);
    list.setAdapter(adapter);

}

private void registerClickCallBack() {
    final ListView list = (ListView) findViewById(R.id.listViewMain);
    list.setOnItemClickListener(new AdapterView.OnItemClickListener() {

        @Override
        public void onItemClick(AdapterView<?> parent, View viewClicked, int position, long id) {

            if(position == 0) {
                Intent myIntent = new Intent(viewClicked.getContext(), Apps.class);
                startActivityForResult(myIntent, 0);
            }
            if(position == 1) {
                Intent myIntent = new Intent(viewClicked.getContext(), Games.class);
                startActivityForResult(myIntent, 0);
            }
            if(position == 2) {
                Intent myIntent = new Intent(viewClicked.getContext(), Other.class);
                startActivityForResult(myIntent, 0);
            }

        }
    });

}

If you know, please let me know ;)

Answer 1

Here is custom adapter for you,

public class CustomListAdapter extends BaseAdapter{


    private List<Location> locations;
    private static LayoutInflater inflator = null;


    public CustomListAdapter(List<Location> locations) {

        super();
        this.cp = 0;
        this.activity = activity;
        this.locations = locations;

        inflator = (LayoutInflater)activity.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

    }

    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return this.locations.size();
    }

    @Override
    public Object getItem(int position) {
        // TODO Auto-generated method stub
        return position;
    }

    @Override
    public long getItemId(int position) {
        // TODO Auto-generated method stub
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        // TODO Auto-generated method stub

        this.cp = position;
        View vi = convertView;

        try{

            if (convertView == null)
                vi = inflator.inflate(R.layout.activity_single_location_view, null);

            TextView locationName = (TextView) vi.findViewById(R.id.location_name);


            Location loc = locations.get(position);

            locationName.setText(loc.getName());

        }
        catch(Exception e){
            Log.i("CustomListAdapter.getView",e.toString());
            e.printStackTrace();
        }


        return vi;
    }

}

Using Custom Adatper

list = (ListView) findViewById(R.id.listViewMain);
locationListAdapter = new CustomListAdapter (this,locations);
list.setAdapter(locationListAdapter);

LocatioList.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ListView
        android:id="@+id/list"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:divider="#b5b5b5"
        android:dividerHeight="1dp"
        android:paddingTop="0dip"
        android:listSelector="@drawable/list_selector" />


</RelativeLayout>

For each row item,

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/list_selector"
    android:orientation="horizontal"
    android:padding="5dip" >


      <ImageView
            android:id="@+id/list_image"
            android:layout_width="0dip"
            android:layout_height="0dip"
            android:contentDescription="@string/news_image_title_ph"
            android:src="@drawable/place_holder_image"/>

       <TextView
        android:id="@+id/location_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/list_image"
        android:text="@string/location_name"
        android:textColor="#040404"
        android:typeface="sans"
        android:textSize="15sp"
        android:textStyle="bold"/>

        <ImageView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/arrow"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:contentDescription="@string/news_details" />


</RelativeLayout>

You can add image view as the TextView is added

Answer 2

You'll want to create a custom adapter. Try extending from BaseAdapter and implementing the interface ListAdapter

public class YourCustomAdapter extends BaseAdapter implements ListAdapter {

You'll override various methods including 'getView' where you can inflate a layout that contains your image (for that position.

Next you'll set the adapter on your ListView like: yourListView.setAdapter(new CustomAdapter());

Here is the developer guide from google. http://developer.android.com/guide/topics/ui/layout/listview.html

Answer 3

To add an image for every single row on a ListView you need to define a custom .xml file in which you have to create the layout of the single row, the way you want to show the image and the title/description. Then you have to extend the ArrayAdapter class so that you can inflate the row layout you created in the getView method you have to override when you redefine the ArrayAdapter class. So, in short:

1. Create your row.xml file like a normal layout file
2. Redefine ArrayAdapter class and in the getView method inflate the row layout defined

EDIT: take a look on this page