How can I attach a delete button (x) to each member of a dynamically created ListView?

Question

I have a dynamically created list. It's fragment-layout is as follows:

<ListView
android:id="@+id/colorsList"
android:layout_width="match_parent"
android:layout_height="wrap_content" />

When I add a row to the listview, I want an "X" mark to appear at the end of the row so that when the user clicks on the "X", the row gets deleted.

Not sure, if its relevant but, the way I am adding and removing rows to the listview is as follows.

Logic to add a row tot he listView:

@BindView(R.id.understood_languages_list)
View mColorsList;

*********
*********

ListView listFavoriteColors;
listFavoriteColors = (ListView) mColorsList;
ArrayAdapter<String> arrayAdapter = new ArrayAdapter<String>(context, android.R.layout.simple_list_item_1, getColorsList());
listFavoriteColors.setAdapter(arrayAdapter);

Logic to remove a row from the ListView.

listFavoriteColors.setOnItemClickListener(new AdapterView.OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
        initializeView();
        arrayAdapter.remove(((TextView)view).getText().toString());
    }
});

Any helpful suggestions on how this can be achieved is much appreciated.

Answer 1

User Custom Adapter with custom Layout to attach delete button to each item in listview

try this code:

CustomAdapter

public class ListAdapter extends ArrayAdapter<String> {

private int resourceLayout;
private Context mContext;
ListInterFace interface;

public ListAdapter(Context context, int resource, List<String> 
   items,ListInterFace interface) {
    super(context, resource, items);
    this.resourceLayout = resource;
    this.mContext = context;
    this.interface=interface;
}

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

    View v = convertView;

    if (v == null) {
        LayoutInflater vi;
        vi = LayoutInflater.from(mContext);
        v = vi.inflate(resourceLayout, null);
    }

    String value= getItem(position);

    if (value!= null) {
        TextView tt1 = (TextView) v.findViewById(R.id.dummytext);
        Button cancel_click=v.findViewById(R.id.cancel_click);

        if (tt1 != null) {
            tt1.setText(value);
        }
       //remove item on button click
        cancel_click.setOnClickListener(new  View.OnClickListener(){
        @Override
        public void onClick(View view){
            interface.removeItem(position);
        }
    })
    }

    return v;
}

}

R.layout.itemlistrow defines the row of the ListView.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context=".MainActivity">

  <RelativeLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content">
     <TextView
         android:id="@+id/dummytext"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="Dummy"
         android:textColor="@android:color/black"
         android:textSize="18sp"
         android:padding="5dp"/>
     <ImageView 
          android:id="@+id/cancel_click"
         android:layout_width="20dp"
         android:layout_height="20dp"
         android:src="@mipmap/cancel"
       android:layout_alignParentRight="true"
         android:layout_margin="5dp"/>
  </RelativeLayout>
</LinearLayout>

In the MainActivity define ListViewlike this,

ListView yourListView = (ListView) findViewById(R.id.itemListView);

// get data from the table by the ListAdapter
 ListAdapter customAdapter = new ListAdapter(this, R.layout.itemlistrow, myList,  new ListInterFace () {
                    @Override
                      public void removeItem( int position) {
                      myList.remove(position);
                    customAdapter .notifyDataSetChanged();
                 });

 yourListView .setAdapter(customAdapter);

InterFace

public interface ListInterFace  {
   void removeItem(int position);
}

try this link to remove item from list view on button click Remove Item From List View On Button Click