Question

I am trying to construct a multiline ListView backed by an ArrayAdapter. I would like each row in the list to have two lines and a delete button next to it. When the delete button is clicked, the items in the arrays should be removed and the ListView should refresh itself.

This is the code for the MainActivity, which has an inner class that is the custom ArrayAdapter:

public class MainActivity extends Activity {
ArrayList<String> artistsList = new ArrayList<String>();
String[] artists = {"Matt Nathanson", "Green Day", "Three Days Grace", "LMFAO", "One Direction", 
        "Linkin Park", "Neon Trees", "Cee Lo Green", "Plain White T's", "Metallica", "Maroon 5",
        "Sick Puppies", "Bruno Mars", "Billy Joel", "Don McLean", "Adele", "Gary Jules"};
ArrayList<String> songsList = new ArrayList<String>();
String[] songs = {"Come On Get Higher", "Holiday", "I Hate Everything About You", "Sexy and I Know It", "What Makes You Beautiful",
        "What I've Done", "Animal", "Fuck You", "Hey There Delilah", "Sandman", "Moves Like Jagger",
        "Rip Tide", "Talking to the Moon", "Piano Man", "American Pie", "Someone Like You", "Mad World"};

ListView list;
TestArrayAdapter mArrayAdapter;

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    for(String s : artists) {
        artistsList.add(s);
    }
    for(String s : songs) {
        songsList.add(s);
    }

    mArrayAdapter = new TestArrayAdapter();

    list = (ListView)findViewById(R.id.mainlist);

    list.setAdapter(mArrayAdapter);
}


class TestArrayAdapter extends ArrayAdapter<String> {

    public TestArrayAdapter() {
        super(MainActivity.this, R.layout.row, songs);
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        LayoutInflater inflater = getLayoutInflater();
        View row=inflater.inflate(R.layout.row, parent, false);

        TextView primaryTextView = (TextView)row.findViewById(R.id.primaryTextView);
        TextView secondaryTextView = (TextView)row.findViewById(R.id.secondaryTextView);

        primaryTextView.setText(songsList.get(position));
        secondaryTextView.setText(artistsList.get(position));

        ImageView deleteButton = (ImageView)row.findViewById(R.id.deleteRowButton);
        deleteButton.setTag(position);
        deleteButton.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                artistsList.remove(v.getTag());
                songsList.remove(v.getTag());
                mArrayAdapter.notifyDataSetChanged();
            }
        });

        return row;
    }
}

Calling notifyDataSetChanged() does not seem to do anything; however, the items in the ArrayLists are being deleted. The ListView seems to be independent of changes that I make in the ArrayLists and the ArrayAdapter. Ideally, when I remove an item from the underlying data, I should be able to call notifyDataSetChanged() and the ListView will update itself.

I have looked at the other questions similar to this, but all of them have only a single ArrayList providing data to the ListView, and I can’t figure out how to adapt those solutions for multiline rows. Thanks in advance.

Answer 1

I wrote a tutorial recently on how to create a similar listview. Check it out here

http://www.shubhayu.com/android/listview-with-arrayadapter-and-customized-items

This would help you in creating what you want except the deletion part. The deletion will not be difficult after that. You just need to handle it on the onClick of your delete button. I’ll guide you through it once you get the list up and running.

Also, override you getCount(). That should do the trick.