Android Customized ListView Example

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



2 comments:

lakhan said...

how we can use custom toast in above program ?

Abdul Khalik said...

Awesome tutorial.
Thank you so much.

Post a comment