Android Custom ListView With Images And Text

Customizing of ListView 

Today I am gonna customize the listview with images and text.

For this I create a new project called "Listv"

Then I drag a listview in "activity_main" xml file.

This xml file code looks like this:

<RelativeLayout 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"
    tools:context=".MainActivity" >

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



Next step is I need to create another xml file called "simple_list.xml".
It consists of Tablelayout with imageview and textview.

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
 <TextView 
            android:id="@+id/txt"
            android:layout_width="50dp"
            android:layout_height="50dp"/>
        <ImageView 
            android:id="@+id/img"
            android:layout_width="wrap_content"
            android:layout_height="50dp" android:contentDescription="@+string/todo"/>
    </TableLayout>

Now i need to create a new class called "Customlist"
I write these codes inside it:

public class Customlist extends ArrayAdapter<String> {
private final Activity context;
private final String[] web;
private final Integer[] imageId;
public Customlist(Activity context,String[] web,Integer[] imageId ) {
super(context, R.layout.simple_list, web);
this.context= context;
this.imageId= imageId;
this.web= web;
}
@Override
public View getView(int position, View view, ViewGroup parent) {
LayoutInflater inflater = context.getLayoutInflater();
View rowView= inflater.inflate(R.layout.simple_list, null, true);
TextView txtTitle = (TextView) rowView.findViewById(R.id.txt);
ImageView imageView = (ImageView) rowView.findViewById(R.id.img);
txtTitle.setText(web[position]);
imageView.setImageResource(imageId[position]);
return rowView;
}
}

At last write these codes in MainActivity class:

public class MainActivity extends Activity {
ListView list;
String[] actor = {"cool","hot","awesome","hero","sweet","fabulos"};
Integer[] imageId={
R.drawable.a1,R.drawable.a2,R.drawable.a3,
R.drawable.a4,R.drawable.a5,R.drawable.a6};


@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Customlist adapter = new Customlist(MainActivity.this, actor, imageId);
list = (ListView) findViewById(R.id.listView1);
list.setAdapter(adapter);
list.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
long arg3) {
// TODO Auto-generated method stub
}
});
}

Finally i run my project in emulator . View of list is not so good. U can change the list interface from listview.xml.