Question

I’m having a problem to inflate facebook profile picture into listview. What I’m doing is once the user click fb image icon, from the JSONArray i retrieve the picture url for each of user and store it in the arraylist. so when I set adapter for my listview, I pass the the url and decode it. Unfortunately, my list view become lagging when i try to scroll down as the adapter still downloading the image. If i comment out code for decoding user profile picture url, my listview working properly but only display name of my friends. below is my code.

        fbimage = (ImageView) findViewById(R.id.fb_contact);        
        fbimage.setOnClickListener(new OnClickListener(){
        public void onClick(View v){
            token = fb.getAccessToken();
            final Dialog friends_dialog = new Dialog(PostToWall.this);
            friends_dialog.setTitle("Facebook Friends");
            friends_dialog.setContentView(R.layout.friend_list);

            friendList = (ListView) friends_dialog.findViewById(R.id.fb_friend_list);                                           
            friendList.setOnItemClickListener(PostToWall.this);

            progress = ProgressDialog.show(PostToWall.this, "Facebook Friends",
                                        "Fetching Data", true, true);
            final Handler handler = new Handler(){
                public void handleMessage(Message msg){
                    progress.dismiss();
                    friendList.setAdapter(new FbFriendListAdapter(getApplicationContext(),friendsName, friendsId, friendPic));
                    friends_dialog.show();
                    }
                };

                Thread thread = new Thread(){
                    public void run(){
                        getFriendList();
                        handler.sendEmptyMessage(0);
                    }
                };
                thread.start();                                         
            }
        }); 

getFriendList method:

public void getFriendList(){
        response = fb.request("me/friends");
        JSONObject fbFriendObj = Util.parseJson(response);
        JSONArray fbFriendArray = fbFriendObj.getJSONArray("data");                 
        friendsName = new ArrayList<String>();
        friendsId = new ArrayList<String>();
        friendPic = new ArrayList<String>();
        int i;
        for(i=0;i<=fbFriendArray.length();i++){
            JSONObject friendIDName = fbFriendArray.getJSONObject(i);
            Iterator it = friendIDName.keys();
            while(it.hasNext()){
                String nameId = (String)it.next();
                String name = friendIDName.getString(nameId);
                if(nameId.equals("id")){
                        friendsId.add(name);                            
                friendPic.add(graph_path + name + "/picture");                          
                }else if(nameId.equals("name")){
                    friendsName.add(name);
                }
            }
        }                                
    }

friend list adapter

public class FbFriendListAdapter extends ArrayAdapter<String>{

    private ArrayList<String> friendName;
    //private ArrayList<String> friendID;
    private ArrayList<String> friendPic;
    private Context context;
    Bitmap icon;

    public FbFriendListAdapter(Context c, ArrayList<String> friendName, ArrayList<String> friendID, ArrayList<String> friendPic){
        super(c, R.layout.fb_friend_adapter, 0, friendName);
        this.friendName = friendName;
        //this.friendID = friendID;
        this.friendPic = friendPic;
        this.context = c;
    }

    public int getCount() {
        return friendName.size();       
    }

    public long getItemId(int position) {
        return 0;
    }

    static class ViewHolder{
        public TextView descHolder;
        public ImageView typeHolder;
    }   

    public View getView(int position, View convertview, ViewGroup parent) {
            ViewHolder vh;
            if(convertview==null){              
                LayoutInflater inf = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
                convertview = inf.inflate(R.layout.fb_friend_adapter, null,false);
                vh = new ViewHolder();
                vh.descHolder = (TextView) convertview.findViewById(R.id.fbFriendName);             
                vh.typeHolder = (ImageView) convertview.findViewById(R.id.fbImage);
                convertview.setTag(vh);             
            }
            else{               
                vh = (ViewHolder)convertview.getTag();

            }

            URL img_value = null;
            try {
                img_value = new URL(friendPic.get(position).toString());
                try {
                    icon = BitmapFactory.decodeStream(img_value.openConnection().getInputStream());
                } catch (IOException e) {
                    e.printStackTrace();
                }
            } catch (MalformedURLException e) {
                e.printStackTrace();
            }

            vh.descHolder.setText(friendName.get(position).toString());
            vh.typeHolder.setImageBitmap(icon);
            return convertview;
    }       
}

there is some code i remove for example try catch block to make it easier to read. Hope some one can guide me.

Answer 1

Your listview is lagging because the downloading of images happen in the main(UI) thread,

You should make use of an Asynctask that will run in the background and download images seamlessly, without causing any lag in the listview

eg. (think of website, it loads text first and then the images, but does not hang up your screen)

here is a link to an excellent tutorial from which you can build up your listview logic
very handy tutorial

it makes use of an adapter class . going through which you can build adapter for your listview

Hope this helps