Monday, November 26, 2012

Android ListView "Add" button. Add items programatically.

So. I just spent 3 days trying to do this relatively simple task, what I wanted was to create a ListView where I could add items from an array, but here's the catch. I wanted an "Add" button in the bottom and the button shouldn't scroll with the view.

All I found were examples were they effectively did the task but not without showing lots and lots of lines of code before. That made things really difficult to decipher.

Now, this is what you really need.

First, an array, the array can be done in your java file or you could simply make a "string-array" XML file and link it from the main XML's ListView like this: android:entries="@array/xml_list_array"

Second, you need a main XML file, in my case it's called activity_list (the name is the default one that Eclipse generated when I created the activity).

And guess what? That's all you need!

First let's take a look to the main XML's code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <ListView android:id="@+android:id/list"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:choiceMode="multipleChoice" >
    </ListView>

    <Button
        android:id="@+android:id/activity_list_btn"
        android:text="@string/add_row_btn"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:onClick="addRowBtn" />

</LinearLayout>


Pretty basic, all I did was to add a ListView and a Button inside of a linear layout, the ID of the ListView needs to be "list", otherwise it may not work. Also watch the weight attribute and other settings.

Now do this in your java code:

First of all extend the class ListActivity like this example's orange code: "public class List extends ListActivity"

Then in the onCreate method do something like this:

setContentView(R.layout.activity_list);

String[] listItems = {"Item1", "Item2","Item3"};

setListAdapter(new ArrayAdapter
<String>(this, android.R.layout.simple_list_item_1, listItems));

All that does is to create an array, the array could be anything you want (code or if you don't want to use code use an XML file array list instead). Then the code creates an adapter. The ContentView is the one of the main XML file. It probably was  generated automatically. (Unless you have an older ADT version?).

For example this is how my onCreate method looks like:

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_list);
    getActionBar().setDisplayHomeAsUpEnabled(true);

    String[] listItems = {"Item1", "Item2","Item3"};

    setListAdapter(new ArrayAdapter
<String>(this, android.R.layout.simple_list_item_1, listItems));
}

The layout I used is one from the Android resources (android.R.layout.simple_list_item_1) you may choose another or even create one with an XML file.

Then you can implement your button as usual, here's an example.

public void addRowBtn(View button){
    Intent intent = new Intent(this, MainActivity.class);
    startActivity(intent);

}

Believe it or not that's all you need.

This is how it'll look with enough items:

5 comments:

K M KHAIRUL BASHAR said...

Nice code.......; It helps me a lot.......;

Helic said...

I´m glad I could help you :)

Unknown said...

could u please let me know how can i add an image button to each listview item

Helic said...

As I recall instead of the "android.R.layout.simple_list_item_1" you can create an XML file with the "image button" you want.

I'm not into Android development right now, I plan to continue in the near future, then I'll try to post an update.

Unknown said...

To add a button each row you would have to create a custom list adapter which is essentially the same processes as creating fragments except that you use the setListAdapter(ListAdapter adapter) method to implement your custom adapter.

1. Create a new custom layout.xml file

2. Create a class that extends ArrayListAdapter (can be an anonymous class).

3. use the setListAdapter(ListAdapter adapter)


Note: the custom ListAdapter class is responsible for handling the actions of the elements within the ListAdapter View. For example if you have an image button, CustomListAdapter is where to implement the action that happens when the button is clicked for each individual row.

However, the class that contains your ListView would implement the action for clicking each row in onListItemClick(ListView l, View v, int position, long id)