How to customise a ListView in an Android application

Whilst working on an Android application I came across the situation where I wanted to style the items in a list view in a different way to the default. e.g. Create compound fields for each row and change the size of the font and the weight etc. This customisation I thought would be handled by the ListView in the layout however, it doesn’t. This article will explain how to customise the view and why it is like this.

The ListView layout tag is there to define the ListView container and nothing else. By default you can use one of the default adapters to insert content into the ListView, however, as soon as you want to move away from the default implementations you’ll need to write a little code and create another layout file to handle the layout of the row.

Create a layout file for the row

In Android Studio right click on main/res/layout and select New->Layout Resource File call it row.xml


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

<TextView android:layout_width=\"wrap_content\"
android:layout_height=\"wrap_content\"
android:text=\"Column 1\"
android:id=\"@+id/column1\"/>

<TextView
android:layout_width=\"wrap_content\"
android:layout_height=\"wrap_content\"
android:id=\"@+id/column2\"/>
</LinearLayout>

Add a ListView component to your existing main layout file if you haven’t already. e.g.


<ListView
android:id=\"@+id/listview\"
android:layout_width=\"fill_parent\"
android:layout_height=\"fill_parent\" >
</ListView>

Now you need to create a new class that extends the BaseAdapter that we will use to configure our ListView in the activity with the customised ListView row layout.


import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;

/**
* This class is responsible for overriding the Adapter for the ListView to enable us to replace the
* default row layout with our one.
*/
public class ListAdapter extends BaseAdapter {
Context context;
String[] data;

private static LayoutInflater inflater = null;

public CommentListAdapter(Context context, String[] data) {
this.context = context;
this.data = data;
inflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
}

@Override
public int getCount() {
return data.length;
}

@Override
public Object getItem(int position) {
return data[position];
}

@Override
public long getItemId(int position) {
return position;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
View view = convertView;
if (view == null) {
view = inflater.inflate(R.layout.comment_row, null);
}

TextView text = (TextView) view.findViewById(R.id.text);
text.setText(data[position]);

return view;
}
}

The final step is to add some code to your onCreate method in your Activity that configures the ListView component with the adapter defined above. This connects the activity, with the custom list adapter that connects your custom list row layout.


listview = (ListView) findViewById(R.id.listview);
listview.setAdapter(new ListAdapter(this, new String[] { \"Line 1\", \"Line 2\" }));

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s