Button inside list view is creating issue on scrolling and on button click

Question

I have three button in some of list items in list view and on click of that button i wanna change layout of that list item but problem i am facing is listed below.

1). On click of button another list-item layout get changed. 2). On scroll of list-view another list-items layout get changed whom i haven't clicked.

Here's code of adapter class.

import java.util.ArrayList;

import com.xsinfosol.DOT.R;
import com.xsinfosol.DOT.ImageLoading.ImageLoader;
import com.xsinfosol.DOT.LibraryClasses.RippleView;
import com.xsinfosol.DOT.model.DOT_Common_Model;

import android.content.Context;

import android.graphics.drawable.Drawable;
import android.support.v7.internal.widget.ButtonBarLayout;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.view.WindowManager.LayoutParams;
import android.widget.BaseAdapter;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.CompoundButton.OnCheckedChangeListener;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

public class Agenda_Adapter  extends BaseAdapter {

    Context context;
    ArrayList<DOT_Common_Model> arrayList;
    ViewHolder viewHolder;

    public Agenda_Adapter(Context context , ArrayList<DOT_Common_Model>  arrayList) {
        // TODO Auto-generated constructor stub


        this.context = context;
        this.arrayList = arrayList;
    }

    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return arrayList.size();
    }

    @Override
    public Object getItem(int position) {
        // TODO Auto-generated method stub
        return arrayList.get(position);
    }

    @Override
    public long getItemId(int position) {
        // TODO Auto-generated method stub
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        // TODO Auto-generated method stub



        if(convertView==null)
        {
            viewHolder = new ViewHolder();



            convertView = LayoutInflater.from
                    (context).inflate(R.layout.agenda_event_list_item, null);
            viewHolder.linearLayout = (LinearLayout)convertView.findViewById(R.id.agenda_button_layout);
            viewHolder.linearLayout.setVisibility(View.GONE);
            viewHolder.checkBox = (CheckBox)convertView.findViewById(R.id.agenda_event_checkbox);
            viewHolder.eventName = (TextView)convertView.findViewById(R.id.agenda_event_name);
            viewHolder.imageView = (ImageView)convertView.findViewById(R.id.agenda_event_imae);
            viewHolder.place = (TextView)convertView.findViewById(R.id.agenda_event_place);
            viewHolder.time = (TextView)convertView.findViewById(R.id.agenda_event_date_time);
            viewHolder.going = (RippleView)convertView.findViewById(R.id.agenda_rippleview_going);
            viewHolder.notGoing = (RippleView)convertView.findViewById(R.id.agenda_rippleview_not_going);
            viewHolder.mayBe = (RippleView)convertView.findViewById(R.id.agenda_rippleview_maybe);
            viewHolder.going.setOnClickListener(new OnClickListener() {

                @Override
                public void onClick(View v) {
                    // TODO Auto-generated method stub
                    viewHolder.going.setVisibility(View.GONE);
                    viewHolder.notGoing.setVisibility(View.GONE);
                    viewHolder.mayBe.setVisibility(View.GONE);


                    Drawable tick = context.getResources().getDrawable(R.drawable.ic_action_tick);
                    tick.setBounds(0,0, 30, 30);
                    Button going = new Button(context);

                    LinearLayout.LayoutParams params  = new LinearLayout.LayoutParams(new LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, 40));
                    params.setMargins(10,0, 10, 4);
                    going.setLayoutParams(params);
                    going.setBackgroundColor(context.getResources().getColor(android.R.color.holo_green_dark));
                    going.setText("Going");
                    going.setTextSize(15);
                    going.setTextColor(R.color.white);
                    going.setCompoundDrawables(null, null, tick, null);
                    going.setCompoundDrawablePadding(5);
                    going.setGravity(Gravity.CENTER);
                    if(viewHolder.linearLayout!=null)
                        viewHolder.linearLayout.removeAllViews();
                    viewHolder.linearLayout.addView(going);
                }
            });


            viewHolder.notGoing.setOnClickListener(new OnClickListener() {

                @Override
                public void onClick(View v) {
                    // TODO Auto-generated method stub
                    viewHolder.going.setVisibility(View.GONE);
                    viewHolder.notGoing.setVisibility(View.GONE);
                    viewHolder.mayBe.setVisibility(View.GONE);


                    Drawable cross = context.getResources().getDrawable(R.drawable.ic_action_cancel);
                    cross.setBounds(0,0, 30, 30);
                    Button button = new Button(context);

                    LinearLayout.LayoutParams paramsCross  = new LinearLayout.LayoutParams(new LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, 40));
                    paramsCross.setMargins(10,0, 10, 4);
                    button.setLayoutParams(paramsCross);
                    button.setBackgroundColor(context.getResources().getColor(R.color.red));
                    button.setText("Not Going");
                    button.setTextSize(15);
                    button.setTextColor(R.color.white);
                    button.setCompoundDrawables(null, null, cross, null);
                    button.setCompoundDrawablePadding(5);
                    button.setGravity(Gravity.CENTER);
                    if(viewHolder.linearLayout!=null)
                            viewHolder.linearLayout.removeAllViews();
                    viewHolder.linearLayout.addView(button);
                }
            });


            viewHolder.mayBe.setOnClickListener(new OnClickListener() {

                @Override
                public void onClick(View v) {
                    // TODO Auto-generated method stub
                    viewHolder.going.setVisibility(View.GONE);
                    viewHolder.notGoing.setVisibility(View.GONE);
                    viewHolder.mayBe.setVisibility(View.GONE);


                    Drawable mayBe = context.getResources().getDrawable(R.drawable.ic_action_emo_err);
                    mayBe.setBounds(0,0, 30, 30);
                    Button maybe = new Button(context);

                    LinearLayout.LayoutParams paramsMaybe  = new LinearLayout.LayoutParams(new LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, 40));
                    paramsMaybe.setMargins(10,0, 10, 4);
                    maybe.setLayoutParams(paramsMaybe);
                    maybe.setBackgroundColor(context.getResources().getColor(R.color.yellow));
                    maybe.setText("May Be");
                    maybe.setTextSize(15);
                    maybe.setTextColor(R.color.white);
                    maybe.setCompoundDrawables(null, null, mayBe, null);
                    maybe.setCompoundDrawablePadding(5);
                    maybe.setGravity(Gravity.CENTER);
                    if(viewHolder.linearLayout!=null)
                            viewHolder.linearLayout.removeAllViews();
                    viewHolder.linearLayout.addView(maybe);

                }
            });


            viewHolder.checkBox.setOnCheckedChangeListener(new OnCheckedChangeListener() {

                @Override
                public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                    // TODO Auto-generated method stub


                    int getPosition  = (Integer)buttonView.getTag();

                    arrayList.get(getPosition).setChecked(buttonView.isChecked());



                }
            });

            convertView.setTag(viewHolder);
            convertView.setTag(R.id.agenda_event_checkbox, viewHolder.checkBox);
            convertView.setTag(R.id.agenda_event_imae, viewHolder.imageView);
            convertView.setTag(R.id.agenda_event_name, viewHolder.eventName);
            convertView.setTag(R.id.agenda_event_place, viewHolder.place);
            convertView.setTag(R.id.agenda_event_date_time, viewHolder.time);
            convertView.setTag(R.id.agenda_button_layout, viewHolder.linearLayout);
            convertView.setTag(R.id.agenda_rippleview_going, viewHolder.going);
            convertView.setTag(R.id.agenda_rippleview_not_going, viewHolder.notGoing);
            convertView.setTag(R.id.agenda_rippleview_maybe, viewHolder.mayBe);






        }else
            viewHolder = (ViewHolder)convertView.getTag();



        viewHolder.checkBox.setTag(position);
        viewHolder.going.setTag(position);
        viewHolder.notGoing.setTag(position);
        viewHolder.mayBe.setTag(position);

        ImageLoader imageLoader = new ImageLoader(context);
        ImageView imageView = viewHolder.imageView;
        imageLoader.DisplayImage(arrayList.get(position).getImage(), imageView);


        viewHolder.checkBox.setChecked(arrayList.get(position).ischecked());

        switch (arrayList.get(position).getFlag()) {
        case "0":
            // hasn's seleted any option
            if(viewHolder.linearLayout.getVisibility()==View.GONE)
                    viewHolder.linearLayout.setVisibility(View.VISIBLE);

            if(viewHolder.going.getVisibility()==View.GONE)
                    viewHolder.going.setVisibility(View.VISIBLE);

            if(viewHolder.mayBe.getVisibility()==View.GONE)
                viewHolder.mayBe.setVisibility(View.VISIBLE);

            if(viewHolder.notGoing.getVisibility()==View.GONE)
                viewHolder.notGoing.setVisibility(View.VISIBLE);



            break;

        case "1":
            // selected going

            viewHolder.going.setVisibility(View.GONE);
            viewHolder.notGoing.setVisibility(View.GONE);
            viewHolder.mayBe.setVisibility(View.GONE);


            Drawable tick = context.getResources().getDrawable(R.drawable.ic_action_tick);
            tick.setBounds(0,0, 30, 30);
            Button going = new Button(context);

            LinearLayout.LayoutParams params  = new LinearLayout.LayoutParams(new LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, 40));
            params.setMargins(10,0, 10, 4);
            going.setLayoutParams(params);
            going.setBackgroundColor(context.getResources().getColor(android.R.color.holo_green_dark));
            going.setText("Going");
            going.setTextSize(15);
            going.setTextColor(context.getResources().getColor(R.color.white));
            going.setCompoundDrawables(null, null, tick, null);
            going.setCompoundDrawablePadding(5);
            going.setGravity(Gravity.CENTER);
            if(viewHolder.linearLayout!=null)
                viewHolder.linearLayout.removeAllViews();
            viewHolder.linearLayout.addView(going);







            break;
        case "2":
            // select not going


            viewHolder.going.setVisibility(View.GONE);
            viewHolder.notGoing.setVisibility(View.GONE);
            viewHolder.mayBe.setVisibility(View.GONE);


            Drawable cross = context.getResources().getDrawable(R.drawable.ic_action_cancel);
            cross.setBounds(0,0, 30, 30);
            Button button = new Button(context);

            LinearLayout.LayoutParams paramsCross  = new LinearLayout.LayoutParams(new LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, 40));
            paramsCross.setMargins(10,0, 10, 4);
            button.setLayoutParams(paramsCross);
            button.setBackgroundColor(context.getResources().getColor(R.color.red));
            button.setText("Not Going");
            button.setTextSize(15);
            button.setTextColor(context.getResources().getColor(R.color.white));
            button.setCompoundDrawables(null, null, cross, null);
            button.setCompoundDrawablePadding(5);
            button.setGravity(Gravity.CENTER);
            if(viewHolder.linearLayout!=null)
                    viewHolder.linearLayout.removeAllViews();
            viewHolder.linearLayout.addView(button);







            break;

        case "3":

            // selected may be

            viewHolder.going.setVisibility(View.GONE);
            viewHolder.notGoing.setVisibility(View.GONE);
            viewHolder.mayBe.setVisibility(View.GONE);


            Drawable mayBe = context.getResources().getDrawable(R.drawable.ic_action_emo_err);
            mayBe.setBounds(0,0, 30, 30);
            Button maybe = new Button(context);

            LinearLayout.LayoutParams paramsMaybe  = new LinearLayout.LayoutParams(new LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, 40));
            paramsMaybe.setMargins(10,0, 10, 4);
            maybe.setLayoutParams(paramsMaybe);
            maybe.setBackgroundColor(context.getResources().getColor(R.color.yellow));
            maybe.setText("May Be");
            maybe.setTextSize(15);
            maybe.setTextColor(context.getResources().getColor(R.color.black_overlay));
            maybe.setCompoundDrawables(null, null, mayBe, null);
            maybe.setCompoundDrawablePadding(5);
            maybe.setGravity(Gravity.CENTER);
            if(viewHolder.linearLayout!=null)
                    viewHolder.linearLayout.removeAllViews();
            viewHolder.linearLayout.addView(maybe);






            break;

        case "4":
            // event doesn't have any invitatin option

            if(viewHolder.linearLayout.getVisibility()==View.VISIBLE)
                    viewHolder.linearLayout.setVisibility(View.GONE);



            break;
        }




        viewHolder.eventName.setText(arrayList.get(position).getName());
        viewHolder.place.setText(arrayList.get(position).getPlace());
        viewHolder.time.setText(arrayList.get(position).getTime());


























        return convertView;
    }

