Monday, June 14, 2010

Custom ArrayAdapter, with different icons.

In the last exercises "A simple ListView, extends ListActivity", "ListView, with icon" and "Implement onListItemClick() of ListActivity", all use the build-in ArrayAdapter with standard layout in each row. All row have the same icon.

In this article, a custom ArrayAdapter will be created. The method getView() have to be re-implement. Such that we can have a List with different icons on each row.

In this exercise, we will show original icon come from Project Wizard for Sunday, and a gray icon for all others.

Custom ArrayAdapter, with with different icons.

Create folder /res/drawable and save the gray icon inside.
icongray.png

Keep usng the /res/layout/row.xml as previous exercise, "ListView, with icon".

AndroidList.java
package com.exercise.AndroidList;

import android.app.ListActivity;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;

public class AndroidList extends ListActivity {

public class MyCustomAdapter extends ArrayAdapter<String> {

public MyCustomAdapter(Context context, int textViewResourceId,
String[] objects) {
super(context, textViewResourceId, objects);
// TODO Auto-generated constructor stub
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub
//return super.getView(position, convertView, parent);
LayoutInflater inflater=getLayoutInflater();
View row=inflater.inflate(R.layout.row, parent, false);
TextView label=(TextView)row.findViewById(R.id.weekofday);
label.setText(DayOfWeek[position]);
ImageView icon=(ImageView)row.findViewById(R.id.icon);

if (DayOfWeek[position]=="Sunday"){
icon.setImageResource(R.drawable.icon);
}
else{
icon.setImageResource(R.drawable.icongray);
}

return row;
}
}

String[] DayOfWeek = {"Sunday", "Monday", "Tuesday",
"Wednesday", "Thursday", "Friday", "Saturday"
};

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//setContentView(R.layout.main);
/*setListAdapter(new ArrayAdapter<String>(this,
R.layout.row, R.id.weekofday, DayOfWeek));*/
setListAdapter(new MyCustomAdapter(AndroidList.this, R.layout.row, DayOfWeek));
}

@Override
protected void onListItemClick(ListView l, View v, int position, long id) {
// TODO Auto-generated method stub
//super.onListItemClick(l, v, position, id);
String selection = l.getItemAtPosition(position).toString();
Toast.makeText(this, selection, Toast.LENGTH_LONG).show();
}

}
***********
It's a programmatic pitfall here:
in getView(), Condition checking of String ("Sunday") should be checked with:
(DayOfWeek[position].equals("Sunday"))

"==" not always work! refer String Comparison: equals()? ==?
***********

Download the files.

next: Using convertView in getView() to make ListView efficient

9 comments:

hany said...

Hi ,

I have trouble from custom listview with image . the image retrive from web. Please can you send the example code. to my mail. my mail:hanuman495@gmail.com


Thankyou.
hany.

Erik said...

Is it what you want?

ListView with icon loaded from internet

bob said...

I want to display listview with image and indicator ">" for each list item and also onclick activity for each list item.Its urgent.
can any one send full source code.
thanks in advance.

Slayer said...

How do I get it work with a string array which is being populated dynamically through a method? I am working on a RSS reader so the string array will contain the titles of all the blogs. Can you please help me out with that?

Erik said...

hello bob,

Refere ListActivity and onListItemClick() for onclick.

For display, I don't know your problem?

Erik said...

hello Slayer,

After your array updated, you can call yourAdapter.notifyDataSetChanged() to update the ListView.

louis said...

Thanks for the post, its very straight forward and useful. However, how can i navigate to other activities using listview with icons?

Erik said...

hello louis,

You can implement a onListItemClick, and call StartActivity.

Anonymous said...

how to insert gif animated image in sqlite database and retrieve it on image view