Android Application Development

List Activity & List View

List View

●Android provides the view "List View" which is capable of displaying a scrollable list of items.

●"ListView"gets the data to display via an adapter. An adapter which must extend "Base Adapter" and is responsible for providing the data model for the list and for converting the data into the fields of the list.

●Android has two standard adapters - Array Adapter -Cursor Adapter

● "Array Adapter" can handle data based on Arrays or Lists while "SimpleCursorAdapter" handle database related data. You can develop your own Adapter by extending these classes or the Base Adapter class.

List Activity

●You can directly use the "List View" in your layout as any other UI component. In case your Activity is primary showing a list you can extend the activity "List Activity" which simplifies the handling of a "List View".

● "List Activity" extends "Activity" and provides simplified handling of lists. For example you have a predefine method if someone clicks on a list element.

●"List Activity" contains a "List Adapter" which is responsible for managing the data. This adapter must be set in the onCreate() method of your Activity via the method setListAdapter().

●If the user select in the list a list entry the method onListItemClick() will be called. This method allows to access the selected element.

List Activity

●Android provides already some default layouts which you can use in your Adapter, e.g.

-"android.R.layout.simple_list_item1". In case you don't want to use one of the pre-defined layouts your own layout must have an element with the id "@android:id/list" which is the ListView.

-You can also use a view with the id "@android:id/empty". This view is displayed if the list is empty. For example you could display here an error message.

ListViews and performance

●Displaying a large dataset must be efficiently implemented on a mobile device. Therefore the ListView only creates views (widget) if needed and attach them to the view hierarchy.

●The default Adapter implementation for a ListView will recycle views, e.g. if a row is not displayed anymore it will be recycled and only its content will change.

● If you implement your own adapter for a view you also should do this to avoid performance problems.

ListActivity with ArrayAdapter and Android standard layout

●Create a new Android project "com.basistraining.listactivity" with the activity "MyList".●You do not need to change the default layout "main.xml". Create the following activity.

public class MyList extends ListActivity {/** Called when the activity is first created. */public void onCreate(Bundle icicle) {super.onCreate(icicle);// Create an array of Strings, that will be put to our ListActivityString[] names = new String[] { "Bangladesh", "India", "China", "Japan","Denmark", "Australia", "Germany", "Indonesia"} // Create an ArrayAdapter, that will actually make the Strings above// appear in the ListViewthis.setListAdapter(new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1, names));}

ListActivity with ArrayAdapter and Android standard layout

@Overrideprotected void onListItemClick(ListView l, View v, int position, long id) {super.onListItemClick(l, v, position, id);// Get the item that was clickedObject o = this.getListAdapter().getItem(position);String keyword = o.toString();Toast.makeText(this, "You selected: " + keyword, Toast.LENGTH_LONG).show();}

ListActivity with ArrayAdapter and Android standard layout

ListActivity with own layout

●You can also define your own layout for the rows and assign this layout to your row adapter. We will add a graphic to each list entry.

●Create the following layout file "rowlayout.xml" in the res/layout folder of your project"com.basistraining.listactivity".

ListActivity with own layout

●Change your activity "MyList" to the following. This is almost the same coding as in the previous example,●The only difference is that we are using our own layout in the ArrayAdapter and telling the adapter which UI element should contains the text.

ListActivity with own layout

ListActivity with own layout

ListActivities with flexible layout●The following uses an image "no.png". I placed it in the "res/drawable-mdpi" folder. You must maintain your own icon. In the easiest case just copy "icon.png" to "no.png" and use a drawing program to change it a little bit.

●If you want to influence the display of the different rows you can define your own adapter and override the getView() method. This method is responsible for creating the individual rows of your "ListView". getView() need to return a View (containing several others) for each row.

●For this read the pre-defined layout via the class "LayoutInflator" and return one individual view per row. We extend ArrayAdapter but we could also directly implement "BaseAdapter“

●If "convertView" is not null we re-used this view. Android recycles rows (views) which are not displayed anymore. Using exsting rows saves memory and CPU consumption.

ListActivities with flexible layout

●Our implementation will also use the so-called "ViewHolder" pattern. The method findViewById() is a expensive operation, therefore we should avoid doing this operation if not necessary.

●The ViewHolder stores a reference to the required views in a row. This ViewHolder is then attached to the row via the method setTag().

●Every view can get a tag assigned. If the row is recycled we can get the ViewHolder via getTag() method.

●This seems like a lot of overhead but is much faster then the repetitive call of findViewById().

ListActivities with flexible layout

●We still using the project "com.basistraining.listactivity". Create the following class "MyArrayAdapter.java".

ListActivities with flexible layout

ListActivities with flexible layout

●Now In the MyList class we write the following code

ListActivities with flexible layout

Rows interacting with the data model

●Your row layout can also contain views which interact with the underlying data model. ●For example you can have a "Checkbox" view in your row and if the checkbox is selected you change the data which is displayed in the row.

●We still use the same project. Create a new row layout "rowbuttonlayout.xml“.

Rows interacting with the data model

Rows interacting with the data model

●create for this example the class "Model" which hold the name and the information if this element is currently selected.

Rows interacting with the data model

●Create the following Adapter. This adapter will add a listener on the Checkbox. If the checkbox is selected the underlying data of the model is also changed. Search Checkbox gets its model element assigned via the setTag() method.

Rows interacting with the data model

Rows interacting with the data model

●Finally change your "ListView" to the following.

Rows interacting with the data model●If you start your app you should be able to flag items. These changes will be reflected in your model.