Android - Custom Adapters


Adapter: Adapter helps to convert data source into view items. This is one of the most important feature of android. We can build our custom adapters to include images and texts.

In this tutorial we will build our own custom adapter to get view from data source.

Data Source

We will take 3 items for each row. Each data item will have:

  1. Id.
  2. Name.
  3. Price.

Simple java class

  1. We need one constructor which takes 3 arguments to set id, name and price.
  2. We also need three getters to get values.
package com.example.customadapterkb4dev;

public class DataItem {
   int id;
   String name;
   int price;
   DataItem(int id, String name, int price){
	   this.id = id;
	   this.name = name;
	   this.price = price;
   }
   int getPrice(){
	   return this.price;
   } 
   String getName(){
	   return this.name;
   }
   int getId(){
	   return this.id;
   }
   
   
}

Layout for our row

list_items.xml

  1. Create 3 TextView.
  2. Set the weight of each TextView be 1.
  3. We are setting gravity as center so that our text will be align at center.
<?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="horizontal" >

    <TextView
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView" 
        android:layout_weight="1"
        android:gravity="center"/>

    <TextView
        android:id="@+id/price"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
         android:layout_weight="1"
        android:gravity="center" />

    <TextView
        android:id="@+id/id"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView" 
         android:layout_weight="1"
              android:gravity="center"/>

</LinearLayout>

Now the main layout will be having a listview.

activity_main.xml

  • Root of our layout would be LinearLayout.
  • We wish to add ListView so give it an id.
<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:id="@+id/listView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
    </ListView>

</LinearLayout>

Now Let us build our custom adapter

For that you need to make a subclass of ArrayAdapter.

public class Customadapter extends ArrayAdapter<DataItem>{
}

Add constructor for your custom adapter so that you can pass the data from your main activity.

  • Call the super constructor and pass the layout of the row.
public Customadapter(Context context, DataItem[] objects) {
		super(context, R.layout.list_items, objects);
		// TODO Auto-generated constructor stub
		
	}

Now, you need to override the getView() method. In this method we will inflate the layout and set the values of textview.

@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		// TODO Auto-generated method stub
}

Implementation of getView()

  1. Get the layout inflater
    LayoutInflater inflater = ((Activity)context).getLayoutInflater();
  2. Inflate the layout
    convertView = inflater.inflate(R.layout.list_items, parent, false);
    
  3. Get the reference of view-tems
    TextView name = (TextView) convertView.findViewById(R.id.name);
    		TextView price = (TextView) convertView.findViewById(R.id.price);
    		TextView id = (TextView) convertView.findViewById(R.id.id);
  4. Load text in view-items
    name.setText(dataItems[position].getName());
    		price.setText(String.valueOf(dataItems[position].getPrice()));
    		id.setText(String.valueOf(dataItems[position].getId()));

Full implementation

CustomAdapter.java

package com.example.customadapterkb4dev;

import android.app.Activity;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.TextView;

public class Customadapter extends ArrayAdapter<DataItem>{

	DataItem[] dataItems = null;
	Context context;
	


	public Customadapter(Context context, DataItem[] objects) {
		super(context, R.layout.list_items, objects);
		// TODO Auto-generated constructor stub
		this.context = context;
		this.dataItems = objects;
		
	}


	
	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		// TODO Auto-generated method stub
	
			LayoutInflater inflater = ((Activity)context).getLayoutInflater();
			convertView = inflater.inflate(R.layout.list_items, parent, false);	
	
		TextView name = (TextView) convertView.findViewById(R.id.name);
		TextView price = (TextView) convertView.findViewById(R.id.price);
		TextView id = (TextView) convertView.findViewById(R.id.id);
		name.setText(dataItems[position].getName());
		price.setText(String.valueOf(dataItems[position].getPrice()));
		id.setText(String.valueOf(dataItems[position].getId()));
		return convertView;
		
	}
	

}

Implementing Activity file

  • We will store our data in DataItems array.
    DataItem[] dataItems;
  • Load the data.
    dataItems = new DataItem[3];
    		dataItems[0] = new DataItem(2, "yes", 5);
    		dataItems[1] = new DataItem(3, "yes", 5);
    		dataItems[2] = new DataItem(4, "success", 6);
  • Get the reference of listview
    ListView listView = (ListView) findViewById(R.id.listView1);
  • Create a custom adapter for our listview.
    Customadapter adapter = new Customadapter(this, dataItems);
    listView.setAdapter(adapter);

MainActivity.java

package com.example.customadapterkb4dev;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.widget.ListAdapter;
import android.widget.ListView;

public class MainActivity extends Activity {
DataItem[] dataItems;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		dataItems = new DataItem[3];
		dataItems[0] = new DataItem(2, "yes", 5);
		dataItems[1] = new DataItem(3, "yes", 5);
		dataItems[2] = new DataItem(4, "success", 6);
		
		setContentView(R.layout.activity_main);
		ListView listView = (ListView) findViewById(R.id.listView1);
		Customadapter adapter = new Customadapter(this, dataItems);
		listView.setAdapter(adapter);
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

}

So, it was all about custom adapters in android. Now you can try your hands to build awesome layouts using custom adapters.