Question

I have recently started making an Android app that requires a list of 20 names and counters for each individual name, both displayed on the screen. Every time someone taps a name, the counter for that name increases by one. This means that the name and the counter need to be ‘connected’ in some way.

I started off by creating a basic list of names using a ListView. This is my code:

public class ExampleActivity extends ListActivity { 
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        String[] NAMES = getResources().getStringArray(R.array.names_array);
        setListAdapter(new ArrayAdapter<String>(this, R.layout.list_item, NAMES));

        ListView lv = getListView();
        lv.setTextFilterEnabled(true);

        lv.setOnItemClickListener(new OnItemClickListener() {
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                if (position == 0) //Shows toast with name
                Toast.makeText(getApplicationContext(), ((TextView) view).getText(), Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Here’s the list_item.xml file:

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:padding="10dp"
    android:textSize="16sp" >
</TextView>

Now I’m looking for a way to display the counters in the list. The most user friendly one in my opinion would be a list in which the names are displayed on the left (which is currently the case) and their counters on the right (in one line with the names; alignment in a list is not my problem).

However, since I’m just a beginner in Android, I’m not sure how to pull this off. My first problem is that I don’t know how to somehow merge my list of 20 names with a list of 20 integers and make these integers specific for each name. My second issue is how to display all this on the screen.

Answer 1

Organize your row data(name + counter) in a simple Model class:

class Model {
    String name;
    int counter;

    Model(String name, int counter) {
        this.name = name;
        this.counter = counter;
    }

    @Override
    public String toString() {
       return name;
    } 
}

Then construct a row layout to show the name and counter:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/counter"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true" />

</RelativeLayout>

Finally bind the Model data to the row layout:

public class ModelAdapter extends ArrayAdapter<Model> {

        private ArrayList<Model> data;

        public ModelAdapter(Context context, int resource,
                int textViewResourceId, ArrayList<Model> objects) {
            super(context, resource, textViewResourceId, objects);
            data = objects;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            // let the adapter bind the name to the list
            View v = super.getView(position, convertView, parent);
            // find the counter TextView so we can update it's value
            TextView counterTv = (TextView) v.findViewById(R.id.counter);
            //get the data from the list for this row.
            Model obj = data.get(position);
            //set the counter value for this row
            counterTv.setText(String.valueOf(obj.counter));
            return v;
        }       

    }

To use your new adapter:

   //...
    String[] NAMES = getResources().getStringArray(R.array.names_array);
    // construct the list of model object for your rows:
    ArrayList<Model> items = new ArrayList<Model>();
    for (int i = 0; i < 20; i++) {
        items.add(new Model(NAMES[i], 0));// I guess the counter starts at 0
    }
    mAdapter = new ModelAdapter(this, R.layout.list_item, R.id.name, items);
    setListAdapter();
    ListView lv = getListView();
    lv.setTextFilterEnabled(true);      

//...

The ListActivity already has the OnItemClickListener implemented, is the onListItemClick method:

public void onListItemClick(ListView parent, View view, int position, long id) {
                        Model clickedRowData = parent.getItemAtPosition(position);
                        clickedRowData.counter++;
                        // notify the adapter that something was updated
                        mAdapter.notifyDataSetChanged();
                    }