List View with Image

1. Create a new project in the Eclipse IDE from File ⇒ Android Application Project and fill all required details. I named my main activity  as MainActivity.java

package com.androidtutorialpoint;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.SimpleAdapter;
import android.widget.AdapterView.OnItemClickListener;

public class MainActivity extends Activity {

 // Array of strings storing Players names
 String[] name = new String[] {

 "Rahul Dravid", "Sachin Tendulkar", "Virender sehwag", "Yuvraj singh",
   "Zaheer khan"

 };

 // Array of integers points to images stored in /res/drawable/
 int[] image = new int[] { R.drawable.rahuldravid,
   R.drawable.sachintendulkar, R.drawable.virendersehwag,
   R.drawable.yuvrajsingh, R.drawable.zaheerkhan,

 };

 /** Called when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);

  // Each row in the list stores name, image
  List<hashmap <string="" string="">> aList = new ArrayList<hashmap <string="" string="">>();

  for (int i = 0; i < 5; i++) {
   HashMap<string string=""> hm = new HashMap<string string="">();
   hm.put("name", "" + name[i]);

   hm.put("image", Integer.toString(image[i]));
   aList.add(hm);
  }

  // Keys used in Hashmap
  String[] from = { "image", "name" };

  // Ids of views in listview_layout
  int[] to = { R.id.imageView1, R.id.textView1 };

  // Instantiating an adapter to store each items
  // R.layout.listview_layout defines the layout of each item
  SimpleAdapter adapter = new SimpleAdapter(getBaseContext(), aList,
    R.layout.listrow, from, to);

  // Getting a reference to listview of main.xml layout file
  ListView listView = (ListView) findViewById(R.id.listView1);

  // Setting the adapter to the listView
  listView.setAdapter(adapter);

  listView.setOnItemClickListener(new OnItemClickListener() {

   @Override
   public void onItemClick(AdapterView parent, View view,
     int position, long id) {
    // TODO Auto-generated method stub

    if (position == 0) {
     Intent i = new Intent(getApplicationContext(),
       Newpage1.class);

     startActivity(i);
    }
    if (position == 1) {
     Intent i = new Intent(getApplicationContext(),
       Newpage2.class);

     startActivity(i);
    }
    if (position == 2) {
     Intent i = new Intent(getApplicationContext(),
       Newpage3.class);

     startActivity(i);
    }
    if (position == 3) {
     Intent i = new Intent(getApplicationContext(),
       Newpage4.class);

     startActivity(i);
    }
    if (position == 4) {
     Intent i = new Intent(getApplicationContext(),
       Newpage5.class);

     startActivity(i);
    }

   }
  });
 }
}

   

    

2. In order to create an  list view, we need two xml layout files. First one is for main list view, second one for list view row . Open your activity_main.xml

In activity_main.xml

<scrollview xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/scrollView1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <linearlayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <listview
            android:id="@+id/listView1"
            android:layout_width="match_parent"
            android:layout_height="771dp"
            android:cachecolorhint="#00000000" >
        </listview>
    </linearlayout>

</scrollview>

In list_row

Additionally for singlelist item i create 5 separate class and single xml file.

<?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="#fce1d8"> 

       <ImageView
           android:id="@+id/imageView1"
           android:layout_width="80dp"
           android:layout_height="80dp"
           android:layout_alignParentLeft="true"
           android:layout_alignParentTop="true"
           android:layout_margin="5dp"
           android:layout_marginBottom="5dp" /> 

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="3dp"
        android:src="@drawable/arrow" /> 

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="34dp"
        android:layout_toRightOf="@+id/imageView1"
        android:text="Name"
        android:textAppearance="?android:attr/textAppearanceMedium" /> 

</RelativeLayout> 

The xml page as nextpage.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="182dp"
        android:text="Welcome"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</RelativeLayout> 

3.And class file as 

package com.androidtutorialpoint;

import android.app.Activity;
import android.os.Bundle;

public class Newpage2 extends Activity {

  @Override
 protected void onCreate(Bundle savedInstanceState) {
  // TODO Auto-generated method stub
  super.onCreate(savedInstanceState);
  setContentView(R.layout.nextpage);
 }
 }

4.Add in manifest as

<activity android:name="com.androidtutorialpoint.Newpage1" />

The output screen will be

Download Code here