Android: ListView messed up when scrolled

Question

I am working on listview showing results of a lottery, the results are stored in a dababase Records, and coded as follows:

Code:

generate listing:

   public void generate_listing()
    {
        String action = "recordId " + "DESC";
        Record = Select.from(Records.class).orderBy(action).list();

        recordId_list = new ArrayList<Integer>();
        result_list = new ArrayList<String>();

        recordId_list.clear();
        result_list.clear();
        lv1.invalidateViews();
        for (int i = 0; i < Record.size(); ++i) 
        {
            recordId_list.add(Record.get(i).getrecordId());
            result_list.add(Record.get(i).getResult());
        }
        lv1.setAdapter(new My_LV_ArrayAdapter(RecordListActivity2.this)); 
    }

Adapter:

    private class My_LV_ArrayAdapter extends BaseAdapter 
    {
        private LayoutInflater mInflater; 
        private Context mContext = null;  
        public My_LV_ArrayAdapter(Context context) 
        {  
            mContext = context;  
            mInflater = LayoutInflater.from(mContext);  
        }  

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

        public Object getItem(int arg0) 
        {
            return recordId_list.get(arg0);
        }

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

        @Override
        public int getViewTypeCount() 
        {

            if (getCount() != 0)
                return getCount();
            return 1;
        }

        public View getView(int position, View convertView, ViewGroup parent) 
        {
            if (convertView == null) 
            {
                convertView = mInflater.inflate(R.layout.list_item2, null);         
            }
            String xx = Record.get(position).getResult();
            String [] temp = null;  
            temp = xx.split("-");     
            ArrayList<Integer> tempArray = new ArrayList<Integer>();
            for (int k=0; k<6; k++)
            {
                tempArray.add(Integer.valueOf(temp[k]));
            }
            final LinearLayout ll = (LinearLayout) convertView.findViewById(R.id.ll);           

            // inflate slot number
            String yy = period_list.get(position);
            ll.addView(convertTextToImageView(width, height, (position+1)+". "+temp2[1]));

            // inflate slot results
            for (int p = 1; p <= 10; p++)
            {
                LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(w,w);
                btn_ball = new Button(mContext);                
                btn_ball.setEnabled(false);
                if (tempArray.contains(p))
                {
                    btn_ball.setBackgroundResource(R.drawable.btn_green_selector);
                }
                else
                {
                    btn_ball.setBackgroundResource(R.drawable.btn_transparent_selector);
                }

                ll.addView(btn_ball, params);
            }   
            return convertView;
        }
    }

EDIT:

public View getView(int position, View convertView, ViewGroup parent) 
    {
        if (convertView == null) 
        {
            convertView = mInflater.inflate(R.layout.list_item3, null);         
        }
        String xx = Record.get(position).getResult();
        String [] temp = null;  
        temp = xx.split("-");     
        ArrayList<Integer> tempArray = new ArrayList<Integer>();
        for (int k=0; k<6; k++)
        {
            tempArray.add(Integer.valueOf(temp[k]));
        }

        DisplayMetrics localDisplayMetrics = getResources().getDisplayMetrics();
        Constants.SCREEN_W = localDisplayMetrics.widthPixels;
        Constants.SCREEN_H = localDisplayMetrics.heightPixels;

        int hh = Constants.SCREEN_W/51;
        int ww = Constants.SCREEN_W/51;
        ImageButton btn_slot = (ImageButton) convertView.findViewById(R.id.btn_slot);

        // inflate slot number
        String yy = period_list.get(position);
        String [] temp2 = null;  
        temp2 = yy.split("-");
        btn_slot.setImageBitmap(convertTextToBM(Constants.SCREEN_W/25, ww, (position+1)+". "+temp2[1]));
        List<ImageButton> list_btn  = new ArrayList<ImageButton>();
        for(int id : BUTTON_IDS) 
        {
            ImageButton imgBtn = (ImageButton)convertView.findViewById(id);
            imgBtn.setEnabled(false);
            imgBtn.getLayoutParams().height = hh;
            imgBtn.getLayoutParams().width = ww;
            list_btn.add(imgBtn);
        }

        // inflate slot results
        for (int p = 0; p < 49; p++)
        {
            if (tempArray.contains(p))
            {
                list_btn.get(p).setBackgroundResource(R.drawable.btn_green_selector);
list_btn.get(p).setImageResource(BUTTON_IMG[p]);
            } 
            else
            {
                list_btn.get(p).setBackgroundResource(R.drawable.btn_transparent_selector);
list_btn.get(p).setImageResource(BUTTON_IMG[p]);
            }               
        }   
        return convertView;
    }

