Customizing View Adapters in Android

This tutorial is a more general tutorial, focussing on an Android UI aspect that can be used in games as well as other apps.

View Adapters are a useful feature which allow us to reuse UI skeletons. The official Android documentation does not give a detailed description on how these can be used / customized. We’ll try to show how you can customize View Adapters to create your own reusable UI elements.

Say you want to show a list of images along with their textual description, the first Android ViewGroup that comes to mind is the ListView. To fill the ListView with our custom widgets we would need an adapter. We’ll extend the ArrayAdapter in this case. The adapter class should look something like this:

CustomListAdapter:

class CustomListAdapter extends ArrayAdapter <ImageResourceData> {
  private ArrayList<ImageResourceData> items;
  public CustomListAdapter ( Context context, int viewSourceId, ArrayList<ImageResourceData> items )
  {
    super ( context, textViewResourceId, items );
    this.items = items;
  }
  @Override
  public View getView( int position, View convertView, ViewGroup parent ) {
    View v = convertView;
    if ( v == null ) {
        LayoutInflater vi = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        v = vi.inflate(R.layout.itemLayout, null);// itemLayout is the xml layout of an item in the list
    }
    Integer image = items.get(position).imageResId;
    Integer text = items.get(position).textResId;
    ImageView iv = (ImageView)v.findViewById(R.id.image);
    TextView tv = (TextView)v.findViewById(R.id.text);
    if ( iv != null ) {
       iv.setImageResource(i);
    }
    if ( tv != null ) {
       tv.setText(text);
    }
    return v;
  }
}

The class ImageResourceData should look something like:

class ImageResourceData {
    public Integer imageResId;
    public Integer textResId;
}

The corresponding xml layout, i.e. the itemLayout used to inflate the view above should be something like:

<LinearLayout
       <ImageView
             android:id="@+id/image"
        />
        <TextView
             android:id="@+id/text"
         />
/>

The example presented above is by no means complete, but it demonstrates the more important implementation details that need to be taken care of when using View Adapters. The itemLayout is what defines one row in the list of items, while the ImageResourceData structure is used to create an array of data for filling up these items. This array is passed to the adapter on creation of its instance through the ArrayList<ImageResourceData> items of its constructor.

Overriding getView() Method:

The most important method in the adapter class that we need to override for customization is the getView method. This method does the real work of filling up row data in the list. First the layout inflater service is used to set the structure of the view to that described in itemLayout.xml. Then, the position argument is used to search for row specific image and text data, and bound to the row’s view.

Using it in Real View:

To use this adapter on a real view, setListAdapter () is used which would look something like:

setListAdapter ( new CustomListAdapter ( this, R.layout.itemLayout, imageDataList ) );

Here imageDataList is a list of objects of the type ImageResourceData, which contain data to be filled up in the list layout created above.

We hope that this was useful. If you have any doubts/queries, please put them in the comments and we’ll try to answer them. Thanks!