Making Custom Android ListViews: Part 2

Continuing our discussion from our discussion from last Tuesday we are going resume creating custom listviews for our android apps. Last time we sorted out the visual elements of the listviews or the appearance of the ListView and today we are going to program the behavior of the ListViews.

Get a Cup of Java In…

Starting off we create a new java class. For example here we are going to make the menu of a weather forecasting app so we are going to name our class Weather.java. This class is going to be our Custom Array Adapter and is going to hold the objects which we will bind to our ListView.

Weather.java

[code language=”java”]
public class Weather {
public int icon;
public String title;
public Weather(){
super();
}

public Weather(int icon, String title) {
super();
this.icon = icon;
this.title = title;
}
}
[/code]

Getting the Adapter

Now going back to the views that we created in our last post listview_item_row.xml has two views corresponding to the attributes of Weather.java. Well you guessed correct: the properties of weather.java are going to be displayed in those views. Which begs the question: how do we connect them?  This is where the CustomArrayAdapter comes in. This is going to connect our class to the views. It is going to inherit Android ArrayAdapter class. Only difference is that we are going to override getView method. Quite naturally we are going to make a separate class called WeatherAdapter. Have a look at how to implement it.

 WeatherAdapter.java

[code language=”java”]
public class WeatherAdapter extends ArrayAdapter<Weather>{

Context context;
int layoutResourceId;
Weather data[] = null;

public WeatherAdapter(Context context, int layoutResourceId, Weather[] data) {
super(context, layoutResourceId, data);
this.layoutResourceId = layoutResourceId;
this.context = context;
this.data = data;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
View row = convertView;
WeatherHolder holder = null;

if(row == null)
{
LayoutInflater inflater = ((Activity)context).getLayoutInflater();
row = inflater.inflate(layoutResourceId, parent, false);

holder = new WeatherHolder();
holder.imgIcon = (ImageView)row.findViewById(R.id.imgIcon);
holder.txtTitle = (TextView)row.findViewById(R.id.txtTitle);

row.setTag(holder);
}
else
{
holder = (WeatherHolder)row.getTag();
}

Weather weather = data[position];
holder.txtTitle.setText(weather.title);
holder.imgIcon.setImageResource(weather.icon);

return row;
}

static class WeatherHolder
{
ImageView imgIcon;
TextView txtTitle;
}
}
[/code]

In the above code,the first important thing is the constructor of the class that takes three parameters.

• The first parameter is the Context and we can pass the reference of the activity in which we will use WeatherAdapterclass.
• The second parameter is the resource id of the layout file we want to use for displaying each ListView item. We will pass the resource id of our layout file listview_item_row.xml for this parameter.
• The third parameter is an array of Weather class objects that will be used by the Adapter to display data.

Next the parent class getView method is overridden. This method will be called for every item in the ListView to create views with their properties set as we want. The getView method is also using a temporary holder class declared inside the WeatherAdapter class. This class will be used to cache the ImageView and TextView so they can be reused for every row in the ListView and this will provide us a great performance improvement as we are recycling the same two views with different properties and we don’t need to find ImageView and TextView for every ListView item. The above code is also using the Android built in Layout Inflator to inflate (parse) the xml layout file.

Lets Get This Puppy On Its Way

Now that we got that out of the way we can now add the final touches to main activity. Ours here is the generic MainActivity.java.

MainActivity.java

[code language=”java”]
public class MainActivity extends Activity {

private ListView listView1;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

Weather weather_data[] = new Weather[]
{
new Weather(R.drawable.weather_cloudy, "Cloudy"),
new Weather(R.drawable.weather_showers, "Showers"),
new Weather(R.drawable.weather_snow, "Snow"),
new Weather(R.drawable.weather_storm, "Storm"),
new Weather(R.drawable.weather_sunny, "Sunny")
};

WeatherAdapter adapter = new WeatherAdapter(this,
R.layout.listview_item_row, weather_data);

listView1 = (ListView)findViewById(R.id.listView1);

View header = (View)getLayoutInflater().inflate(R.layout.listview_header_row, null);
listView1.addHeaderView(header);

listView1.setAdapter(adapter);
}
[/code]

There are few things in the MainActivity that you need to better understand:

• First notice, we are creating an array of Weather class objects and icons and titles are passed as constructor parameters.
• Next, WeatherAdapter object is created and listview_item_row.xml layout file resource id and Weather objects array is passed in its constructor.

Once again, we are using Android Layout Inflator to inflate our listview_header_row.xml layout file and once it is parses as header View it is passed as a parameter of ListView addHeaderView method. Finally we are passing our custom adapter to ListView setAdapter method.

Once you have done this you have finished everything properly and successfully implemented your first Custom Android ListView. With our icons it looks somewhat like this.

You can see this in action in most of our works of our Android Developers on the Play Store.

Source:

Customizing Android ListView Items with Custom ArrayAdapter by Waqas Anwar