Question

I’ve been looking for an API or an object that shows a list like the one depicted below –

It’s important that every item will have a title + smaller text, checkboxes on the left / right, and an option to add text on the top right / left side (like the dates in the picture)

I’ve been searching for it but haven’t found it yet, except for different lists…

Thanks!

Answer 1

You’ve got to create a custom list view. Here’s a tutorial for you: http://www.androidhive.info/2012/02/android-custom-listview-with-image-and-text/

---

Edit
In response to your questions in the comments:

How can I add checkboxes instead of pictures?

You need to edit the list_row.xml file to change the ImageView to a CheckBox. This is the ImageView xml code:

<ImageView
   android:id="@+id/list_image"
   android:layout_width="50dip"
   android:layout_height="50dip"
   android:src="@drawable/rihanna"/>

But we want a checkbox there don’t we. Lets change that block so it’s a CheckBox:

<CheckBox
   android:id="@+id/cb_list"
   android:layout_width="50dip"
   android:layout_height="50dip"
   android:text="This is a checkbox"/>

Then in the LazyAdapter.java file, we need to remove the bits with ‘ImageView’ in them, otherwise the LazyAdapter will try and do stuff to an ImageView that isn’t there. Here’s the updated class (With the removed bits commented out):

public class LazyAdapter extends BaseAdapter {

    private Activity activity;
    private ArrayList<HashMap<String, String>> data;
    private static LayoutInflater inflater=null;
    //public ImageLoader imageLoader; 

    public LazyAdapter(Activity a, ArrayList<HashMap<String, String>> d) {
        activity = a;
        data=d;
        inflater = (LayoutInflater)activity.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        //imageLoader=new ImageLoader(activity.getApplicationContext());
    }

    public int getCount() {
        return data.size();
    }

    public Object getItem(int position) {
        return position;
    }

    public long getItemId(int position) {
        return position;
    }

    public View getView(int position, View convertView, ViewGroup parent) {
        View vi=convertView;
        if(convertView==null)
            vi = inflater.inflate(R.layout.list_row, null);

        TextView title = (TextView)vi.findViewById(R.id.title); // title
        TextView artist = (TextView)vi.findViewById(R.id.artist); // artist name
        TextView duration = (TextView)vi.findViewById(R.id.duration); // duration
        //ImageView thumb_image=(ImageView)vi.findViewById(R.id.list_image); // thumb image

        HashMap<String, String> song = new HashMap<String, String>();
        song = data.get(position);

        // Setting all values in listview
        title.setText(song.get(CustomizedListView.KEY_TITLE));
        artist.setText(song.get(CustomizedListView.KEY_ARTIST));
        duration.setText(song.get(CustomizedListView.KEY_DURATION));
        //imageLoader.DisplayImage(song.get(CustomizedListView.KEY_THUMB_URL), thumb_image);
        return vi;
    }
}

When one is clicked how can I get his position in the list so I’ll be able to affect the item?

When a list item is clicked, a OnItemClickListener is triggered. You defined your OnItemClickListener in your CustomizedListView Activity. Look near the bottom, it looks like this:

// Click event for single list row
list.setOnItemClickListener(new OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

    }
});

Say we wanted to show a popup (called a Toast on Android) when the list is clicked, we’d do this:

// Click event for single list row
list.setOnItemClickListener(new OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        Toast.makeText(CustomizedListView.this, "List item " + position + "clicked", Toast.LENGTH_SHORT).show();
    }
});

How can I make the list dynamic ? I mean how can I add new items / delete items by the users choice.

To add or delete items you’ve got to modify the songsList and then update the list.
Say we wanted to add a new item to the songsList, all we have to do is this:

    HashMap<String, String> map = new HashMap<String, String>();

    map.put(KEY_ID, "0");
    map.put(KEY_TITLE, "Title here");
    map.put(KEY_ARTIST, "Artist here");
    map.put(KEY_DURATION, "4:08");
    map.put(KEY_THUMB_URL, "http://www.moveoneinc.com/blog/wp-content/uploads/2011/12/Dog-2.jpg");

    // adding HashList to ArrayList
    songsList.add(map);

And to delete a song just do this:

songsList.remove(3); //Where 3 means the second element in the list

Once you’ve edited your songsList you need to update the list to load the songsList again. You do this like so:

list.notifyDataSetChanged();

I hope that clears it up, I’ve not tested this code, but is should all work.