Custom ListView and ListItem Detail with Text and Image Example in Android Apps

 Custom ListView and List Item Detail

MainActivity.java

package com.rakesht.customlistview;

import java.util.ArrayList;
import java.util.HashMap;

import android.os.Bundle;
import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;



public class MainActivity extends Activity {
ListView lv;
customArrayAdapter customarradpt;

ArrayList<HashMap<String, String>> arrlist=new ArrayList<HashMap<String,String>>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        lv=(ListView)findViewById(R.id.listView1);
       
       
        lv.setFocusable(true);

       
        for(int i=0;i<=30;i++){
            HashMap<String,String> hmap=new HashMap<String, String>();
            hmap.put("id",i+" "+" ");
           
           
            arrlist.add(hmap);
           
        }
        customarradpt=new customArrayAdapter(MainActivity.this, R.layout.list_item, arrlist);
        lv.setAdapter(customarradpt);
       
        // Click on list item to get list details
       
        lv.setOnItemClickListener(new OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
                    long arg3) {
                // TODO Auto-generated method stub
               
                Intent i=new Intent(MainActivity.this, ItemDetailsActivity.class);
                startActivity(i);
            }
        });
       
       
    }

    public class customArrayAdapter extends  ArrayAdapter<HashMap<String, String>>{

        public customArrayAdapter(Context context, int resource,
                ArrayList<HashMap<String, String>> arrlist) {
            super(context, resource, arrlist);
            // TODO Auto-generated constructor stub
        }
        public View getView(final int position,View convertView, ViewGroup parent){
           
            LayoutInflater layInflat=(LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            View listRow=layInflat.inflate(R.layout.list_item, null);
            ImageView imgv=(ImageView)listRow.findViewById(R.id.imgv);
            TextView tvTitle=(TextView)listRow.findViewById(R.id.tv_title);
            TextView tvDescription=(TextView)listRow.findViewById(R.id.tv_desc);
           
           
            return listRow;
           
        }
       
    }
   
   
   
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

}

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Custom List View"
        android:textStyle="bold|italic"
        android:textSize="20sp"
        android:scrollHorizontally="true"
        android:layout_gravity="center"
        android:layout_marginTop="10dp"
        android:textColor="@android:color/holo_blue_dark"/>

    <ListView
        android:id="@+id/listView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp" >
    </ListView>

</LinearLayout>

list_item.xml

<?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="match_parent"
    android:orientation="horizontal" >
   
   
   
    <ImageView
        android:id="@+id/imgv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher"
        />
   
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        >
       
        <TextView
            android:id="@+id/tv_title"
            android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Title :"
        android:textStyle="bold"
        android:textSize="18sp"
            />
       
        <TextView
            android:id="@+id/tv_desc"
            android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Description :"
        android:textStyle="normal"
        android:layout_marginTop="10dp"
        android:textSize="15sp"
            />
    </LinearLayout>
   

</LinearLayout>

ItemDetailsActivity.java

package com.rakesht.customlistview;

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

public class ItemDetailsActivity extends Activity{
   
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.list_item_detail);
    }

}

list_item_detail.xml

<?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="match_parent"
    android:orientation="vertical" >
   
   
   
    <ImageView
        android:id="@+id/imgv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher"
        android:layout_gravity="center"
        android:layout_marginTop="10dp"
        />
   
   
       
        <TextView
            android:id="@+id/tv_title"
            android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Title :"
        android:textStyle="bold"
        android:textSize="18sp"
        android:layout_marginLeft="8dp"
            />
       
        <TextView
            android:id="@+id/tv_desc"
            android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Description :"
        android:textStyle="normal"
        android:layout_marginTop="10dp"
        android:textSize="15sp"
        android:layout_marginLeft="10dp"
            />
   
   

</LinearLayout>

OutPut:

Custom ListView

Custom ListItem Detail