{"id":195,"date":"2011-09-27T15:37:10","date_gmt":"2011-09-27T19:37:10","guid":{"rendered":"http:\/\/digitallibraryworld.com\/?p=195"},"modified":"2011-09-27T15:37:24","modified_gmt":"2011-09-27T19:37:24","slug":"android-listview-and-listactivity-example-from-web-developers-perspective","status":"publish","type":"post","link":"https:\/\/heisbudi.com\/?p=195","title":{"rendered":"Android ListView and ListActivity example from Web Developer’s perspective"},"content":{"rendered":"
\"Android<\/a>
Android ListView<\/figcaption><\/figure>\n

So, like I mentioned in my previous blog, I started picking up android recently. It’s been fun. It’s confusing sometimes translating web developer’s framework into Android’s mindset. This is what I learn. My current self-initiated project is to build a room reservation system for Android. Ball State has an online room reservation<\/a> system, and I’m basically building an android app for it. When someone is searching for a room, basically list of rooms will be displayed. This list has 2 rows(pictured on the right).<\/p>\n

I’m so used to being a web developer. To me this looks like a drop down(combo) box where each option has its own unique ID field. Well…. similar, but a bit different in android. This was somewhat confusing to me because each row in drop down box has only single row. In android, a list item can consist of more than 1 row or column, but still uses one single unique identifier.<\/p>\n

Let’s get crackin’ from the bottom up.<\/p>\n

First of all, you can customize pretty much how everything looks in android. You just need to add an XML file to create a layout. Kinda like the CSS in Android in my opinion. So, let’s define how each row is going to look like. Basically I want each Item to have 2 rows and to look like below.<\/p>\n

\"ListView<\/a>
ListView item<\/figcaption><\/figure>\n

The first row is a TextView, the room number posted outside each room in the library. This will be populated based on the search query sent to a web service I wrote. The second row will be the detail of the room, will also be pulled from the web service. I need to tell Android that I want each of my item in a ListView to look exactly like the one on the left when it’s filled with data.<\/p>\n

This is the XML layout code. I called mine item_listing.xml<\/p>\n

\r\n\r\n\r\n\t<\/TextView>\r\n\t<\/TextView>\r\n <\/LinearLayout>\r\n\r\n<\/pre>\n
Don’t worry about the background=@drawable code above for now. It’s yet another layout(drawable) to tell each item how they should be displayed when they are in clicked mode, hover mode, or regular mode. I’ll post the code for it below.<\/p>\n
Okay, I just defined how each item is going to look. Now, I need to define how the screen is going to look. I basically want it to look like the first picture on the right above(Android ListView). The area with white background is 2 TextViews object occupying 2 rows. These 2 rows do not scroll. The red area is a scrollable ListView populated using the XML layout(rule) above for each item. Let’s call this rooms.xml This is the code:<\/p>\n
\r\n\r\n\r\n    \r\n\r\n    \t\r\n    \t\r\n<\/LinearLayout>\r\n<\/pre>\n
Note the ListView section of the layout. I named the list id list.<\/strong> This is so that I can shift all the data population work to Android, requiring me to code less(very less). This is the awesome part. I don’t need to worry about writing loop to populate the list. I just need to provide the data, and shove it to Android. Let’s do that now. I need to create an activity to display room.xml layout that extends ListActivity. I’m copying only the onCreate method, which shows how to populate the ListView<\/p>\n
\r\npublic class Rooms extends ListActivity {\r\n\tprivate List> fill;\r\n\tprivate static final String ENC = \"UTF-8\";\r\n\tprivate int selected;\r\n\t@Override\r\n\tpublic void onCreate(Bundle savedInstance){\r\n\t\tsuper.onCreate(savedInstance);\r\n                \/\/use rooms.xml layout\r\n\t\tthis.setContentView(R.layout.rooms);\r\n\t\t\r\n                \/\/set the display text for the white background area. \r\n                \/\/don't worry about this\r\n\t\tTextView lblAvailRoom = (TextView) findViewById(R.id.lblAvailRooms);\r\n\t\tlblAvailRoom.setText(getResources().getString(R.string.strAvailableRooms) + \r\n                \" \" + this.getIntent().getExtras().getString(\"startDay\"));\r\n\t\tTextView lblTime = (TextView) findViewById(R.id.lblTime);\r\n\t\tlblTime.setText(getResources().getString(R.string.strFrom) + \r\n                \" \"+ this.getIntent().getExtras().getString(\"startTime\") + \r\n                \" \" + getResources().getString(R.string.strTo) + \" \" + \r\n                this.getIntent().getExtras().getString(\"endTime\"));\r\n\t\t\r\n                \/\/the rooms parameter passed to this activity contain the result of the web service call.\r\n                \/\/It contains the following string \r\n                \/\/roomid - the unique identifier of a room that will be used in code\r\n                \/\/name - the actual name of the room\r\n                \/\/capacity - capacity of of the room\r\n               \/\/ the are formatted as follow: roomid,name,capacity;roomid,name,capacity\r\n\r\n\r\n                \/\/check to see how many room is available \r\n                \/\/so that i can declare the size of my List\r\n\t\tint length= this.getIntent().getExtras().getString(\"rooms\").split(\";\").length;\r\n\t\t\r\n\t\tString[] rooms = new String[length];\r\n\t\trooms=this.getIntent().getExtras().getString(\"rooms\").split(\";\");\r\n\t\t\r\n\t\tfill = new ArrayList>();\r\n\r\n                \/\/I'm using HashMap to store my name-value pair of the available room\r\n\t\tfor(int i=0;i map = new HashMap();\r\n\t\t\tmap.put(\"roomid\",temp[0]);\r\n\t\t\tmap.put(\"name\", temp[1]);\r\n\t\t\tmap.put(\"capacity\", temp[2]);\r\n\t\t\tmap.put(\"max\", \"Capacity: \"+ temp[2] + \" People\");\r\n\t\t\t\r\n\t\t\tfill.add(map);\r\n\t\t}\r\n                \/\/If you don't understand what HashMap does, look it up on google.\r\n                \/\/ at this point all my room information is available in a variable called fill\r\n                \/\/ all I need to do is create an adapter, fill the adapter with the fill variable,\r\n                \/\/ and send the adapter to android to process(to fill the layout with data)\r\n            \r\n               \/\/use simple adapter\t\t\r\n               \/\/note that I tell the adapter to use the variable named \"name\" and \"max\"\r\n               \/\/to bing to to text view I specified\r\n               \/\/the \"name\" variable will be displayed on android id txtRoom\r\n               \/\/in item_listing.xml\r\n               \/\/the \"max\" variable will be displayed on android id txtCapacity\r\n              \/\/ in item_lising.xml\r\n\t\tSimpleAdapter adapter = new SimpleAdapter(this, fill, R.layout.item_listing, \r\n                    new String[] {\"name\",\"max\"}, new int[]{R.id.txtRoom,R.id.txtCapacity});\r\n\r\n              \/\/send it off to android ti display on a layout\r\n\t\tsetListAdapter(adapter);\r\n\t}\r\n}\r\n<\/pre>\n
Note that the fill<\/i> variable, and the selected<\/i> variable are both global within this class. This means I can track which item is selected anywhere in this class. To track which item is selected, onListItemClick abstract method needs to be implemented<\/p>\n
\r\n\tprotected void onListItemClick(ListView l, View v, int position, long id){\r\n\t\tsuper.onListItemClick(l, v, position, id);\r\n\t\tselected=position;\t\t\t\t\r\n\t}\r\n<\/pre>\n
Now, you can refer to a clicked item from anywhere in this class by calling:<\/p>\n
\r\nfillList.get(selected).get(\"name\")\r\n<\/pre>\n
or<\/p>\n
\r\n\/\/this is the unique identifier of a selected item in the list\r\nfillList.get(selected).get(\"roomid\")\r\n<\/pre>\n
That’s pretty much it. The hardest part is to understand it from web developer’s view. <\/p>\n
As promised above, this is the XML code that is responsible of how buttons should look in different state:
\nroom_listing_states.xml<\/p>\n
\r\n\r\n\r\n\r\n\t\r\n\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t<\/shape>\r\n\t<\/item>\r\n\t\t\r\n\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t<\/shape>\r\n\t<\/item>\r\n\t\r\n\t\t\r\n\t\t\t\t\r\n\t\t<\/shape>\r\n\t<\/item>\r\n<\/selector>\r\n<\/pre>\n
<\/a><\/a><\/a><\/a><\/div>
<\/a><\/a><\/a><\/a><\/div>","protected":false},"excerpt":{"rendered":"
Web developer working with Android ListView<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[20],"tags":[],"_links":{"self":[{"href":"https:\/\/heisbudi.com\/index.php?rest_route=\/wp\/v2\/posts\/195"}],"collection":[{"href":"https:\/\/heisbudi.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/heisbudi.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/heisbudi.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/heisbudi.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=195"}],"version-history":[{"count":20,"href":"https:\/\/heisbudi.com\/index.php?rest_route=\/wp\/v2\/posts\/195\/revisions"}],"predecessor-version":[{"id":217,"href":"https:\/\/heisbudi.com\/index.php?rest_route=\/wp\/v2\/posts\/195\/revisions\/217"}],"wp:attachment":[{"href":"https:\/\/heisbudi.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=195"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/heisbudi.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=195"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/heisbudi.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=195"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}