Android Custom ListView with Images

and text example

Create an android application project named “CustomListViewExampleApp”.

Step 2 : Creating Layout

Change res ->layout -> activity_main.xml as below:

<?xml version="1.0" encoding="utf-8"?><RelativeLayout

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/activity_main"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:paddingBottom="@dimen/activity_vertical_margin"

android:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

tools:context="com.java2blog.customlistviewexampleapp.MainActivity">

<ListView

android:id="@+id/android:list"

android:layout_width="match_parent"

android:layout_height="wrap_content"

/>

</RelativeLayout>
Step 3: Creating layout for Row

As We have declared ListView widget in activity_main.xml. Now we need to provide layout for individual
row.

 Go to res -> layout

 right click on layout

 Click on New -> File.

 Create a file named “row_item.xml” and paste below code in row_item.xml.

<?xml version="1.0" encoding="utf-8"?>

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent" >

<ImageView

android:layout_rowSpan="2"

android:layout_width="80dp"

android:layout_height="70dp"

android:scaleType="fitXY"

android:id="@+id/imageViewFlag"

android:layout_row="0"

android:layout_column="0" />

 
<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_columnWeight="1"

android:layout_marginLeft="10dp"

android:textSize="30dp"

android:textColor="#1E90FF"

android:id="@+id/textViewCountry"

android:layout_row="0"

android:layout_column="1" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_columnWeight="1"

android:layout_marginLeft="10dp"

android:textSize="20dp"

android:textColor="#4B0082"

android:id="@+id/textViewCapital"

android:layout_row="1"

android:layout_column="1" />

</GridLayout>

 
Step 4 :  Creating ArrayAdapter for ListView

Before creating MainActivity, we need to create CustomCountryList class for custom ListView row.

package com.java2blog.customlistviewexampleapp;

import android.app.Activity;

import android.content.Context;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ArrayAdapter;

import android.widget.ImageView;

import android.widget.TextView;

import com.java2blog.customlistviewexampleapp.R;

public class CustomCountryList extends ArrayAdapter {

    private String[] countryNames;

    private String[] capitalNames;

    private Integer[] imageid;

    private Activity context;

    public CustomCountryList(Activity context, String[] countryNames, String[] capitalNames, Integer[]

        super(context, R.layout.row_item, countryNames);

        this.countryNames = countryNames;

        this.capitalNames = capitalNames;

        this.imageid = imageid;

    }

    @Override

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

        View row=convertView;

        LayoutInflater inflater = context.getLayoutInflater();

        if(convertView==null)

            row = inflater.inflate(R.layout.row_item, null, true);

        TextView textViewCountry = (TextView) row.findViewById(R.id.textViewCountry);

        TextView textViewCapital = (TextView) row.findViewById(R.id.textViewCapital);

        ImageView imageFlag = (ImageView) row.findViewById(R.id.imageViewFlag);

        textViewCountry.setText(countryNames[position]);

        textViewCapital.setText(capitalNames[position]);

        imageFlag.setImageResource(imageid[position]);

        return  row;

    }

This class is used to populating data for ListVIew. getView method is get called for drawing each row.
Step 5 : Creating MainActivity

Change src/main/packageName/MainActivity.java as below:

package com.java2blog.customlistviewexampleapp;

import android.app.ListActivity;

import android.graphics.Typeface;

import android.os.Bundle;

import android.view.View;

import android.widget.AdapterView;

import android.widget.ListView;

import android.widget.TextView;

import android.widget.Toast;

import com.java2blog.customlistviewexampleapp.CustomCountryList;

import com.java2blog.customlistviewexampleapp.R;

 public class MainActivity extends ListActivity {

     private ListView listView;

    private String countryNames[] = {

            "India",

            "China",

            "Nepal",

            "Bhutan"

    };
 

    private String capitalNames[] = {

            "Delhi",

            "Beijing",

            "Kathmandu",

            "Thimphu"

    };

    private Integer imageid[] = {

            R.drawable.india,

            R.drawable.china,

            R.drawable.nepal,

            R.drawable.bhutan

    };

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

 
        // Setting header

        TextView textView = new TextView(this);

        textView.setTypeface(Typeface.DEFAULT_BOLD);

        textView.setText("List of Countries");

        ListView listView=(ListView)findViewById(android.R.id.list);

        listView.addHeaderView(textView);

        // For populating list data

        CustomCountryList customCountryList = new CustomCountryList(this, countryNames,

        listView.setAdapter(customCountryList);

        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {

            @Override

            public void onItemClick(AdapterView<?> adapterView, View view, int position, long l) {

                Toast.makeText(getApplicationContext(),"You Selected "+countryNames[position-1]+ " as

        });

    }

If you notice, we have extended to ListActivity for this class. ListActivity class provides some methods
specific to ListView.
We have declared three arrays to take care of Country textView, Capital textView and flag ImageView
and customCountryList is being used to populate data in ListView.
As we have added textView to ListView as header in above code thats why we have used
countryNames[position-1] while setting toast text, if you don’t use header then it should be
countryNames[position].

Step 6: Put images in drawable folder

locate res -> drawable and put images in your application ‘s res -> drawable folder.

Step 7 : Running the app