Replacing ListView row with another layout onClick

Question

I have a ListView with only TextView. I want an implementation in which if I click on a ListView row, an edittext with a replace button should appear and whatever I type in that edittext and click replace, the listrow should update. My main problem which I face is inflating a layout on List row.Can anybody tell me how to achieve this?

public class ContextMenuActivity extends Activity {
    private ListView list;
    TextView tv;
    ArrayList<String> alistItems;
    int loopCount;
    CustomAdapter adapter;
    LayoutInflater inflater;
    TextView textView;
    EditText edtTextToReplace;
    RelativeLayout rl_inflate;
    View child;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.contextmenulist);
        initComponents();
        setActionListener();
    }

    @Override
    public void onCreateContextMenu(ContextMenu menu, View v,
            ContextMenuInfo menuInfo) {

        super.onCreateContextMenu(menu, v, menuInfo);
        menu.setHeaderTitle("Options");
        menu.add(0, v.getId(), 0, "Edit");
        menu.add(0, v.getId(), 0, "Delete");
        /*
         * MenuInflater inflater = getMenuInflater();
         * inflater.inflate(R.menu.context_menu, menu);
         */
    }



    private void initComponents() {
        inflater = ContextMenuActivity.this.getLayoutInflater();

        list = (ListView) findViewById(R.id.contextmenu_lst_list);
        tv = (TextView) findViewById(R.id.listitem_txt_item);
        alistItems = new ArrayList<String>();
        for (loopCount = 1; loopCount < 30; loopCount++) {
            alistItems.add("Item " + loopCount);
        }
        prepareView();
    }

    private void prepareView() {
        adapter = new CustomAdapter(getApplicationContext(), R.layout.listitem,
                alistItems);
        list.setAdapter(adapter);
        registerForContextMenu(list);
    }

    private void setActionListener() {

        list.setOnItemClickListener(new OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView<?> arg0, final View view,
                    final int arg2, long arg3) {
                System.out.println("alist is " + alistItems);
                textView = (TextView) view.findViewById(R.id.listitem_txt_item);
                rl_inflate = (RelativeLayout) view
                        .findViewById(R.id.rl_inflate);
                child = getLayoutInflater().inflate(R.layout.clicklistitem,
                        null);
                rl_inflate.addView(child);
                textView.setVisibility(View.GONE);
                rl_inflate.setVisibility(View.VISIBLE);
                Button my_btn = (Button) child
                        .findViewById(R.id.clicklistitem_btn_replace);
                edtTextToReplace = (EditText) child
                        .findViewById(R.id.clicklistitem_edt);
                my_btn.setOnClickListener(new OnClickListener() {

                    @Override
                    public void onClick(View v) {
                        textView.setText(edtTextToReplace.getText().toString());
                        alistItems.set(arg2, edtTextToReplace.getText()
                                .toString());
                        rl_inflate.setVisibility(View.GONE);
                        rl_inflate.removeViewInLayout(child);
                        textView.setVisibility(View.VISIBLE);
                        adapter.notifyDataSetChanged();
                    }
                });
            }
        });
    }

    public class CustomAdapter extends ArrayAdapter<String> {
        ArrayList<String> alistItems;
        int resource;

        public CustomAdapter(Context context, int resource,
                ArrayList<String> alistItems) {
            super(context, resource);
            this.alistItems = alistItems;
            this.resource = resource;
        }

        @Override
        public int getCount() {
            return alistItems.size();
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            Holder holder = new Holder();
            if (convertView == null) {
                convertView = inflater
                        .inflate(R.layout.listitem, parent, false);
            }
            holder.tvRow = (TextView) convertView
                    .findViewById(R.id.listitem_txt_item);
            convertView.setTag(holder);
            holder = (Holder) convertView.getTag();
            holder.tvRow.setText(alistItems.get(position));
            return convertView;
        }
    }

    class Holder {
        TextView tvRow;
    }
}

Answer 1

You can achieve this in two ways :-

1. First is in listview's item layout add EditText and a Button and hide them. Now set onItemClickListener of listview in which hide textview and show editext and replace button.

2. Second is create a new layout with edit text and a button and set onItemClickListener for listview and when clicked on row you can easily inflate that layout into your listview's item layout.

Second Solution code:-

inflate.xml

<EditText
            android:id="@+id/enter_txt"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
/>

<Button
            android:id="@+id/btn_replace"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
/>

*list_view_item.xml*

<TextView
            android:id="@+id/my_txt"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="ABCD"
/>

<RelativeLayout
            android:id="@+id/rl_inflate"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
/>

listview onItemClickListener

        listView.setOnItemClickListener(new OnItemClickListener() {

        @Override
        public void onItemClick(AdapterView<?> parent, View view,
                int position, long id) {

                           TextView txt_view = (TextView)view.findViewById(R.id.my_txt);

                           txt_view.setVisibility(View.GONE);

                       RelativeLayout rl_inflate = (RelativeLayout)view.findViewById(R.id.rl_inflate);
                           View child = getLayoutInflater().inflate(R.layout.inflate);
                           rl_inflate.addView(child);


                          Button my_btn = (Button)child.findViewById(R.id.btn_replace);
                          EditText enter_txt = (EditText)child.findViewById(R.id.enter_txt);

                          my_btn.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                                 txt_view.setText(enter_txt.getText().toString());
                                 txt_view.setVisibility(View.VISIBLE);
            }
            });
        }
    });

Answer 2

You can go with either of two solutions below :

1. Include an edittext and replace button along with the textview layout and that should be in hidden state. While clicking on the list item change the visiblity of edit text and button to visible and change that of textview to Gone. While clicking on the replace button, reverse the visibility change.

2. While clicking on the list item, show an alert box with a edittext and replace button. After changing the content and clicking on the replace button, change the textview content to changed value.