static class ViewHolder
{
    TextView eventName , place, time;
    CheckBox checkBox;
    ImageView imageView;
    LinearLayout linearLayout;
    RippleView going , notGoing , mayBe;


}



}

Please help me i am stuck in this very badly,

Fonsie

add convertView=null; before if(convertView==null) – Runway

are you using listview or recyclerView – Aught

try this https://mcmap.net/q/1321089/-listview-viewholder-pattern-where-to-settag-for-position-on-removing-an-item-android ,Try using setTag&getTag for button to get exact position – Warmup

Post screen shot. Why are you setting tag of all the widget objects in convertview? – Geosphere

Answer 1

Step 1: Place the on click listeners after this line(viewHolder = (ViewHolder)convertView.getTag())

Step 2: In onclick method remove view creations/delete logics. Change the model value("In your case current Item flag") and call notifyDataset changed method

@Override
public void onClick(View view) {
    //Set the flag based on your view click
    ((DOT_Common_Model) getItem( int position)).setFlag(0);
    notifyDatasetChanged();
}

Step 3: Change the view based on your model value("flag value")

if(((DOT_Common_Model) getItem( int position)).getFlag()==0){
    view1.setVisibility(View.VISIBLE);
    view2.setVisibility(View.GONE);
    view3.setVisibility(View.GONE);
}else if(((DOT_Common_Model) getItem( int position)).getFlag()==1){
    view1.setVisibility(View.GONE);
    view2.setVisibility(View.VISIBLE);
    view3.setVisibility(View.GONE);
}else if(((DOT_Common_Model) getItem( int position)).getFlag()==2){
    view1.setVisibility(View.GONE);
    view2.setVisibility(View.GONE);
    view3.setVisibility(View.VISIBLE);
}else{
    view1.setVisibility(View.VISIBLE);
    view2.setVisibility(View.VISIBLE);
    view3.setVisibility(View.VISIBLE);
}

