Android – Custom ListView


Custom listView.

Step 1:

First, preparing data for the listview (strings, images…).
– With images, you should create new folder name “drawable” in res folder and paste all images to it (example 12 imgs below)

  • With strings, you should store it in res/values/strings.xml, create 2 string arrays as below:

    remember the name for each string array (name, description), it’s as same as theid for us to use in java code. that’s all we need in step 1.

Step 2:

Create new layout that you want it display in single row. In my example, a single row has one imageview and two textview, so we’ll create a new layout as below:

and now go to the mainActivity.java, get all the widget from xml file we just created, see the picture below:

return the main layout xml file, we add a listView to this layout, remember set ID for this listview.

Step 3:

Create 2 new classes name “CustomAdapter” or anything you want, this class is extends from ArrayAdapter<> and ViewHolder class


you see above, we have a constructor and a override method named “getView”, this method help we connecting 3 widgets in xml into 1 object and after that, returning it to the main activity class.
The ViewHolder class help getting widgets in xml one times in the first times we load (when scrolling down), if review it in the seecond times, just get it from row (vh = (ViewHolder) row.getTag();)
then we setText, setImageResource for widgets, finally we return the row

Finally:

Come back to the main Activity, see onCreate method below:

we call CustomAdapter and set this adapter for the listView, view params in line “final Custom adapter adapter….” carefully.
To add event for listView, we add setOnItemClick….. I’ll talk about this in later.
and result:

Advertisements

One thought on “Android – Custom ListView

  1. Pingback: Table of contents | David Ng

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s