Android Customized ListView Example

By | October 3, 2012
In the Previous Tutorial we have seen an example on Simple ListView , here in this post we will see how to customized the list items in listview , here in this example we will see how to add image and text for each listitems in listview with Imageview and TextView respectively.

Lets See An Example

Project Detail

Project Name Customized_ListView
Package com.pavan.customized_listview
Minimum SDK API 8
Target SDK API 17
Theme Holo Light with Dark Action Bar

1. XML Layout

file:- list_activity.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/logo”
         android:layout_width=”80dp”
         android:layout_height=”60dp”
         android:layout_marginLeft=”10dp”
         android:src=”@drawable/ic_launcher” />

     <TextView
        android:id=”@+id/label”
        android:layout_width=”wrap_content”
        android:layout_height=”wrap_content”
        android:layout_marginLeft=”20dp”
        android:layout_marginTop=”15dp”
        android:text=””
        android:textAllCaps=”true”
        android:textSize=”20dp” />
 
</LinearLayout>

2. Activity

file:-MainActivity.java

package com.pavan.customized_listview;

import android.os.Bundle;
import android.app.ListActivity;
import android.view.View;
import android.widget.ListView;
import android.widget.Toast;

public class MainActivity extends ListActivity {

String[] mob = new String[] { “samsung”, “lg”, “htc”, “moto”, “nexus” };

@Override
protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);
Custom_view cv = new Custom_view(this, mob);
setListAdapter(cv);
}

@Override
protected void onListItemClick(ListView l, View v, int position, long id) {

super.onListItemClick(l, v, position, id);

// getting the value of clicked item
String clicked_item = (String) getListAdapter().getItem(position);
Toast.makeText(this, clicked_item, Toast.LENGTH_SHORT).show();
}

}

3. Adapter

Customized your each listitem in custom_view class

file:- Custom_view.java

package com.example.com.pavan.customized_listview;

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;

public class Custom_view extends ArrayAdapter<string> {

 private final Context context;
 private final String[] values;

 public Custom_view(Context context, String[] values) {
  super(context, R.layout.list_activity, values);
  this.context = context;
  this.values = values;
 }

 @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 rowView = inflater.inflate(R.layout.list_activity, parent, false);
  TextView tv = (TextView) rowView.findViewById(R.id.label);
  ImageView iv = (ImageView) rowView.findViewById(R.id.logo);

  String item_value = values[position];
  if (item_value.equals(“samsung”)) {
   iv.setImageResource(R.drawable.samsung);
   tv.setText(item_value);
  } else if (item_value.equals(“lg”)) {
   iv.setImageResource(R.drawable.lg);
   tv.setText(item_value);
  } else if (item_value.equals(“htc”)) {
   iv.setImageResource(R.drawable.htc);
   tv.setText(item_value);
  } else if (item_value.equals(“moto”)) {
   iv.setImageResource(R.drawable.moto);
   tv.setText(item_value);
  } else if (item_value.equals(“nexus”)) {
   iv.setImageResource(R.drawable.nexus);
   tv.setText(item_value);
  }

  return rowView;
 }
}

4. RUN

ListView With Image And TextVIew

  • how we can use custom toast in above program ?

  • Awesome tutorial.
    Thank you so much.