Accessing imagebutton in a listview and setting its setImageResource

Question

I have a list view containing image button on click of the button i want to change its image resource but I am unable to do so. I have attached screenshot of the list

I want to change image button image to disconnect if it is in connected state and vice versa.

Answer 1

First of all check given list_item.xml for custom list item to set in listview

<?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:gravity="center"
    android:orientation="horizontal" >

    <ImageButton
        android:id="@+id/ibShowStatus"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/lblStatus"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="5"
        android:text="TextView" />

    <Button
        android:id="@+id/btnChangeStatus"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="3"
        android:text="Conntect" />

</LinearLayout>

Now create custom data class to show adapt data with created list item which maintain status of list item

    private class CustomeListData {
        boolean isConnected;

        public CustomeListData(boolean isConnected) {
            super();
            this.isConnected = isConnected;
        }

        public boolean isConnected() {
            return isConnected;
        }

        public void setConnected(boolean isConnected) {
            this.isConnected = isConnected;
        }
    }

Now create array list of that custom type which you want to adapt with listview

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ArrayList<CustomeListData> listData = new ArrayList<CustomeListData>();

        listData.add(new CustomeListData(true));
        listData.add(new CustomeListData(false));
        listData.add(new CustomeListData(true));
        listData.add(new CustomeListData(true));
        listData.add(new CustomeListData(false));

        lv = (ListView) findViewById(R.id.listView1);
        CustomeAdapter adapter = new CustomeAdapter(this, R.layout.list_item,
                listData);
        lv.setAdapter(adapter);

    }

Now create a ViewHodler Class which holds control of list_item.xml, this view

    private class ViewHolder {
    ImageButton ibShowStatus;
    TextView lblStatus;
    Button btnChangeStatus;
    }

And create ArrayAdapter of that custom class and check code for change image of imageButton as you change status of button click

    private class CustomeAdapter extends ArrayAdapter<CustomeListData> {
        Context mContext;
        int layoutId;
        ArrayList<CustomeListData> tempList;
        ViewHolder vh;

        public CustomeAdapter(Context context, int resource,
                ArrayList<CustomeListData> listData) {
            super(context, resource, listData);

            mContext = context;
            layoutId = resource;
            tempList = listData;
        }

        @Override
        public View getView(final int position, View convertView,
                ViewGroup parent) {

            if (convertView == null) {
                // initialize viewhlder
                vh = new ViewHolder();

                // inflate list_item.xml in convertview
                LayoutInflater inflater = 
                        (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
                convertView = inflater.inflate(layoutId, parent);

                // hold list_item.xml control in viewholder
                vh.ibShowStatus = (ImageButton) convertView
                        .findViewById(R.id.ibShowStatus);
                vh.lblStatus = (TextView) convertView
                        .findViewById(R.id.lblStatus);
                vh.btnChangeStatus = (Button) convertView
                        .findViewById(R.id.btnChangeStatus);

                // set tag vh to the convertview
                            convertView.setTag(vh);
            } else {
                vh = (ViewHolder) convertView.getTag();
            }

            // get item from dataList at particular postition, so you can access
            // member of that item
            final CustomeListData item = tempList.get(position);

            if (item.isConnected()) {
                vh.ibShowStatus.setImageResource(R.drawable.connected);
                vh.lblStatus.setText("Connected");
                vh.btnChangeStatus.setText("Disconnect");
            } else {
                vh.ibShowStatus.setImageResource(R.drawable.disconnected);
                vh.lblStatus.setText("Not Used");
                vh.btnChangeStatus.setText("Connect");
            }

            vh.btnChangeStatus.setOnClickListener(new OnClickListener() {

                @Override
                public void onClick(View v) {
                    final CustomeListData item = tempList.get(position);

                    if (item.isConnected()) {
                        vh.ibShowStatus
                        .setImageResource(R.drawable.disconnected);
                        vh.lblStatus.setText("Not Used");
                        vh.btnChangeStatus.setText("Connect");
                    } else {
                        vh.ibShowStatus
                                                .setImageResource(R.drawable.connected);
                        vh.lblStatus.setText("Connected");
                        vh.btnChangeStatus.setText("Disconnect");
                    }

                    item.setConnected(!item.isConnected);
                }
            });

            return convertView;
        }
        }

Now try this code, it work well.

Answer 2

try this way..inside the custom adapter in the get view method declare view holder and manage the click on the whole layout custom layout of the list....and change the image resource there

 @Override
        public View getView(final int position, View convertView,
                ViewGroup parent) {

            ViewHolder holder = null;

            LayoutInflater mInflater = (LayoutInflater) context
                    .getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
            if (convertView == null) {
                convertView = mInflater.inflate(R.layout.emotion_holder, null);
                holder = new ViewHolder();
                holder.li = (LinearLayout) convertView.findViewById(R.id.li);
                holder.title = (TextView) convertView.findViewById(R.id.emo_name);
                holder.pic = (ImageView) convertView.findViewById(R.id.lock);
                holder.desc = (TextView) convertView
                        .findViewById(R.id.tim);

                convertView.setTag(holder);
            } else {
                holder = (ViewHolder) convertView.getTag();
                convertView.setTag(holder);
            }



            try {




                holder.title.setText(rowItems.get(position).getE_name());
                //holder.desc.setText(rowItems.get(position).getDesc());

                // holder.rl.setTag(position);
                holder.li.setOnClickListener(new OnClickListener() {

                    @Override
                    public void onClick(View v) {

                    if(//check your condition here)
                {
                                     //you please put you image accordingly to the condition
                    holder.pic.setImageResource(R.drawable.lockkey);
                }
                else
                {
                                    //you please put you image accordingly to the condition
                    holder.pic.setImageResource(R.drawable.unlockkey);

                }

                    }
                });
            } catch (Exception e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }

            return convertView;
        }

Answer 3

Take an boolean array and set values accordingly if true or false and on click of list item check if value is true at that position set false and vice versa. and then notify adapter that data set has changed by adapter.notifyDataSetChange();