Note: List view only binds the data and it never changes the viewholder view object for every data value, we need to change the views visibility/background based on the data value. If you use "if condition" then "else" must be there.

Equivalence

Answer 2

I seen your adapter code you are using only use if condition, listview is not so smart so whenever you use only if not write else part then and perform a event then ListView may also change next position View, visibility or anything that is in your if part, so please write every else part of if in your adapter code

I suggest that use RecyclerView more advanced then ListView.

Aught

Answer 3

Short Answer:

Put Your onClick listener outside the if else block :

if(convertView==null) {
    //BLABLABLA
} else {

}

// WRITE YOUR CLICK LISTENER HERE
viewHolder.mayBe.setOnClickListener(new OnClickListener() { ..... });
viewHolder.notGoing.setOnClickListener(new OnClickListener() { .. });
viewHolder.checkBox.setOnCheckedChangeListener(new OnCheckedChangeListener() { .... } );

Why The Problem Happen

What you are doing is called ViewHolderPattern. It is mainly used to increase the performance of scrolling list view by avoiding unnecessary findViewByIds which is a heavy process.

Lets see how it works:

Please see this picture which show a normal list:

Our adapter have many rows but only 3 of them fills the view. when you make your adapter, only the first 3 rows are null and should be inflated. Other views will use the same view which was created before.

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    // in our example, the convert view is only null for the first 3 items 
    if(convertView==null) {

    } else {

    }
}

The note is : you shouldn't set anything in if else block. you should just find your views in them and assign them to your viewHolder and do view related things ( like margin, padding, textsize , ... ). You shouldn't do resource or click listener related things in that block ( like setText, setBitmap,Onclicklistener,...)

WHY ?! We answered that before ! because it only get called for the first items which fill the view!

Anticlinal

Answer 4

you are not handling click listener inside else case:

else if (convertView==null)

Write all OnClicklistener's outside(above return convertView).

Garibold