Android Custom ListView with Images and Text

Hi Friends,

This tutorial presents an android listview with image example. Here you will learn to create your own custom adapter with the help of ArrayAdapter.

Step 1:

create a activity_main.xml inside layout folder

activity_main.xml

<?xml version="1.0" encoding="utf-8">
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
xmlns:tools="https://schemas.android.com/tools"
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=".MainActivity">

<ListView android:id="@+id/listView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true">

</ListView>
</RelativeLayout>

Step 2:

create a list_row.xml inside layout folder

list_row.xml

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

<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="40dp"
android:layout_gravity="center_vertical"
android:text="TextView" />

</LinearLayout>

Step 3:

Now create a Customlistadapter.java inside your package under Src folder

Customlistadapter.java

Now we need to implement custom adapter for our listview. We extend arrayadapter. Each row of our listview will contain one image and one text. So we require two arrays to hold ‘id of all images’ and ‘text data’.

package com.appsinfoway.example_customlistview;

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.appsinfoway.fileviewr.R;

public class Customlistadapter extends ArrayAdapter<String> {
String[] color_names;
Integer[] image_id;
Context context;

public Customlistadapter(Activity context, Integer[] image_id, String[] text) {
super(context, R.layout.list_row, text);
// TODO Auto-generated constructor stub
this.color_names = text;
this.image_id = image_id;
this.context = context;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub
LayoutInflater inflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View single_row = inflater.inflate(R.layout.list_row, null,
true);
TextView textView = (TextView) single_row.findViewById(R.id.textView);
ImageView imageView = (ImageView) single_row.findViewById(R.id.imageView);
textView.setText(color_names[position]);
imageView.setImageResource(image_id[position]);
return single_row;
}
}

Step 4:

MainActivity.java

Next we implement main file of our android listview with image example. We add adapter to our listview. Here we have passed images as ‘integer id’ and textual data as ‘name of color’.

 

package <your main package>;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.widget.ListView;

import com.appsinfoway.fileviewr.R;

public class MainActivity extends Activity {

String color_names[] = {"red", "green", "blue", "yellow", "pink", "brown"};
Integer image_id[] = {R.drawable.red, R.drawable.green, R.drawable.blue, R.drawable.yellow, R.drawable.pink, R.drawable.brown};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Customlistadapter adapter = new Customlistadapter(this, image_id, color_names);
ListView lv = (ListView) findViewById(R.id.listView);
lv.setAdapter(adapter);

}

@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;
}

}

Step 5:

Thats it now Right Click on the project name and select Run As –> Android Application