Android: Setting up ListView with delete button

Question

There are similar questions out there, but I haven't seen one answer this very direct question: How do you set up a custom listview with a mixture of layouts?

I'm trying to set up a list view where each row has the following:

A primary text line, a secondary (sub) text line, and a delete button. An alternative to this would be having each row selectable with a delete button at the header or footer of the visible space (but out of the scrollable space, obviously). Honestly whichever is easier at this point is preferable.

What I'm left with is setting up a secondary layout xml to define each row element, but inside that I'm looking another layout to separate the button from the vertical orientation of the text layout.

Here's my current code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:orientation="vertical" >
  <ListView android:layout_height="wrap_content"
    android:layout_width="fill_parent"
    android:choiceMode="multipleChoice"
    android:id="@+id/android:list"/>  
</LinearLayout>

The layout for each row looks like this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:orientation="vertical">
  <TextView android:id="@+id/line_a"
    android:textSize="14dp"
    android:textColor="#FFFFFF"
    android:textStyle="italic"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"/>
  <TextView android:id="@+id/line_b"
    android:textSize="12dp"
    android:textColor="#BFFF00"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"/>
</LinearLayout>

This sets up a nice multi-colored two-level text for each row in the ListView.

So what's next? To add a button on the right hand side I need to set up another layout (grid perhaps? 2 column 1 row?) with a button on the right hand side? Another alternative would be something like wrapping the existing vertical linear layout in another linearlayout with the horizontal orientation, yes?

Does this not seem awkward and painful to anyone else? :)

Ali Behzadian Nejad · Accepted Answer · 2013-04-09 21:33:26Z

2

Create a listView an ArrayAdapter:

listView = (ListView) findViewById(R.id.listView);
listViewArrayAdapter listViewArrayAdapter = new listViewArrayAdapter(this, values);
listView.setAdapter(listViewArrayAdapter);

And then create an internal class:

public class ListViewArrayAdapter extends ArrayAdapter<Value> {

    Context context;
    Value[] values;

    public ListViewArrayAdapter(Context context, Value[] values) {
        super(context, R.layout.layout_with_list, values);
        this.values = values;
        this.context = context;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        convertView = inflater.inflate(R.layout.list_item, parent, false);

        TextView titleTextView = (TextView) convertView.findViewById(R.id.titleTextView);
        titleTextView.setText(values[position].getName());
            // If you have buttons in your list_item.xml, you can inflate them an then create a listener for them

        return convertView;

    }
}

answered Apr 9, 2013 at 21:33

Ali Behzadian Nejad

9,0849 gold badges65 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Raevik Over a year ago

Thanks Ali. I assume the "list_item" layout I'm inflating correspond to the row layout I shared above?

Vasil Valchev · Accepted Answer · 2013-04-09 21:34:02Z

Why don`t you use relative layout, i have make this 3h ago. Here it is my ItemRow code. I think the more tricky will be where to handle the onClick method for this button. In my code the second image is remove button, image whit onClick method. I extend the ArrayAdapter, because i want this image to be visible only in edit mode, like delete contact items in Iphone

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/layout_item"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView android:id="@+id/image_list_icon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:contentDescription="@string/image_view"
    android:src="@drawable/clock_white" />
<TextView android:id="@+id/text_list_label"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:layout_toRightOf="@id/image_list_icon"
    android:paddingLeft="5dp"
    android:text="@string/hello_world" />
<ImageView android:id="@+id/image_list_remove"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:contentDescription="@string/image_view"
    android:src="@drawable/remove" />  
<TextView android:id="@+id/text_list_time"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:layout_toLeftOf="@id/image_list_remove"
    android:paddingRight="10dp"
    android:text="@string/text_x" />

Collectives™ on Stack Overflow

Android: Setting up ListView with delete button

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related