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);
            }
            });
        }
    });