Monday, October 1, 2012

Android ListView : ArrayAdapter, Manage Items, User interaction

Topics covered

Android ListView

ArrayAdapter

Add item to ListView

ContextMenuInfo

In the last post we talked about the ListView widget and how we need an adapter to show items inside this widget. We showed how an user can interact with this view using OnItemClicklistener. In this post we want to go further and show another type of adapter called ArrayAdapter. We will see, in the second part, how to handle list items at runtime adding or removing them.

ArrayAdapter

In the last post we talked about the SimpleAdapter and how it is possible to add items to the ListView using this adapter. Another important and very useful adapter is the ArrayAdapter. This class is a standard Android class and it is very simple to use. We can use it every time we have an array or a list of items we want to show.

Android ListView getting started

Modifying  the source code of the last post, where we created a planet list we can replace the SimpleAdapter with ArrayAdapter. In our case the ArrayAdapter contains just strings to make things simpler. So we have:

 aAdpt=new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, android.R.id.text1, planetsList);

where again android.R.layout.simple_list_item_1 is the layout for our single row and android.R.id.text1 is the id of the TextView we want to fill with the planet name. In this case, the planetList is  simply a List of strings.


List<String> planetsList = new ArrayList<String>();
private void initList() {
// We populate the planets

planetsList.add("Mercury");
planetsList.add("Venus");
planetsList.add("Mars");
planetsList.add("Jupiter");
planetsList.add("Saturn");
planetsList.add("Uranus");
planetsList.add("Neptune");
}
When you run the application, the result is the same shown in the last post. Now we want to go further and start analyizing how we can manage items dynamically.

Android ListView: Manage Items dynamically

Let's suppose we want to manage the items shown inside the ListView dynamically, adding and removing items. First we focus our attention about the add functionality. To do so we need a button, so that when user presses it a dialog window appears. In the dialog window, we add an input text where the user can insert the planet name. To make the interface more friendly, we want the button is always visible even if when the list scrolls up and down. To do it we first create a LinearLayout like that:

<linearlayout android:layout_height="match_parent" 
android:layout_width="match_parent"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">

<listview android:id="@+id/listView"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_width="match_parent">


<button android:id="@+id/addBtn"
android:layout_height="80dp"
android:layout_weight="0.5"
android:layout_width="match_parent" android:onclick="addPlanet"
android:text="Add planet">
</button></listview>
</linearlayout>

Notice that we used a layout_weight attribute to give more "weight" to the ListView widget respect to the Button. If we run the code we have:

ListView add button weight nexus

In the Button we added onClick attribute and we declared the method to be called when user click on it. If you want more information please look here.

So in this method we simply open a dialog where user insert the new planet name.
// Handle user click

public void addPlanet(View view) {

final Dialog d = new Dialog(this);

d.setContentView(R.layout.dialog);

d.setTitle("Add planet");

d.setCancelable(true);

final EditText edit = (EditText) d.findViewById(R.id.editTextPlanet);

Button b = (Button) d.findViewById(R.id.button1);

b.setOnClickListener(new View.OnClickListener() {

public void onClick(View v) {

String planetName = edit.getText().toString();

MainActivity.this.planetsList.add(planetName);

// We notify the data model is changed
MainActivity.this.aAdpt.notifyDataSetChanged();

d.dismiss();

}

});

d.show();

}
So that when user clicks on add button we have:

list view add item arrayadapter nexus

..and once the user clicks on add:

Android ListView add item on arrayadapter nexus

The important thing to notice is the notifyDataSetChanged(). We call this adapter method on to notify that the items are changed and it is necessary refresh the view.

As we did for the add functionality, we can implement the delete item. In this case we want that when the user long-press on an item, it will be deleted. To handle this event, as we showed in the last post we overide the onContextItemSelected method in this way:
// This method is called when user selects an Item in the Context menu
@Override>
public boolean onContextItemSelected(MenuItem item) {
int itemId = item.getItemId();
AdapterContextMenuInfo aInfo = (AdapterContextMenuInfo) item.getMenuInfo();
planetsList.remove(aInfo.position)
aAdpt.notifyDataSetChanged();
return true;
}
In this snippet, first we retrieve the AdapterContextMenynfo needed to get the item position and then we remove it from the list. Again we notify to the adapter that the list is changed.


Source code @ github

Android ListView : ArrayAdapter, Manage Items, User interaction Rating: 4.5 Diposkan Oleh: Unknown

0 comments:

Post a Comment