Question:

The results that are originally sorted in descending order in a good way. However, upon scrolling up and down the listview, the listing was changed and is no longer sorted. Some items are even repeated. Some are gone.

What is happening? Thanks!

EDIT:

I have amended the list_item3 as layout to be inflated to the listview, of which inside has 50 ImageButtons in a row. The getView part in the adapter is amended as above. However, the results inflated are still messed after scrolling the listview up or down. How could this be solved? Thanks!

score 1 · Answer 1 · edited May 23 '17 at 12:16

1

You are adding to a recycled view. For the case where convertview is not null, it will be one of your old layouts on which you have already called addView hence the duplicates.

Ideally you should not be adding views in getView but if you really want to do it this way, you could check if the non null convert view already has the view that you want to add by using ids or tags.

I would recommend to structure your layout so you are simply setting stuff (data/listeners etc) in list view and not actually adding to it in getView

Have a look at this to get a better understanding of how list view works.

edited May 23 '17 at 12:16

Community

1
1

answered Feb 14 '15 at 08:03

Naveed

2,942
2
25
58

Thx ur comment, but since each of the listview item represent a result of a slot, and each slot has around 50 numbers, i would like to inflate a listview showing a trend, and so for each row i need to inflate 50 squared buttons. Or should i make the listitem2 layout already in 50 squares instead of programmatically adding in the code? – pearmak Feb 14 '15 at 08:59
I have changed the view (list_item3) to be added to the listview so that no need adding view to the row now. However, the balls are still messed up when scrolling up or down the listview. Could you pls kindly see if there are any problems in the code? Thx a lot! – pearmak Feb 14 '15 at 18:40
Can you please attach an image of what the list view currently looks like and how you would like it to look like thanks. – Naveed Feb 14 '15 at 18:45
thx for ur quick response...pls see attached for the screenshot. There should be 7 numbers for each row, but now scrolling up and down each row got more than 7 numbers. thx! – pearmak Feb 14 '15 at 18:52
I found that if the ball images are not to be shown (i.e. just showing green or blue backgrounds with no image), the listview is correct whenever scrolling up and down for many times...however, if the ball images are shown, once scroll down and back to top, the listview will be a mess as shown...each ball image is around 4KB... Should the ball image be recycled when is out of screen? – pearmak Feb 14 '15 at 19:00
Sorry ignore last comment. Is there a reason you are returning `getCount` from `getViewTypeCount()`. Can you try changing `getViewtypeCount()` to just return 1 or not override it, and see if it fixes the problem. It seems like you only have one type of row – Naveed Feb 14 '15 at 19:13
thx for your continuous advice. I seem found out a solution that currently appear ok: resetting all btn img to null, as follows: `// inflate slot results for (int p = 0; p < 49; p++) { list_btn[p].setBackgroundResource(R.drawable.btn_transparent_selector); list_btn[p].setImageResource(0); } for (int p = 0; p < 49; p++) { if (tempArray.contains(p)) { list_btn[p].setBackgroundResource(R.drawable.btn_green_selector); list_btn[p].setImageResource(BUTTON_IMG[p]); } else if (specialballArray.contains(p)) { ... – pearmak Feb 14 '15 at 19:15

Android: ListView messed up when scrolled

Code:

EDIT:

Question:

EDIT:

1 Answers1